渲染
渲染是將您編寫的程式碼轉換為使用者介面的過程。React 和 Next.js 讓您能建立混合式網路應用程式，其中部分程式碼可在伺服器或客戶端渲染。本節將幫助您理解這些渲染環境、策略與執行階段之間的差異。
基礎概念
首先，熟悉以下三個基礎網路概念會有所幫助：
渲染環境
網路應用程式可在兩種環境中進行渲染：客戶端與伺服器。
- 客戶端指的是使用者裝置上的瀏覽器，它會向伺服器發送請求以獲取應用程式碼，然後將伺服器的回應轉換為使用者介面。
- 伺服器指的是資料中心中的電腦，它儲存您的應用程式碼、接收來自客戶端的請求，並發送回適當的回應。
過去，開發者在為伺服器和客戶端編寫程式碼時，必須使用不同的語言（如 JavaScript、PHP）和框架。透過 React，開發者可以使用相同的語言（JavaScript）和相同的框架（如 Next.js 或您選擇的框架）。這種靈活性讓您能無縫地為兩種環境編寫程式碼，而無需切換上下文。
然而，每種環境都有其特定的能力與限制。因此，您為伺服器和客戶端編寫的程式碼並不完全相同。某些操作（如資料獲取或管理使用者狀態）更適合在其中一種環境中執行。
理解這些差異是有效使用 React 和 Next.js 的關鍵。我們將在伺服器元件和客戶端元件頁面中更詳細地介紹差異與使用案例，現在讓我們繼續建立基礎知識。
請求-回應生命週期
廣義上來說，所有網站都遵循相同的請求-回應生命週期：
- 使用者操作：使用者與網路應用程式互動，可能是點擊連結、提交表單，或直接在瀏覽器地址欄輸入網址。
- HTTP 請求：客戶端向伺服器發送 HTTP 請求，其中包含請求資源的必要資訊、使用的請求方法（如
GET、POST），以及必要的附加資料。 - 伺服器：伺服器處理請求並回應適當的資源，此過程可能包含路由、獲取資料等步驟。
- HTTP 回應：處理完請求後，伺服器向客戶端發送 HTTP 回應，包含狀態碼（告知客戶端請求是否成功）和請求的資源（如 HTML、CSS、JavaScript、靜態資源等）。
- 客戶端：客戶端解析資源以渲染使用者介面。
- 使用者操作：使用者介面渲染完成後，使用者可與其互動，整個過程再次開始。
建立混合式網路應用程式的重要部分，是決定如何在生命週期中分配工作，以及在哪裡設置網路邊界。
網路邊界
在網頁開發中，網路邊界是一個概念上的分界線，用於區隔不同的環境。例如客戶端與伺服器之間，或伺服器與資料儲存之間。
在 React 中，您可以根據需求選擇最合適的位置來設置客戶端-伺服器的網路邊界。
在底層，工作被分為兩部分：客戶端模組圖和伺服器模組圖。伺服器模組圖包含所有在伺服器上渲染的元件，客戶端模組圖則包含所有在客戶端渲染的元件。
您可以將模組圖視為應用程式中檔案相依關係的視覺化表示。
您可以使用 React 的 "use client" 慣例來定義邊界。還有 "use server" 慣例，它告訴 React 在伺服器上執行某些計算工作。
建立混合式應用程式
在這些環境中工作時，將應用程式中的程式碼流視為單向會有所幫助。換句話說，在回應過程中，您的應用程式碼流是從伺服器流向客戶端的單一方向。
如果您需要從客戶端存取伺服器，您會向伺服器發送新的請求，而不是重複使用相同的請求。這讓您更容易理解該在哪裡渲染元件，以及在哪裡設置網路邊界。
實際上，這種模式鼓勵開發者先思考要在伺服器上執行什麼，再將結果發送到客戶端並使應用程式具有互動性。
當我們探討如何在同一個元件樹中交錯使用客戶端與伺服器元件時，這個概念會更加清晰。