在此版本的Next.js 中，我們將探討什麼是客戶端和伺服器元件、它們的差異、何時使用每個元件，並提供實際範例來幫助您在自己的應用程式中實現它們。專案.
在 Next.js 中，客戶端元件 和 伺服器元件 之間有明顯的差異。這種分離使您能夠更好地決定在何處以及如何處理程式碼，從而直接影響效能和使用者體驗。
客戶端元件在瀏覽器中運行，允許互動和存取瀏覽器 API（如視窗或文件）。它們非常適合管理應用程式的動態介面和響應用戶操作。
'use client'; // Indicates that this component runs on the client
import { useState } from 'react';
export default function ClientComponent() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Client-side Counter</h1>
<p>The count value is: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
這個經典範例是一個允許使用者直接與頁面互動的計數器。 「使用客戶端」；指令告訴 Next.js 該元件應該在瀏覽器中執行。
伺服器元件是 Next.js 架構中的一項新功能。這些元件在伺服器上進行處理，並將已呈現的 HTML 傳送到瀏覽器。這減少了到達客戶端的 JavaScript 數量，從而加快了初始頁面載入速度。
export default async function ServerComponent() {
const data = await fetch('https://api.example.com/data').then(res => res.json());
return (
<div>
<h1>Data from the Server</h1>
<p>{data.message}</p>
</div>
);
}
在此範例中，元件在伺服器上呈現，從 API 檢索數據，然後傳回呈現的 HTML。這意味著資料獲取邏輯不會到達客戶端，從而提高了效能。
Next.js 改進了伺服器和客戶端元件的互動方式。以下是一些最顯著的改進：
元件現在預設為伺服器元件。這意味著您的應用程式會透過向瀏覽器發送更少的 JavaScript 來自動優化，除非您明確需要 客戶端元件。
流允許組件分段加載。這對於大型或資料量大的頁面非常有用，因為頁面的各個部分可以在準備就緒時加載，而無需等待所有內容可用。
Next.js 可以更輕鬆地決定元件是在伺服器上運行還是在客戶端上運行，讓您更好地控制如何最佳化應用程式。
Hydration 是將伺服器傳送的靜態 HTML 轉換為客戶端上的互動頁面的過程。借助 Next.js，水合作用更有效率且更具選擇性，僅在絕對必要時進行。
// ServerComponent.tsx
export default async function ServerComponent() {
const data = await fetch('https://api.example.com/products').then(res => res.json());
return (
<div>
<h1>Product List (Server-rendered)</h1>
<ul>
{data.map((product: any) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
// ClientComponent.tsx
'use client';
import { useState } from 'react';
export default function ClientComponent() {
const [search, setSearch] = useState('');
return (
<div>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search product"
/>
<p>Searching for: {search}</p>
</div>
);
}
在此範例中，伺服器呈現產品清單並將其傳送至客戶端，而搜尋元件則在客戶端進行互動和管理。
Next.js stellt einen Wendepunkt in der Art und Weise dar, wie wir Webanwendungen entwickeln und sowohl die Leistung als auch das Benutzererlebnis optimieren. Durch den effizienten Einsatz von Serverkomponenten und Clientkomponenten können Sie schnelle, dynamische Anwendungen mit einer geringeren Anfangslast erstellen.
Die richtige Wahl zwischen einer Serverkomponente und einer Clientkomponente ist entscheidend, um die Funktionen des Frameworks voll auszuschöpfen. Mit diesen neuen Verbesserungen ist es einfacher, fundierte Entscheidungen zu treffen und Anwendungen zu erstellen, die nicht nur schnell, sondern auch interaktiv und skalierbar sind.
以上是Next.js 中的客戶端與伺服器元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
