使用 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 將在 http://localhost: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 開發伺服器正在運行，您可以導航到 http://localhost:3000/about 以查看渲染的頁面。

讓我們仔細看看程式碼。 About 元件是一個 React 功能元件，它傳回 JSX，它代表了 About 頁面的內容。在本例中，它呈現一個包含

標題和

段落的 元素。

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

存取 /about 路由後，伺服器將呈現 About 元件，用戶端將收到頁面的完整 HTML 表示形式。這種方法可確保頁面在發送給使用者之前完全呈現，從而提高效能和 SEO。

動態伺服器端渲染

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

為了示範動態伺服器端渲染，讓我們建立一個從模擬 API 取得資料的頁面。在頁面目錄中，建立一個名為 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，它接收使用者資料作為 prop。它使用接收到的資料呈現使用者清單。 getServerSideProps 函數是一個非同步函數，它從外部 API（本例中為 https://api.example.com/users）取得資料。

在 getServerSideProps 中，我們使用 fetch 函數向 API 發出 HTTP 請求並檢索使用者資料。然後，我們將回應解析為 JSON 並將其指派給使用者的變數。最後，我們傳回一個帶有 props 屬性的對象，其中包含所取得的使用者資料。

當使用者存取 /users 路由時，Next.js 將呼叫伺服器上的 getServerSideProps 函數來取得資料。所取得的使用者資料將作為 props 傳遞給 Users 元件進行渲染。這可確保每次請求時始終使用最新資料呈現頁面。

動態伺服器端渲染是一項強大的功能，使我們能夠建立資料驅動的頁面並向使用者提供個人化內容。透過在伺服器上取得數據，我們可以優化效能並確保在不同設備和網路條件下獲得一致的使用者體驗。

結論

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

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

以上是使用 Next.js 和 JavaScript 進行伺服器端渲染 (SSR)的詳細內容。更多資訊請關注PHP中文網其他相關文章！