阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 02月15日

⚙️無需 Next.js、Remix、Nuxt.js 等即可實現伺服器端渲染🔥

大家好！也許您想在您的專案中實現服務端渲染，但又不想重新設計其既定的架構？那麼本文特別適合您。今天，我將嘗試告訴你如何做到這一點。

值得注意的是，此方法適用於任何 Web 專案架構，無論是 WordPress、Vue.js 或其他任何架構。

🔧 伺服器端渲染的工作原理

此列表逐步描述了伺服器端渲染過程：

請求：當使用者請求網頁（透過輸入 URL 或點擊連結）時，請求將發送到 Web 伺服器。
處理：伺服器處理請求。這通常涉及從資料庫獲取資料、執行業務邏輯以及根據這些資料呈現 HTML。這可以使用伺服器端框架來完成，例如帶有 Express 的 Node.js、Django、Ruby on Rails 等。
產生 HTML ：伺服器為請求的頁面建立完整的 HTML。這可以使用模板引擎（如 EJS、Handlebars 或 Pug）或直接使用建立 HTML 結構的伺服器端語言來完成。
回應：伺服器將完全呈現的 HTML 頁面傳送回客戶端的瀏覽器。
在瀏覽器中渲染：瀏覽器接收 HTML 並立即渲染，將內容顯示給使用者。

在圖中，它看起來像這樣：

蘇維埃社會主義共和國

現在，讓我們看看程式碼中它是什麼樣的。

💻 程式碼範例

這是一個使用 Node.js 與 Express 和 EJS 作為 SSR 模板引擎的簡單範例：

1. 使用 Express 設定 Node.js

首先，您需要建立一個新的 Node.js 專案並安裝 Express 和 EJS：

npm install express ejs

2.建立伺服器

建立一個名為server.js的檔案：

const express = require('express');
const app = express();
const PORT = 3000;

// Set EJS as the templating engine
app.set('view engine', 'ejs');

// Sample data
const data = {
    title: 'Server Side Rendering Example',
    content: 'This is an example of Server Side Rendering using Node.js and EJS.'
};

// Define a route
app.get('/', (req, res) => {
    // Render the HTML using EJS
    res.render('index', { data });
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

3.建立 EJS 模板

建立一個名為views的資料夾，並在其中建立一個名為index.ejs的檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= data.title %></title>
</head>
<body>
    <h1><%= data.title %></h1>
    <p><%= data.content %></p>
</body>
</html>

4.啟動伺服器

執行伺服器：

node server.js

現在，當您導航至http://localhost:3000時，伺服器將呈現完整的 HTML 頁面並將其傳送至瀏覽器。

🐜 使用 HMPL

您可以使用此模組實現服務端渲染。連接非常簡單，使用方法也是：

<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>

或者

npm i hmpl-js

現在，您可以安全地在專案中使用該模組。讓我們嘗試從伺服器獲取一些元件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
  </head>
  <body>
    <script>
      document.body.append(
        hmpl.compile(`<main>{{ src: "/api/header" }}</main>`)().response
      );
    </script>
  </body>
</html>

由於請求物件的擴展標記，我們可以將字串編譯成現成的 DOM 節點，並且可以輕鬆地將其渲染到 DOM 中。

此外，如果您能用自己的明星來支持該專案那就太好了！謝謝❤️！

{% cta https://github.com/hmpl-language/hmpl %} 💎 星級 HMPL ★{% endcta %}

結果如下：