【NEXT.JS 系列】NEXT.JS 是如何運作的 7 – 關於客戶端與渲染

客戶端和服務器（Client and Server）

在 Web 應用程式的上下文中，客戶端是指用戶設備上的瀏覽器，它向服務器發送請求以獲取您的應用程式程式碼。 然後它將從服務器接收到的回應轉換為用戶可以與之互動的界面。

服務器是指數據中心中的計算機，它儲存您的應用程式程式碼、接收來自客戶端的請求、進行一些計算並送回適當的回應。

什麼是渲染（Rendering）

將您在 React 中編寫的程式碼轉換為 UI 的 HTML 表現形式， 這個過程稱為渲染。

渲染可以在服務器或客戶端上進行。 它可以在建構時提前發生，也可以在運行時的每個請求上發生。

Next.js 提供了三種渲染方法：服務器端渲染（Server-Side Rendering）、靜態網站生成（Static Site Generation）和客戶端渲染（Client-Side Rendering）。

預先渲染（Pre-Rendering）

服務器端渲染和靜態網站生成也稱為預先渲染（Pre-Rendering），因為早於結果發送到客戶端之前，先發生了外部數據的獲取和 React 元件到 HTML 的轉換。

客戶端渲染 vs. 預先渲染

在標準的 React 應用程式中，瀏覽器從服務器接收一個 HTML 空殼以及用於建構 UI 的 JavaScript 指令。 這稱為客戶端渲染，因為初始渲染工作發生在用戶設備上。

注意：您可以選擇使用 React 的 useEffect() 或數據獲取鉤子（例如 useSWR）獲取數據，從而為 Next.js 應用程式中的特定元件使用客戶端渲染。

相比之下，Next.js 預設預先渲染每個頁面。 預先渲染意味著 HTML 是在服務器上預先生成的，而不是全部由用戶設備上的 JavaScript 完成。

實際上，這意味著對於完全客戶端渲染的應用程式，用戶在渲染工作完成時會看到一個空白頁面。 與預先渲染應用相比，用戶將看到建構過的 HTML：

讓我們討論兩種類型的預先渲染：

服務器端渲染 （Server-Side Rendering）

使用服務器端呈現，頁面的 HTML 是在服務器上為每個請求生成的。 生成的 HTML、JSON 數據和 JavaScript 指令以使頁面具有互動性，然後發送到客戶端。

在客戶端，HTML 用於顯示快速的非互動式頁面，而 React 使用 JSON 數據和 JavaScript 指令使元件具有互動性（例如，將事件處理程式附加到按鈕）。 這個過程稱為水合作用（hydration）。

在 Next.js 中，您可以使用 getServerSideProps 選擇服務器端呈現頁面。

注意：React 18 和 Next 12 引入了 React 服務器元件（React server components）的 alpha 版本。 服務器元件完全在服務器上呈現，不需要客戶端 JavaScript 來呈現。 此外，服務器元件允許開發人員在服務器上保留一些邏輯，並且只將該邏輯的結果發送給客戶端。 這減少了發送到客戶端的包裹大小並提高了客戶端渲染性能。 您可以在此處了解有關 React 服務器元件的更多訊息。

靜態網站生成 （Static Site Generation）

使用靜態網站生成，HTML 是在服務器上生成的，但與服務器端渲染不同的是，運行時沒有服務器。 取而代之的是，在建構時，部署應用程式時生成一次內容，並將 HTML 儲存在 CDN 中並在每個用戶請求時重複利用。

在 Next.js 中，您可以選擇使用 getStaticProps 靜態生成頁面。

注意：您可以在構建網站後使用增量靜態重新生成（Incremental Static Regeneration）來建立或更新靜態頁面。 這意味著如果您的數據發生變化，您不必重建整個網站。

Next.js 的美妙之處在於，您可以逐頁選擇最適合您的情境的渲染方法，無論是靜態網站生成、服務器端渲染還是客戶端渲染。 要詳細了解哪種渲染方法適合您的特定情境，請參閱數據獲取文件。

在下一節中，我們將討論您的程式碼在部署後可以儲存或運行的位置。