渲染

渲染會將您撰寫的程式碼轉換成使用者介面。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 在伺服器上執行一些計算工作。

建構混合式應用程式

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

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

實際上，這個模型鼓勵開發人員在將結果發送到客戶端並使應用程式具有互動性之前，先考慮他們想要在伺服器上執行的內容。

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