服务端渲染 (SSR) 教程
1. 什么是服务端渲染 (SSR)？
服务端渲染（Server-Side Rendering，简称 SSR）是一种网页渲染技术，它允许服务器在接收到客户端请求时，动态生成完整的 HTML 页面并发送给客户端。与客户端渲染（Client-Side Rendering，简称 CSR）不同，SSR 在服务器端完成页面的渲染，客户端接收到的是已经渲染好的 HTML 页面，这有助于提高页面的加载速度和 SEO 优化。
1.1 SSR 的优势
- SEO 优化：搜索引擎爬虫更容易抓取和索引 SSR 生成的页面。
- 首屏加载速度：用户可以更快地看到页面内容，提升用户体验。
- 更好的用户体验：对于网络较慢或设备性能较低的用户，SSR 可以提供更好的体验。
1.2 SSR 的劣势
- 服务器负载：SSR 会增加服务器的负载，因为每次请求都需要服务器生成 HTML 页面。
- 开发复杂度：SSR 的开发和维护相对复杂，需要处理更多的服务器端逻辑。
2. 环境搭建
在开始 SSR 的实践之前，我们需要搭建一个基本的 Express.js 环境。
2.1 安装 Node.js 和 npm
首先，确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查是否安装成功：
node -v
npm -v
如果没有安装，请访问 Node.js 官网 下载并安装。
2.2 创建项目目录
创建一个新的项目目录，并初始化 npm：
mkdir ssr-demo
cd ssr-demo
npm init -y
2.3 安装 Express.js
使用 npm 安装 Express.js：
npm install express
3. 创建第一个 Express.js 应用
在项目根目录下创建一个 index.js 文件，并编写以下代码：
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, SSR!');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
3.1 运行应用
在终端中运行以下命令启动应用：
node index.js
打开浏览器，访问 http://localhost:3000，你应该会看到 "Hello, SSR!" 的页面。
4. 使用模板引擎进行 SSR
Express.js 支持多种模板引擎，如 EJS、Pug 等。我们将使用 EJS 作为模板引擎来实现 SSR。
4.1 安装 EJS
首先，安装 EJS：
npm install ejs
4.2 配置 EJS
在 index.js 中配置 EJS：
const express = require('express');
const app = express();
const port = 3000;
// 设置模板引擎为 EJS
app.set('view engine', 'ejs');
// 设置模板文件的目录
app.set('views', './views');
app.get('/', (req, res) => {
// 渲染模板并传递数据
res.render('index', { title: 'SSR Demo', message: 'Hello, SSR with EJS!' });
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
4.3 创建模板文件
在项目根目录下创建一个 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><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
4.4 运行应用
再次运行应用：
node index.js
访问 http://localhost:3000，你应该会看到 "Hello, SSR with EJS!" 的页面。
5. 实践练习
5.1 练习目标
创建一个简单的博客系统，使用 SSR 技术渲染博客文章列表。
5.2 步骤
- 创建博客数据：在
index.js中创建一个博客文章的数组。 - 渲染博客列表：在
index.ejs中渲染博客文章列表。 - 添加博客详情页面：创建一个新的路由和模板，用于显示博客文章的详细内容。
5.3 代码示例
5.3.1 创建博客数据
在 index.js 中添加博客数据：
const blogs = [
{ id: 1, title: 'First Blog Post', content: 'This is the first blog post.' },
{ id: 2, title: 'Second Blog Post', content: 'This is the second blog post.' },
];
5.3.2 渲染博客列表
修改 index.js 中的路由：
app.get('/', (req, res) => {
res.render('index', { title: 'SSR Demo', blogs });
});
修改 index.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1>Blog Posts</h1>
<ul>
<% blogs.forEach(blog => { %>
<li><a href="/blog/<%= blog.id %>"><%= blog.title %></a></li>
<% }) %>
</ul>
</body>
</html>
5.3.3 添加博客详情页面
创建一个新的路由和模板：
app.get('/blog/:id', (req, res) => {
const blog = blogs.find(b => b.id === parseInt(req.params.id));
res.render('blog', { title: blog.title, blog });
});
在 views 文件夹中创建 blog.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= blog.title %></h1>
<p><%= blog.content %></p>
</body>
</html>
5.4 运行应用
再次运行应用：
node index.js
访问 http://localhost:3000，你应该会看到博客文章列表，点击文章标题可以查看详细内容。
6. 总结
通过本教程，我们学习了服务端渲染（SSR）的基本概念，并使用 Express.js 和 EJS 模板引擎实现了一个简单的 SSR 应用。SSR 技术在提高页面加载速度和 SEO 优化方面具有显著优势，但也需要开发者处理更多的服务器端逻辑。希望本教程能帮助你更好地理解和应用 SSR 技术。
7. 进一步学习
- 优化 SSR 性能：学习如何使用缓存、压缩和 GZIP 等技术优化 SSR 性能。
- 集成数据库：学习如何将 SSR 与 MongoDB 或 SQL 数据库集成，实现动态内容渲染。
- 安全最佳实践：学习如何在 SSR 应用中实施安全最佳实践，防止常见的安全漏洞。
通过不断实践和学习，你将能够构建更复杂、更高效的 SSR 应用。