在 Web 開發(fā)領(lǐng)域，提供快速、無縫的用戶體驗至關(guān)重要。實現(xiàn)此目的的一種方法是通過服務(wù)器端渲染 (SSR)，這是一種允許在將網(wǎng)頁發(fā)送到客戶端之前在服務(wù)器上渲染網(wǎng)頁的技術(shù)。 SSR 提供??了許多好處，包括改進的性能、SEO 優(yōu)化和更好的用戶交互。在本文中，我們將使用 Next.js 探索 SSR 的基礎(chǔ)知識，Next.js 是一種流行的 JavaScript 框架，用于構(gòu)建服務(wù)器渲染的 React 應(yīng)用程序。
什么是服務(wù)器端渲染 (SSR)？
傳統(tǒng)上，Web 應(yīng)用程序依賴于客戶端渲染，其中整個渲染過程使用 JavaScript 在瀏覽器上進行。這種方法適用于小型應(yīng)用程序，但可能會導(dǎo)致初始頁面加載速度較慢、SEO 性能較差以及可訪問性有限。
另一方面，服務(wù)器端渲染涉及在服務(wù)器上生成完整的 HTML 內(nèi)容并將其發(fā)送到客戶端。然后，客戶端會收到一個完全呈現(xiàn)的頁面，準備好顯示給用戶。這種方法可以讓搜索引擎更有效地抓取頁面，提高用戶的感知性能。
介紹 Next.js
Next.js 是一個 React 框架，提供內(nèi)置的服務(wù)器端渲染功能。它通過抽象化服務(wù)器端設(shè)置和配置的復(fù)雜性，簡化了構(gòu)建 SSR 應(yīng)用程序的過程。 Next.js 還提供自動代碼分割、客戶端渲染和靜態(tài)站點生成等功能，使其成為現(xiàn)代 Web 開發(fā)的多功能選擇。
設(shè)置 Next.js 項目
要開始使用 Next.js，請確保您的計算機上安裝了 Node.js。為您的項目創(chuàng)建一個新目錄并使用以下命令對其進行初始化 –
npx create-next-app my-next-app
登錄后復(fù)制
此命令使用必要的文件和依賴項設(shè)置一個新的 Next.js 項目。通過運行導(dǎo)航到項目目錄 –
cd my-next-app
登錄后復(fù)制
進入項目目錄后，使用以下命令啟動開發(fā)服務(wù)器 –
npm run dev
登錄后復(fù)制
Next.js 將在 http://localhost:3000 上啟動本地開發(fā)服務(wù)器，您可以在瀏覽器中看到您的應(yīng)用程序正在運行。
創(chuàng)建服務(wù)器端渲染頁面
Next.js 使創(chuàng)建服務(wù)器端渲染頁面變得異常簡單。在項目結(jié)構(gòu)中，導(dǎo)航到 Pages 目錄并創(chuàng)建一個名為 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ù)器正在運行，您可以導(dǎo)航到 http://localhost:3000/about 以查看渲染的頁面。
讓我們仔細看看代碼。 About 組件是一個 React 功能組件，它返回 JSX，它代表了 About 頁面的內(nèi)容。在本例中，它呈現(xiàn)一個包含
標題和
段落的 元素。
最后的導(dǎo)出默認About語句將About組件導(dǎo)出為默認導(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ù)器端計算。這使我們能夠向用戶提供動態(tài)內(nèi)容，而無需依賴客戶端 JavaScript。
為了演示動態(tài)服務(wù)器端渲染，讓我們創(chuàng)建一個從模擬 API 獲取數(shù)據(jù)的頁面。在頁面目錄中，創(chuàng)建一個名為 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ù)制
說明
在上面的代碼中，我們定義了一個功能組件 Users，它接收用戶數(shù)據(jù)作為 prop。它使用接收到的數(shù)據(jù)呈現(xiàn)用戶列表。 getServerSideProps 函數(shù)是一個異步函數(shù)，它從外部 API（本例中為 https://api.example.com/users）獲取數(shù)據(jù)。
在 getServerSideProps 中，我們使用 fetch 函數(shù)向 API 發(fā)出 HTTP 請求并檢索用戶數(shù)據(jù)。然后，我們將響應(yīng)解析為 JSON 并將其分配給用戶的變量。最后，我們返回一個帶有 props 屬性的對象，其中包含獲取的用戶數(shù)據(jù)。
當(dāng)用戶訪問 /users 路由時，Next.js 將調(diào)用服務(wù)器上的 getServerSideProps 函數(shù)來獲取數(shù)據(jù)。獲取的用戶數(shù)據(jù)將作為 props 傳遞給 Users 組件進行渲染。這可確保每次請求時始終使用最新數(shù)據(jù)呈現(xiàn)頁面。
動態(tài)服務(wù)器端渲染是一項強大的功能，使我們能夠構(gòu)建數(shù)據(jù)驅(qū)動的頁面并向用戶提供個性化內(nèi)容。通過在服務(wù)器上獲取數(shù)據(jù)，我們可以優(yōu)化性能并確保在不同設(shè)備和網(wǎng)絡(luò)條件下獲得一致的用戶體驗。
結(jié)論
使用 Next.js 和 JavaScript 進行服務(wù)器端渲染 (SSR) 提供了一種構(gòu)建高性能 Web 應(yīng)用程序的有效方法。通過利用 Next.js 的服務(wù)器端渲染功能，我們可以向用戶提供完全渲染的頁面，從而提高性能、搜索引擎可見性和整體用戶體驗。
本文介紹了 SSR，逐步介紹了 Next.js 項目的設(shè)置，并演示了如何創(chuàng)建服務(wù)器端渲染頁面。我們探討了服務(wù)器端渲染的好處以及 Next.js 如何簡化在 React 應(yīng)用程序中實現(xiàn) SSR 的過程。
以上就是使用 Next.js 和 JavaScript 進行服務(wù)器端渲染 (SSR)的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
