前言
服务端渲染（Server-Side Rendering，SSR）是一种常见于网页应用的技术，它指的是在服务器上将网页的内容生成，然后发送完整的HTML页面到客户端的浏览器的过程。这与传统的客户端渲染（Client-Side Rendering，CSR）相对，客户端渲染是在用户的浏览器上动态生成页面内容。
示例
EJS（Embedded JavaScript templating）是一个流行的模板引擎，它可以嵌入JavaScript代码到HTML页面中。它通过特定的模板标签让你能够将服务器端的数据插入到HTML页面中。这个过程通常用于服务端渲染（SSR）中，以动态地创建HTML页面，这些页面包含了来自服务器端的数据和逻辑。
下面是一个基于Node.js和EJS实现的简单服务端渲染的代码示例：
首先，你需要安装 ejs 和 express：
npm install express ejs
然后，你可以创建一个基础的Express服务器并使用EJS作为模板引擎：
const express = require('express');
const app = express();
// 设置EJS为模板引擎
app.set('view engine', 'ejs');
// 定义一个路由来渲染EJS模板
app.get('/', (req, res) => {
// 模拟一些要传递到模板的数据
const data = {
title: 'Hello World',
content: 'This is a server-side rendered page using EJS.',
items: ['Apple', 'Banana', 'Orange']
};
// 渲染`views/index.ejs`模板，并传入数据
res.render('index', data);
});
// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在你的views目录中，你需要有一个index.ejs文件，它可以是像这样的：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= content %></h1>
<ul>
<% items.forEach(function(item) { %>
<li><%= item %></li>
<% }); %>
</ul>
</body>
</html>
在这个EJS模板中，<%= %>标签用来输出变量的值，而<% %>标签用来执行任意的JavaScript代码，比如循环或者条件判断。此模板会获得从服务器传递过来的data对象，然后它用这个数据来动态插入标题、内容和列表项到页面中。
当用户访问根URL(/)时，这个页面将会被服务端渲染并响应给用户的浏览器，显示动态生成的带有数据的HTML内容。这就是在Node.js中使用EJS进行服务端渲染的一个基础示例。
优点
服务端渲染的优点包括：
- 更快的首屏加载：用户能够更快地看到完整渲染的页面，因为服务器已经处理了大部分的内容生成。
- 搜索引擎优化（SEO）：由于内容已经在服务端完成渲染，搜索引擎可以更容易地抓取和索引网页内容，这对SEO是有利的。
- 更好的性能：对于那些处理能力较弱的客户端设备来说，服务器端渲染可能会提供更好的性能体验。
- 减轻客户端的负担：因为页面是在服务器上生成，客户端需要做的工作更少，可以减少设备的能耗和计算需求。
缺点
服务端渲染的缺点包括：
- 服务器加载：所有的渲染负担都在服务器上，可能会导致服务器性能压力增大。
- 响应时间：在服务器负载较高的情况下，页面的生产和传输可能会需要更多的时间，这会影响到用户体验。
- 缓存策略：对于高度动态的内容，实现有效的缓存策略可能比较困难，因为每个用户请求可能都需要生成新的页面。
总结
现代的网页开发通常会结合服务端渲染和客户端渲染的优点，使用如Next.js、Nuxt.js等框架支持的通用（同构）渲染，以提供最佳的用户体验和性能。这种方式可以让应用的首屏直接由服务端渲染并提供给客户端，而后续的页面交互则由客户端接管，从而结合两种渲染方式的优势。
