學到這裡，相信大家已經完全了解react的寫法與原理，如果有上過我的課的，第一堂的時候，我都會跟大家說react實際是怎麼渲染的(透過codeSandBox講的)，是被編譯成DOM節點後渲染到瀏覽器裡的，所以我們之前用codeSandBox創建的檔案，實際上是純React專案，而不是中心的Next.js專案喔!!

Next.js專案比較常出現在大公司以及規模比較大的專案，是屬於比較專業的一種形式，但如果今天你只是想自己簡單練習，或者做一些小專案，那其實用Next.js是大材小用，而且專案設定檔案太多了，容易混亂。

這時候就要來使用純React專案 也就是CRA專案了!!

建立純React專案

with TypeScript

npx create-react-app 專案名稱 --template typescript

專案架構應該會像這樣

my-app/
  public/
    index.html
  src/
    App.js
    index.js
  package.json

執行的指令是

npm start

觀念釐清

到這裡或許有人已經混亂了，一下react一下next.js的，簡單來說

純 React：

  1. 使用者請求網頁 → 伺服器回傳一個空的 index.html
  2. 前端下載 JS bundle
  3. React 在使用者的瀏覽器「執行 JS」→ 才開始渲染畫面

這叫：

CSR（Client-Side Rendering，瀏覽器端渲染）

Next.js → SSR 流程：

  1. 使用者請求 /products/1
  2. 伺服器（Node.js）先執行 React 程式碼
  3. Server 把「完整 HTML」組出來
  4. 送給使用者（使用者馬上看到畫面）
  5. 前端再進行 hydration 變成互動式

這就是：

SSR = React 在伺服器跑一次，在瀏覽器再跑一次

項目 CRA（純 React） Next.js
開發指令 npm start npm run dev
build 指令 npm run build npm run build
build 後的內容 /build（可放 WordPress） /.next（需要 Node server，不能放 WordPress）
性質 純前端 前端 + 後端 SSR

<aside> ⚛️

SSR 可以直接在 server 取資料，而不是讓前端 fetch。有看過我的inlineFetch這篇進階react寫法的人，應該知道fetch的寫法如何。

</aside>

為什麼要 SSR？

1. SEO 強

因為 Google 看到的是「完整 HTML」，而不是空的 div。

2. 初次載入超快

不用等 JS 下載、執行後才看到畫面，伺服器已經渲染了。

3. 可以在後端取得資料（不用 expose API）

例如：

const products = await db.getProducts();

檔案結構

my-app/
  public/
    index.html      ← React 自動掛載處
  src/
    App.js          ← 入口 UI
    index.js        ← 程式入口，負責 render <App />
    pages/          ← 網頁放這兒
      Home.js
      About.js
      Login.js
    components/     ← components與pages同層
      NavBar.js
    App.css
    index.css
  package.json