渲染

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

基礎知識

首先，熟悉三個基礎網頁概念會很有幫助

• 你的應用程式碼可以執行的環境：伺服器和客戶端。
• 當使用者訪問或與你的應用程式互動時啟動的請求-回應生命週期。
• 分隔伺服器和客戶端程式碼的網路邊界。

渲染環境

有兩個可以渲染網頁應用程式的環境：客戶端和伺服器。

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

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

然而，每個環境都有自己的一組功能和限制。因此，你為伺服器和客戶端編寫的程式碼並不總是相同的。有些操作（例如資料抓取或管理使用者狀態）更適合在其中一個環境中執行。

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

請求-回應生命週期

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

1. 使用者操作：使用者與網頁應用程式互動。這可能是點擊連結、提交表單或直接在瀏覽器的網址列中輸入 URL。
2. HTTP 請求：客戶端向伺服器發送一個 HTTP 請求，其中包含關於正在請求哪些資源、正在使用什麼方法（例如 GET、POST）以及必要的額外資料的必要資訊。
3. 伺服器：伺服器處理請求並以適當的資源回應。此過程可能需要幾個步驟，例如路由、抓取資料等。
4. HTTP 回應：處理請求後，伺服器將 HTTP 回應發送回客戶端。此回應包含一個狀態碼（告訴客戶端請求是否成功）和請求的資源（例如 HTML、CSS、JavaScript、靜態資源等）。
5. 客戶端：客戶端解析資源以渲染使用者介面。
6. 使用者操作：一旦使用者介面被渲染，使用者就可以與之互動，然後整個過程重新開始。

建立混合式網頁應用程式的一個主要部分是決定如何在生命週期中劃分工作，以及將網路邊界放置在哪裡。

網路邊界

在網頁開發中，網路邊界是一條概念線，分隔不同的環境。例如，客戶端和伺服器，或伺服器和資料儲存庫。

在 React 中，你可以選擇將客戶端-伺服器網路邊界放置在最合理的地方。

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

將模組圖視為你的應用程式中檔案如何相互依賴的可視化表示可能會有所幫助。

你可以使用 React 的 "use client" 慣例來定義邊界。還有一個 "use server" 慣例，它告訴 React 在伺服器上執行一些計算工作。

建立混合應用程式

在這些環境中工作時，將你的應用程式中程式碼的流程視為單向的是很有幫助的。換句話說，在回應期間，你的應用程式碼朝一個方向流動：從伺服器到客戶端。

如果你需要從客戶端訪問伺服器，你可以向伺服器發送一個新的請求，而不是重複使用同一個請求。這讓你更容易理解在哪裡渲染你的元件以及在哪裡放置網路邊界。

在實踐中，這種模型鼓勵開發人員首先考慮他們想要在伺服器上執行什麼，然後再將結果發送到客戶端並使應用程式具有互動性。

當我們查看如何在同一個元件樹中交錯使用客戶端和伺服器元件時，這個概念將變得更加清晰。