在 Web 開發(fā)領(lǐng)域，提供快速、無縫的用戶體驗(yàn)至關(guān)重要。實(shí)現(xiàn)此目的的一種方法是通過服務(wù)器端渲染 (SSR)，這是一種允許在將網(wǎng)頁發(fā)送到客戶端之前在服務(wù)器上渲染網(wǎng)頁的技術(shù)。 SSR 提供??了許多好處，包括改進(jìn)的性能、SEO 優(yōu)化和更好的用戶交互。在本文中，我們將使用 Next.js 探索 SSR 的基礎(chǔ)知識，Next.js 是一種流行的 JavaScript 框架，用于構(gòu)建服務(wù)器渲染的 React 應(yīng)用程序。

什么是服務(wù)器端渲染 (SSR)？

傳統(tǒng)上，Web 應(yīng)用程序依賴于客戶端渲染，其中整個(gè)渲染過程使用 JavaScript 在瀏覽器上進(jìn)行。這種方法適用于小型應(yīng)用程序，但可能會導(dǎo)致初始頁面加載速度較慢、SEO 性能較差以及可訪問性有限。

另一方面，服務(wù)器端渲染涉及在服務(wù)器上生成完整的 HTML 內(nèi)容并將其發(fā)送到客戶端。然后，客戶端會收到一個(gè)完全呈現(xiàn)的頁面，準(zhǔn)備好顯示給用戶。這種方法可以讓搜索引擎更有效地抓取頁面，提高用戶的感知性能。

介紹 Next.js

Next.js 是一個(gè) React 框架，提供內(nèi)置的服務(wù)器端渲染功能。它通過抽象化服務(wù)器端設(shè)置和配置的復(fù)雜性，簡化了構(gòu)建 SSR 應(yīng)用程序的過程。 Next.js 還提供自動代碼分割、客戶端渲染和靜態(tài)站點(diǎn)生成等功能，使其成為現(xiàn)代 Web 開發(fā)的多功能選擇。

設(shè)置 Next.js 項(xiàng)目

要開始使用 Next.js，請確保您的計(jì)算機(jī)上安裝了 Node.js。為您的項(xiàng)目創(chuàng)建一個(gè)新目錄并使用以下命令對其進(jìn)行初始化 –

npx create-next-app my-next-app

登錄后復(fù)制

此命令使用必要的文件和依賴項(xiàng)設(shè)置一個(gè)新的 Next.js 項(xiàng)目。通過運(yùn)行導(dǎo)航到項(xiàng)目目錄 –

cd my-next-app

登錄后復(fù)制

進(jìn)入項(xiàng)目目錄后，使用以下命令啟動開發(fā)服務(wù)器 –

npm run dev

登錄后復(fù)制

Next.js 將在 http://localhost:3000 上啟動本地開發(fā)服務(wù)器，您可以在瀏覽器中看到您的應(yīng)用程序正在運(yùn)行。

創(chuàng)建服務(wù)器端渲染頁面

Next.js 使創(chuàng)建服務(wù)器端渲染頁面變得異常簡單。在項(xiàng)目結(jié)構(gòu)中，導(dǎo)航到 Pages 目錄并創(chuàng)建一個(gè)名為 about.js 的新文件。該文件將代表我們應(yīng)用程序中的 /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;

登錄后復(fù)制

保存文件，如果 Next.js 開發(fā)服務(wù)器正在運(yùn)行，您可以導(dǎo)航到 http://localhost:3000/about 以查看渲染的頁面。

讓我們仔細(xì)看看代碼。 About 組件是一個(gè) React 功能組件，它返回 JSX，它代表了 About 頁面的內(nèi)容。在本例中，它呈現(xiàn)一個(gè)包含

標(biāo)題和

段落的 元素。

最后的導(dǎo)出默認(rèn)About語句將About組件導(dǎo)出為默認(rèn)導(dǎo)出，這允許Next.js將其識別為服務(wù)器端呈現(xiàn)的頁面。

訪問 /about 路由后，服務(wù)器將呈現(xiàn) About 組件，客戶端將收到頁面的完整 HTML 表示形式。這種方法可確保頁面在發(fā)送給用戶之前完全呈現(xiàn)，從而提高性能和 SEO。

動態(tài)服務(wù)器端渲染

Next.js 還支持動態(tài)服務(wù)器端渲染，允許我們在渲染頁面之前從外部 API 獲取數(shù)據(jù)或執(zhí)行服務(wù)器端計(jì)算。這使我們能夠向用戶提供動態(tài)內(nèi)容，而無需依賴客戶端 JavaScript。

為了演示動態(tài)服務(wù)器端渲染，讓我們創(chuàng)建一個(gè)從模擬 API 獲取數(shù)據(jù)的頁面。在頁面目錄中，創(chuàng)建一個(gè)名為 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;

登錄后復(fù)制

說明

在上面的代碼中，我們定義了一個(gè)功能組件 Users，它接收用戶數(shù)據(jù)作為 prop。它使用接收到的數(shù)據(jù)呈現(xiàn)用戶列表。 getServerSideProps 函數(shù)是一個(gè)異步函數(shù)，它從外部 API（本例中為 https://api.example.com/users）獲取數(shù)據(jù)。

在 getServerSideProps 中，我們使用 fetch 函數(shù)向 API 發(fā)出 HTTP 請求并檢索用戶數(shù)據(jù)。然后，我們將響應(yīng)解析為 JSON 并將其分配給用戶的變量。最后，我們返回一個(gè)帶有 props 屬性的對象，其中包含獲取的用戶數(shù)據(jù)。

當(dāng)用戶訪問 /users 路由時(shí)，Next.js 將調(diào)用服務(wù)器上的 getServerSideProps 函數(shù)來獲取數(shù)據(jù)。獲取的用戶數(shù)據(jù)將作為 props 傳遞給 Users 組件進(jìn)行渲染。這可確保每次請求時(shí)始終使用最新數(shù)據(jù)呈現(xiàn)頁面。

動態(tài)服務(wù)器端渲染是一項(xiàng)強(qiáng)大的功能，使我們能夠構(gòu)建數(shù)據(jù)驅(qū)動的頁面并向用戶提供個(gè)性化內(nèi)容。通過在服務(wù)器上獲取數(shù)據(jù)，我們可以優(yōu)化性能并確保在不同設(shè)備和網(wǎng)絡(luò)條件下獲得一致的用戶體驗(yàn)。

結(jié)論

使用 Next.js 和 JavaScript 進(jìn)行服務(wù)器端渲染 (SSR) 提供了一種構(gòu)建高性能 Web 應(yīng)用程序的有效方法。通過利用 Next.js 的服務(wù)器端渲染功能，我們可以向用戶提供完全渲染的頁面，從而提高性能、搜索引擎可見性和整體用戶體驗(yàn)。

本文介紹了 SSR，逐步介紹了 Next.js 項(xiàng)目的設(shè)置，并演示了如何創(chuàng)建服務(wù)器端渲染頁面。我們探討了服務(wù)器端渲染的好處以及 Next.js 如何簡化在 React 應(yīng)用程序中實(shí)現(xiàn) SSR 的過程。

以上就是使用 Next.js 和 JavaScript 進(jìn)行服務(wù)器端渲染 (SSR)的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！