在 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)的詳細內容，更多請關注www.92cms.cn其它相關文章！
