使用 JavaScript 框架的伺服器端渲染 (SSR)

在當今快節奏的 Web 開發環境中，提供高效能且搜尋引擎友善的網站至關重要。實現這一目標的一種有效方法是透過伺服器端渲染 (SSR)。在本文中，我們將探討如何使用 JavaScript 框架實現 SSR，並提供程式碼範例、解釋和輸出，以幫助您在專案中充分發揮 SSR 的潛力。

了解伺服器端渲染

伺服器端渲染涉及在伺服器上產生 HTML 內容並將其傳送到客戶端，並在客戶端立即顯示。此方法與客戶端渲染 (CSR) 形成鮮明對比，在客戶端渲染 (CSR) 中，瀏覽器從伺服器檢索最少的 HTML，然後在客戶端使用 JavaScript 渲染內容。

伺服器端渲染的好處

• 提高效能 − SSR 最大限度地縮短了首次有意義繪製的時間，因為伺服器將預先渲染的 HTML 傳送到用戶端。這可以縮短頁面載入時間並提供更好的使用者體驗。

• #SEO 最佳化 − 搜尋引擎可以輕鬆抓取伺服器呈現的頁面並為其編制索引，從而提高搜尋引擎排名並提高可發現性。

• #社群媒體分享 − 伺服器渲染的頁面為社群媒體平台提供豐富的內容，確保分享連結顯示準確的預覽並有效吸引用戶。

#使用 JavaScript 框架實作伺服器端渲染

讓我們深入了解使用流行 JavaScript 框架的 SSR 實際實作。

React.js 與 Next.js

##使用 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 id="Welcome-to-SSR-with-React-and-Next-js">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。

輸出

#Vue.js 與 Nuxt.js

與 React 類似，Vue.js 也提供了一個強大的 SSR 框架，稱為 Nuxt.js。

透過開啟終端機並執行以下命令來建立新的 Nuxt.js 專案 -

npx create-nuxt-app my-ssr-app

這將建立一個名為 my-ssr-app 的新目錄，其中包含基本的 Nuxt.js 專案結構。

切換到專案目錄−

#

cd my-ssr-app

範例

開啟pages/index.vue檔案並取代包含下列程式碼的現有內容 −

<template>
   <div>
      <h1 id="Welcome-to-SSR-with-Vue-and-Nuxt-js">Welcome to SSR with Vue and Nuxt.js!</h1>
   </div>
</template>

<script>
export default {
   name: 'Home',
};
</script>

儲存更改，開發伺服器將自動重新載入更新的內容。

透過執行以下指令啟動開發伺服器−

npm run dev

刷新瀏覽器，造訪 http://localhost:3000。

輸出

#Angular 與 Angular Universal

#Angular 是一個綜合性的 JavaScript 框架，提供 Angular Universal 來實現伺服器端渲染。

首先，使用 npm 安裝 Angular Universal −

#

npm install --save @nguniversal/express-engine

範例

接下來，建立一個新檔案 src/app/ home.component.ts，並新增以下程式碼 -###

import { Component } from '@angular/core';

@Component({
   selector: 'app-home',
   template: `
      <div>
         <h1 id="Welcome-to-SSR-with-Angular-and-Angular-Universal">Welcome to SSR with Angular and Angular Universal!</h1>
      </div>
  `,
})
export class HomeComponent {}

使用以下代码更新 src/app/app.module.ts 文件 − p>

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中文網其他相關文章！