📅 最后修改于: 2023-12-03 15:36:27.679000 🧑 作者: Mango
在传统的 Web 应用中，页面的渲染是由客户端的浏览器通过发送请求获取服务器返回的 HTML 页面来完成的。这种方式的缺点是无法实现 SEO，同时也会造成不必要的网络流量。
为了解决这个问题，我们可以采用服务器端渲染 (Server-Side Rendering，简称 SSR) 的方式来进行页面的渲染。SSR 通过在服务器端将页面渲染成 HTML 后再返回给客户端，可以大幅度提高网站的性能和用户体验，同时也有利于 SEO。
在 Node.js 环境下，我们可以使用 EJS 模板引擎来完成服务器端渲染。EJS 是一种类似于 JSP、ASP 的动态页面生成技术，可以让我们在服务器端使用 JavaScript 代码来生成 HTML 页面。
首先，我们需要在项目中安装 EJS。可以使用 npm 命令来进行安装：
npm install ejs --save
接下来，我们需要创建模板文件来描述页面的结构和样式。模板文件通常位于项目的 views 目录下，文件名以 .ejs 结尾。
以下是一个简单的模板文件示例：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p><%= content %></p>
</body>
</html>
在这个模板文件中，我们使用了 EJS 的语法来表示动态数据。例如，<%= title %> 表示输出变量 title 的值。
接下来，我们需要在服务器端创建渲染函数，用于将模板文件渲染成 HTML 页面。
以下是一个简单的渲染函数示例：
const ejs = require('ejs');
const http = require('http');
const fs = require('fs');
http.createServer((req, res) => {
const data = {
title: 'Hello, World!',
content: 'This is a sample web page.'
};
const template = fs.readFileSync('./views/index.ejs', 'utf8');
const html = ejs.render(template, data);
res.end(html);
}).listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
在这个渲染函数中，我们使用了 EJS 的 render 方法来将模板文件渲染为 HTML 页面。可以看到，我们在 data 对象中定义了模板中需要使用的动态数据，然后将模板文件内容读取到 template 变量中，并使用 render 方法将其渲染成 HTML 页面。最后将 HTML 页面返回给客户端。
现在，我们可以启动服务器并在浏览器中访问 http://localhost:3000 来测试我们的程序了。如果一切正常，应该能够看到一个包含标题和内容的简单页面。
以上就是使用 EJS 的 Node.js 服务器端渲染 (SSR) 的基本流程。通过使用 EJS，我们可以方便地在服务器端完成页面的渲染，提高网站的性能和用户体验。