🌐 无需 Next.js、Remix、Nuxt.js 等即可进行服务器端渲染。

大家好！也许你想在项目中实现服务端渲染，但又不想重新设计现有的架构？那么这篇文章就是为你准备的。今天，我将尝试告诉你如何做到这一点。

值得注意的是，此方法适用于任何 Web 项目架构，无论是 WordPress、Vue.js 还是其他任何架构。

使用 HMPL

你可以通过该模块实现服务端渲染，连接方式很简单，使用方式如下：

或者

npm i hmpl-js

现在，您可以安全地在项目中使用该模块。让我们尝试从服务器获取一些组件：



  
    
    
    Example

得益于请求对象的扩展标记，我们可以将字符串编译成现成的 DOM 节点，并且可以轻松地将其渲染到 DOM 中。

结果如下：

这样，我们的组件就在服务器上渲染，我们只需在客户端显示它们。

为了更好地理解这个过程，让我们来讨论一下理论。

服务器端渲染的工作原理

此列表逐步描述了服务器端渲染过程：

请求：当用户请求网页（通过输入 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”的文件：




    
    
    <%= data.title %>


    <%= data.title %>
    <%= data.content %>

**4.启动服务器**

运行服务器：

node server.js

现在，当您导航到“http://localhost:3000”时，服务器将呈现完整的 HTML 页面并将其发送到浏览器。

结论

当您不需要依赖框架和库的架构时，这种方法很棒，但同时，由于这个特性，由于页面是从客户端请求的，搜索机器人将看不到该页面。因此，当您不需要过多考虑 SEO 时，这种方法很合适。

另外，如果您用您的星星支持**项目**，我会很高兴。谢谢！

星 HMPL ☆

CLIS.CC

🌐 无需 Next.js、Remix、Nuxt.js 等即可进行服务器端渲染。

使用 HMPL

服务器端渲染的工作原理

<%= data.title %>

结论