在當今快節奏的 Web 開發環境中，提供高效能且搜尋引擎友善的網站至關重要。實現這一目標的一種有效方法是透過伺服器端渲染 (SSR)。在本文中，我們將探討如何使用 JavaScript 框架實現 SSR，並提供程式碼範例、解釋和輸出，以幫助您在專案中充分發揮 SSR 的潛力。
伺服器端渲染涉及在伺服器上產生 HTML 內容並將其傳送到客戶端，並在客戶端立即顯示。此方法與客戶端渲染 (CSR) 形成鮮明對比，在客戶端渲染 (CSR) 中，瀏覽器從伺服器檢索最少的 HTML，然後在客戶端使用 JavaScript 渲染內容。
提高效能 − SSR 最大限度地縮短了首次有意義繪製的時間，因為伺服器將預先渲染的 HTML 傳送到用戶端。這可以縮短頁面載入時間並提供更好的使用者體驗。
#SEO 最佳化 − 搜尋引擎可以輕鬆抓取伺服器呈現的頁面並為其編制索引，從而提高搜尋引擎排名並提高可發現性。
#社群媒體分享 − 伺服器渲染的頁面為社群媒體平台提供豐富的內容，確保分享連結顯示準確的預覽並有效吸引用戶。
讓我們深入了解使用流行 JavaScript 框架的 SSR 實際實作。
##使用 Create React App 建立一個新的 React 專案。打開終端機並執行以下命令 -
npx create-react-app my-ssr-app
這將建立一個名為 my-ssr-app 的新目錄，其中包含基本的 React 專案結構。
切換到專案目錄 -
cd my-ssr-app
安裝 Next.js 作為依賴項 -
npm install next react react-dom
替換src/index.js檔案的內容使用以下程式碼−
import React from 'react';
const Home = () => {
return (
<div>
<h1>Welcome to SSR with React and Next.js!</h1>
</div>
);
};
export default Home;
在專案的src目錄下建立一個名為pages的新目錄−
mkdir src/pages
將 src/index.js 檔案移至 src/pages 目錄−
#mv src/index.js src/pages/index.js
開啟 package.json 檔案並用以下程式碼取代現有的「scripts」部分 -
"scripts": {
"dev": "next dev"
},
儲存更改，然後在終端機中執行以下命令來啟動開發伺服器 -
npm run dev
開啟瀏覽器並導航至 http://localhost:3000。
與 React 類似，Vue.js 也提供了一個強大的 SSR 框架，稱為 Nuxt.js。
透過開啟終端機並執行以下命令來建立新的 Nuxt.js 專案 -
npx create-nuxt-app my-ssr-app
切換到專案目錄−
cd my-ssr-app
開啟pages/index.vue檔案並取代包含下列程式碼的現有內容 −
<template>
<div>
<h1>Welcome to SSR with Vue and Nuxt.js!</h1>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
透過執行以下指令啟動開發伺服器−
npm run dev
首先，使用 npm 安裝 Angular Universal −
npm install --save @nguniversal/express-engine
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: `
<div>
<h1>Welcome to SSR with Angular and Angular Universal!</h1>
</div>
`,
})
export class HomeComponent {}
使用以下代码更新 src/app/app.module.ts 文件 −
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, HomeComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
最后，运行以下命令启动开发服务器−
npm run dev:ssr
在浏览器中导航到 http://localhost:4000，您将看到服务器渲染的输出。
服务器端渲染在性能、SEO 和社交媒体共享方面提供了显着的优势。 React.js 与 Next.js、Vue.js 与 Nuxt.js 以及 Angular 与 Angular Universal 等 JavaScript 框架提供了强大的 SSR 解决方案。
通过利用 SSR 的强大功能，开发人员可以增强用户体验、提高搜索引擎可见性并提供高度优化的网站。通过本文中提供的代码示例和说明，您现在已经为在项目中使用 JavaScript 框架实现 SSR 奠定了坚实的基础。立即开始探索 SSR 并释放 Web 应用程序的全部潜力。
以上是使用 JavaScript 框架的伺服器端渲染 (SSR)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
