Next.js 水合 (Hydration)

在 Next.js 中，「水合」（Hydration）是指在服務器端渲染 (Server-Side Rendering, SSR) 或靜態生成 (Static Generation) 的頁面上，將靜態 HTML 轉換為可交互的 React 應用的過程。

這個過程涉及將客戶端的 JavaScript 代碼與服務器端生成的靜態 HTML 進行結合，使得頁面能夠像單頁應用程序 (Single Page Application, SPA) 一樣運行。

水合的步驟

1. 服務器端渲染：
   • Next.js 在服務器端生成 HTML，並將其發送給客戶端。這樣用戶在第一次加載頁面時可以立即看到內容。
2. 加載 JavaScript：
   • 客戶端開始下載並執行包含應用程序邏輯的 JavaScript 代碼。
3. 水合過程：
   • React 接管靜態 HTML 並將其轉換為可交互的 DOM 樹。這個過程包括附加事件處理程序、初始化狀態等，使得頁面變得可交互。

水合的重要性

• 提升性能：
  • 用戶在首次加載頁面時會立即看到內容，提升了頁面加載速度和用戶體驗。
• SEO 友好：
  • 服務器端渲染的頁面對搜索引擎爬蟲更加友好，有助於 SEO 優化。