使用 Next.js 和 JavaScript 進行伺服器端渲染 (SSR)

---

在 Web 開發領域，提供快速流暢的使用者體驗至關重要。實現這一目標的方法之一是透過伺服器端渲染 (SSR)，這是一種在將網頁傳送到客戶端之前在伺服器上渲染網頁的技術。SSR 提供了許多好處，包括改進的效能、SEO 最佳化和更好的使用者互動。在本文中，我們將探討使用 Next.js 的 SSR 基礎知識，Next.js 是一個流行的 JavaScript 框架，用於構建伺服器端渲染的 React 應用程式。

什麼是伺服器端渲染 (SSR)？

傳統上，Web 應用程式依賴於客戶端渲染，其中整個渲染過程在瀏覽器中使用 JavaScript 進行。這種方法對於小型應用程式非常有效，但它會導致初始頁面載入速度變慢、SEO 效能差以及可訪問性有限。

另一方面，伺服器端渲染涉及在伺服器上生成完整的 HTML 內容並將其傳送到客戶端。然後，客戶端接收一個完全渲染的頁面，準備顯示給使用者。此方法允許搜尋引擎更有效地抓取頁面並提高使用者感知的效能。

介紹 Next.js

Next.js 是一個 React 框架，它提供內建的伺服器端渲染功能。它透過抽象伺服器端設定和配置的複雜性，簡化了構建 SSR 應用程式的過程。Next.js 還提供自動程式碼分割、客戶端渲染和靜態站點生成等功能，使其成為現代 Web 開發的多功能選擇。

設定 Next.js 專案

要開始使用 Next.js，請確保您的機器上已安裝 Node.js。為您的專案建立一個新目錄，並使用以下命令對其進行初始化：

npx create-next-app my-next-app

此命令將使用必要的檔案和依賴項設定一個新的 Next.js 專案。透過執行以下命令導航到專案目錄：

cd my-next-app

進入專案目錄後，使用以下命令啟動開發伺服器：

npm run dev

Next.js 將在 https://:3000 上啟動一個本地開發伺服器，您可以在瀏覽器中看到您的應用程式正在執行。

建立伺服器端渲染頁面

Next.js 使建立伺服器端渲染頁面變得非常簡單。在專案結構中，導航到 pages 目錄並建立一個名為 about.js 的新檔案。此檔案將表示我們應用程式中的 /about 路由。

在 about.js 中，新增以下程式碼：

function About() {
   return (
      <div>
         <h1>About Page</h1>
         <p>This is the server-side rendered About page.</p>
      </div>
   );
}

export default About;

儲存檔案，如果 Next.js 開發伺服器正在執行，您可以導航到 https://:3000/about 以檢視渲染的頁面。

讓我們仔細看看程式碼。About 元件是一個 React 函式元件，它返回 JSX，JSX 表示 About 頁面的內容。在這種情況下，它渲染一個 <div> 元素，其中包含一個 <h1> 標題和一個 <p> 段落。

最後的 export default About 語句將 About 元件匯出為預設匯出，這允許 Next.js 將其識別為伺服器端渲染的頁面。

訪問 /about 路由時，伺服器將渲染 About 元件，客戶端將接收頁面的完整 HTML 表示形式。這種方法確保在將頁面傳送到使用者之前完全渲染頁面，從而提高效能和 SEO。

動態伺服器端渲染

Next.js 還支援動態伺服器端渲染，允許我們在渲染頁面之前從外部 API 獲取資料或執行伺服器端計算。這使我們能夠向用戶提供動態內容，而無需依賴客戶端 JavaScript。

為了演示動態伺服器端渲染，讓我們建立一個從模擬 API 獲取資料的頁面。在 pages 目錄中，建立一個名為 users.js 的新檔案：

function Users({ users }) {
   return (
      <div>
         <h1>User List</h1>
         <ul>
            {users.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
}

export async function getServerSideProps() {
   const response = await  fetch('https://api.example.com/users');
   const users = await response.json();

   return {
      props: {
         users,
      },
   };
}

export default Users;

解釋

在上面的程式碼中，我們定義了一個名為 Users 的函式元件，它接收 users 資料作為 prop。它使用接收到的資料渲染使用者列表。getServerSideProps 函式是一個非同步函式，它從外部 API（此示例中的 https://api.example.com/users）獲取資料。

在 getServerSideProps 內部，我們使用 fetch 函式向 API 發出 HTTP 請求並檢索使用者資料。然後，我們將響應解析為 JSON 並將其分配給 users 變數。最後，我們返回一個包含 props 屬性的物件，該屬性包含獲取的使用者資料。

當用戶訪問 /users 路由時，Next.js 將在伺服器上呼叫 getServerSideProps 函式以獲取資料。獲取的使用者資料將作為 prop 傳遞給 Users 元件以進行渲染。這確保頁面在每次請求時都使用最新資料進行渲染。

動態伺服器端渲染是一項強大的功能，它允許我們構建資料驅動的頁面並向用戶提供個性化內容。透過在伺服器上獲取資料，我們可以最佳化效能並確保跨不同裝置和網路條件的一致使用者體驗。

結論

使用 Next.js 和 JavaScript 進行伺服器端渲染 (SSR) 提供了一種構建高效能 Web 應用程式的有效方法。透過利用 Next.js 的伺服器端渲染功能，我們可以向用戶提供完全渲染的頁面，從而提高效能、搜尋引擎可見性和整體使用者體驗。

本文介紹了 SSR，介紹瞭如何設定 Next.js 專案，並演示瞭如何建立伺服器端渲染的頁面。我們探討了伺服器端渲染的好處以及 Next.js 如何簡化在 React 應用程式中實現 SSR 的過程。