使用 Vite 掌握 React 中的伺服器端渲染 (SSR)：開發者終極指南

React 一直是前端開發領域的遊戲規則改變者，隨著 React 19 的發布，它變得更加強大和高效。在本部落格中，我們將使用 Vite（速度極快的建置工具）深入研究 React 19 中的伺服器端渲染 (SSR)。無論您是初學者還是高級開發人員，本指南都旨在使 SSR 變得平易近人且可操作。

React 19 有什麼新功能？

React 19 引入了幾個關鍵更新：

• 改進的伺服器元件：透過伺服器渲染和客戶端渲染元件的無縫整合來建立應用程式的新方法。

• 串流渲染：透過 React 將內容串流傳輸到瀏覽器的能力來增強效能。

• 並發渲染：透過動態決定任務優先順序來實現更流暢的使用者介面。

這些功能使 React 19 成為使用 Vite 等現代工具實現 SSR 的理想選擇。

---

了解伺服器端渲染 (SSR)

伺服器端渲染涉及在伺服器上渲染 React 元件並將 HTML 傳送到客戶端。與瀏覽器處理渲染的客戶端渲染 (CSR) 不同，SSR 提供​​：

• 更快的初始載入：瀏覽器收到完全渲染的 HTML 頁面。

• SEO 優勢：內容可供搜尋引擎爬蟲立即使用。

• 改進的使用者體驗：即使連線速度較慢，使用者也能更快看到內容。

SSR 在 React 19 中如何運作？

借助 React 19 的串流和並發特性，SSR 變得更有效率。元件在準備就緒時進行串流傳輸，從而減​​少伺服器回應時間並增強互動性。

---

為什麼要使用Vite進行SSR？

Vite 是一種現代建造工具，以其速度和簡單性而聞名。憑藉快速模組解析和熱模組替換（HMR）等先進功能，Vite 是在 React 19 專案中整合 SSR 的絕佳選擇。

Vite 在 SSR 中的主要優勢：

1. 閃電般的快速建置：最佳化的開發和生產工作流程。

2. 簡單配置：最少的樣板設定。

3. 對 React 的原生支援：對 JSX、TypeScript 和現代函式庫的內建支援。

4. 可擴充架構：高效處理大型專案。

---

使用 Vite 在 React 19 中設定 SSR 的逐步指南

讓我們從頭開始使用 Vite 建立一個支援 SSR 的 React 19 應用。請依照以下步驟開始：

1. 初始化項目

npm create vite@latest my-react-ssr-app --template react
cd my-react-ssr-app
npm install

2.安裝必要的依賴項

npm install express @vitejs/plugin-react react-dom/server

3. 設定Vite配置

編輯 vite.config.js 啟用 SSR：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    ssr: true,
    rollupOptions: {
      input: './server/index.js',
    },
  },
});

4. 建立一個簡單的 React 元件

建立 src/App.jsx:

function App() {
  return (
    <div>
      <h1 id="Welcome-to-React-SSR-with-Vite">Welcome to React 19 SSR with Vite</h1>
      <p>This page is server-side rendered!</p>
    </div>
  );
}
export default App;

5. 設定 Express 伺服器

建立 server/index.js:

import express from 'express';
import { renderToString } from 'react-dom/server';
import App from '../src/App';

const app = express();

app.use('/static', express.static('dist'));

app.get('*', (req, res) => {
  const appHtml = renderToString(<app></app>);

  const html = `
    
    
    
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>React 19 SSR with Vite</title>
    
    
      <div>



<h3>
  
  
  6. Build and Run
</h3>

<p>To build and serve your SSR app:<br>
</p>

<pre class="brush:php;toolbar:false">npm run build
node server/index.js

造訪 http://localhost:3000 查看您的 SSR React 應用程式的運作情況。

---

範例和最佳實踐

流式 SSR 範例

React 19 的 renderToPipeableStream 允許串流：

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const stream = renderToPipeableStream(<app></app>, {
    onShellReady() {
      res.status(200).setHeader('Content-Type', 'text/html');
      stream.pipe(res);
    },
    onError(err) {
      console.error(err);
      res.status(500).send('Internal Server Error');
    },
  });
});

這種方法逐步呈現內容，進而提升效能。

搜尋引擎優化考慮因素

• 使用正確的描述和關鍵字標籤。

• 為動態頁面實作網站地圖。

---

註釋和提示

• 始終使用 Lighthouse 等工具測試 SSR 效能。

• 保持伺服器邏輯最少以確保可擴充性。

• 使用環境變數來管理敏感資料。

---

結論

借助 React 19 的高級功能和 Vite 的現代建置功能，伺服器端渲染變得無縫且有效率。無論您是優化 SEO 還是改善使用者體驗，SSR 與 React 19 和 Vite 都是一個成功的組合。

---

喜歡閱讀嗎？如果您發現這篇文章有洞察力或有幫助，請考慮為我買杯咖啡來支持我的工作。您的貢獻有助於推動更多此類內容。點擊此處請我喝杯虛擬咖啡。乾杯！