渲染

渲染能將您編寫的程式碼轉換為使用者介面。React 和 Next.js 讓您可以建立混合式網頁應用程式，其中部分程式碼可在伺服器或客戶端渲染。本節將幫助您理解這些渲染環境、策略與執行階段之間的差異。

基礎概念

首先，熟悉以下三個基礎網頁概念會有所幫助：

• 應用程式碼執行的環境：伺服器與客戶端
• 當使用者造訪或與應用程式互動時觸發的請求-回應生命週期
• 區隔伺服器與客戶端程式碼的網路邊界

渲染環境

網頁應用程式可在兩種環境中進行渲染：客戶端與伺服器。

• 客戶端 指的是使用者裝置上的瀏覽器，它會向伺服器發送請求以獲取應用程式碼，然後將伺服器的回應轉換為使用者介面。
• 伺服器 指的是資料中心中的電腦，它儲存您的應用程式碼、接收來自客戶端的請求，並發送回適當的回應。

過去，開發者在為伺服器和客戶端編寫程式碼時，必須使用不同的語言（如 JavaScript、PHP）和框架。透過 React，開發者可以使用相同的語言（JavaScript）和相同的框架（例如 Next.js 或您選擇的框架）。這種靈活性讓您能無縫地為兩種環境編寫程式碼，而無需切換上下文。

然而，每種環境都有其獨特的能力與限制。因此，您為伺服器和客戶端編寫的程式碼並非總是相同。某些操作（例如資料獲取或管理使用者狀態）更適合在其中一種環境中執行。

理解這些差異是有效使用 React 和 Next.js 的關鍵。我們將在伺服器元件與客戶端元件頁面中更詳細地介紹差異和使用情境，現在讓我們繼續建立基礎知識。

請求-回應生命週期

廣義上說，所有網站都遵循相同的請求-回應生命週期：

1. 使用者操作： 使用者與網頁應用程式互動，可能是點擊連結、提交表單，或直接在瀏覽器地址欄輸入網址。
2. HTTP 請求： 客戶端向伺服器發送 HTTP 請求，其中包含請求資源的必要資訊、使用的方法（如 GET、POST），以及必要的附加資料。
3. 伺服器： 伺服器處理請求並回應適當的資源，此過程可能包含路由、獲取資料等步驟。
4. HTTP 回應： 處理請求後，伺服器向客戶端發送 HTTP 回應，包含狀態碼（告知客戶端請求是否成功）和請求的資源（如 HTML、CSS、JavaScript、靜態資源等）。
5. 客戶端： 客戶端解析資源以渲染使用者介面。
6. 使用者操作： 使用者介面渲染完成後，使用者可與其互動，整個過程再次開始。

建立混合式網頁應用的關鍵部分，在於決定如何在生命週期中分配工作，以及如何設定網路邊界。

網路邊界

在網頁開發中，網路邊界是一個概念上的界線，用於區分不同環境，例如客戶端與伺服器，或伺服器與資料儲存。

在 React 中，您可以根據需求自行選擇客戶端-伺服器網路邊界的位置。

實際上，工作被分為兩部分：客戶端模組圖和伺服器模組圖。伺服器模組圖包含所有在伺服器上渲染的元件，客戶端模組圖則包含所有在客戶端渲染的元件。

您可以將模組圖視為應用程式中檔案相互依賴關係的視覺化表示。

您可以使用 React 的 "use client" 慣例來定義邊界。此外還有 "use server" 慣例，用於告訴 React 在客戶端時於伺服器上執行某些計算工作。

建立混合式應用程式

在這些環境中工作時，將應用程式中的程式碼流視為單向會有所幫助。換句話說，在回應過程中，您的應用程式碼流動方向是從伺服器到客戶端。

如果需要從客戶端存取伺服器，您應向伺服器發送新的請求，而非重複使用相同請求。這有助於理解應在何處渲染元件以及如何設定網路邊界。

實際上，這種模式鼓勵開發者先思考要在伺服器上執行的內容，然後再將結果發送至客戶端並使應用程式具有互動性。

當我們探討如何在同一個元件樹中交錯使用客戶端與伺服器元件時，這個概念會更加清晰。