⚙️无需 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 中。

另外，如果你能点个星支持这个项目就更好了！谢谢❤️！

💎 明星 HMPL ★

结果如下：

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

结论

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

感谢您的阅读！

文章来源：https://dev.to/hmpljs/server-side-rendering-without-nextjs-remix-nuxtjs-etc-kik