資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 JavaScript 框架進行伺服器端渲染 (SSR)
在當今快節奏的 Web 開發環境中，交付高效能且對搜尋引擎友好的網站至關重要。實現此目標的一種有效方法是透過伺服器端渲染 (SSR)。在本文中，我們將探討如何使用 JavaScript 框架實現 SSR，以及程式碼示例、解釋和輸出，以幫助您在專案中充分利用 SSR 的潛力。
瞭解伺服器端渲染
伺服器端渲染涉及在伺服器上生成 HTML 內容並將其傳送到客戶端，客戶端會立即顯示該內容。這種方法與客戶端渲染 (CSR) 相反，在 CSR 中，瀏覽器從伺服器檢索最少的 HTML，然後使用客戶端上的 JavaScript 渲染內容。
伺服器端渲染的優勢
效能提升 − SSR 最大限度地減少了首次有意義繪製的時間，因為伺服器會將預渲染的 HTML 傳送到客戶端。這導致頁面載入時間更快，並提供更好的使用者體驗。
搜尋引擎最佳化 − 搜尋引擎可以輕鬆抓取和索引伺服器端渲染的頁面，從而提高搜尋引擎排名和可發現性。
社交媒體分享 − 伺服器端渲染的頁面為社交媒體平臺提供豐富的內容，確保共享連結顯示準確的預覽並有效地吸引使用者。
使用 JavaScript 框架實現伺服器端渲染
讓我們深入瞭解使用流行的 JavaScript 框架實現 SSR 的實踐。
使用 Next.js 的 React.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>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
開啟瀏覽器並導航到 https://:3000。
輸出
使用 Nuxt.js 的 Vue.js
與 React 類似，Vue.js 還提供了一個名為 Nuxt.js 的強大的 SSR 框架。
透過開啟您的終端並執行以下命令來建立一個新的 Nuxt.js 專案：
npx create-nuxt-app my-ssr-app
這將在名為 my-ssr-app 的新目錄中建立一個具有基本 Nuxt.js 專案結構的專案。
切換到專案目錄：
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
在 https://: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>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
在瀏覽器中導航到 https://:4000，您將看到伺服器端渲染的輸出。
輸出
結論
伺服器端渲染在效能、SEO 和社交媒體分享方面提供了顯著的優勢。像 React.js 與 Next.js、Vue.js 與 Nuxt.js 以及 Angular 與 Angular Universal 這樣的 JavaScript 框架提供了強大的 SSR 解決方案。
透過利用 SSR 的強大功能，開發人員可以增強使用者體驗、提高搜尋引擎可見性並交付高度最佳化的網站。透過本文提供的程式碼示例和解釋，您現在擁有了使用 JavaScript 框架在專案中實現 SSR 的堅實基礎。立即開始探索 SSR，並釋放 Web 應用程式的全部潛力。
472 次檢視
