理解 React 中的伺服器端渲染

2025/03/28

伺服器端渲染（Server Side Rendering）是一種提升網頁載入速度和 SEO 的重要技術。本文將介紹在 React 中使用伺服器端渲染的基本理由與實現方式，幫助新手工程師掌握提升使用者體驗及搜尋引擎優化的利器。

什麼是伺服器端渲染及其優勢

伺服器端渲染（Server Side Rendering, SSR）是指在伺服器上渲染 HTML 並且將其發送到客户端，這樣頁面即可供使用者立即查看，而不需等待 JavaScript 下載和運行。這種技術有多種優勢，特別是改善首屏渲染時間並提升 SEO 能見度。因為搜尋引擎可以直接抓取完整的頁面内容，這對於動態網站或應用程式特別重要。

React 中 SSR 的基本原理

在 React 中，SSR 是通過將 React 組件從伺服器端渲染成 HTML 字符串，並將該字符串連同其它所需的資料一起發送到客戶端。客戶端可以接續執行 React，以激活應用程式的行為。使用 ReactDOMServer 的方法如 renderToString 可以生成完整的 HTML。

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
console.log(html);

設定伺服器以支援 React SSR

要在伺服器上運行 React 應用程式，我們首先需要設置一個 Node.js 環境，通常使用 Express.js 作為伺服器框架。Express.js 可以幫助我們快速創建一個能夠處理 HTTP 請求的伺服器。

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const app = express();

app.get('*', (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<App />);
  const fullHtml = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>React SSR Example</title>
      </head>
      <body>
        <div id="root">${appHtml}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;
  res.send(fullHtml);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

React 中的資料預取策略

在進行 SSR 時，資料的預取是一個重要議題。你需要在伺服器上預先獲取應用程式所需的資料，然後將其注入到 React 組件中。常用的方式是使用個別組件的靜態方法，例如 getInitialProps，這在 Next.js 中使用得最為普遍。

在自己實現這類功能時，可以使用 Promise 或 async/await 來取得資料，並在渲染前確保資料已經到位。因為，若缺乏這樣的資料預先提供，網頁的使用者體驗可能受到影響。

Next.js 作為 React 的 SSR 框架

Next.js 是一個基於 React 的框架，它內建支持 SSR，極大地簡化了 React 應用程式的伺服器端渲染過程。通過封裝底層的配置和常見練習，Next.js 讓開發者只需專注於構建應用程式本身，而不需要重複造輪子。

下面展示一個 Next.js 的簡單 SSR 範例：

npx create-next-app my-next-app
cd my-next-app
npm run dev

動態路由和 SEO

當涉及到動態路由時，例如用戶個人頁面或文章頁面，SSR 可以確保每個動態生成的頁面都是可供搜尋引擎索引的靜態頁面。這意味著，任一頁面都能被搜索引擎完整地抓取和解析，這直接增強了 SEO 的效果。在 Next.js 中，這樣的頁面透過 getStaticPaths 和 getStaticProps （或 getServerSideProps）來生成，這樣的靜態生成策略在開發中非常有效。

伺服器端渲染與客戶端渲染的結合

結合使用 SSR 和客戶端渲染（Client Side Rendering）的方法常被稱作混合渲染。這種方法使得應用程式能夠在伺服器上利用預先載入的資料進行初始渲染，隨後在客戶端更新並動態加載資料。這提供了更好的性能和用戶體驗。

注意事項及常見的問題

在實作 SSR 時，性能和安全性是兩個不能忽視的問題。渲染時間過長可能導致伺服器負擔加重，而在伺服器上執行 JavaScript 則需要確保其安全性，防止XSS (跨站腳本) 攻擊。

利用 CDN 提升 SSR 的效能

為了進一步提高由 SSR 產生的網頁的響應速度，CDN（內容分發網絡）是一個有效的解決方案。將靜態資源放置在全球各地的多個資料中心中，能夠讓用戶在最短距離獲得資料，這在全球用戶基礎上是非常重要的。

結語：未來持續拓展的 SSR 技術

SSR 已經是現今前端應用的重要組成部分之一，在 React 中使用這項技術能有效提升應用表現及 SEO。隨著技術的演進與框架的支持日益完善，SSR 的實踐將變得更加容易，也讓前端開發者有更大的空間去實現理想中的應用程式。

← 上一篇: React 入門指南下一篇: Next.js 入門簡介：快速建置你的 React 應用 →