預渲染 (Pre-rendering)
在我們討論資料獲取 (data fetching)之前，先來談談 Next.js 中最重要的概念之一：預渲染 (Pre-rendering)。
預設情況下，Next.js 會對每個頁面進行預渲染。這意味著 Next.js 會「提前為每個頁面生成 HTML」，而不是完全依賴客戶端的 JavaScript 來完成。預渲染可以帶來更好的效能和搜尋引擎優化 (SEO)。
每個生成的 HTML 都關聯著該頁面所需的最少 JavaScript 程式碼。當瀏覽器載入頁面時，其 JavaScript 程式碼會執行並使頁面完全互動。（此過程稱為水合 (hydration)。）
檢查預渲染是否發生
您可以透過以下步驟檢查預渲染是否發生：
- 在瀏覽器中停用 JavaScript。（Chrome 的操作方式）。
- 嘗試訪問此頁面（本教學的最終結果）。
您應該會看到應用程式在沒有 JavaScript 的情況下仍然能渲染。這是因為 Next.js 已將應用程式預渲染為靜態 HTML，讓您無需執行 JavaScript 也能看到應用程式介面。
注意：您也可以在
localhost上嘗試上述步驟，但停用 JavaScript 後 CSS 將不會載入。
如果您的應用程式是純 React.js 應用（不使用 Next.js），則沒有預渲染功能，因此停用 JavaScript 後將無法看到應用程式。例如：
- 在瀏覽器中啟用 JavaScript 並查看此頁面。這是一個使用 Create React App 建構的純 React.js 應用。
- 現在，停用 JavaScript 並再次訪問同一頁面。
- 您將看不到應用程式，而是會顯示「您需要啟用 JavaScript 才能執行此應用」。這是因為該應用程式未被預渲染為靜態 HTML。
總結：預渲染 vs. 無預渲染
以下是簡要的圖示總結：
接下來，我們將討論 Next.js 中預渲染的兩種形式。