JavaScript与后端交互：服务器端渲染（SSR）教程

1. 什么是服务器端渲染（SSR）

服务器端渲染（Server-Side Rendering，SSR）是指在服务器上生成 HTML 内容并将其发送到客户端的过程。与客户端渲染（Client-Side Rendering，CSR）不同，SSR 在用户请求页面时就生成完整的 HTML，这样用户可以更快地看到页面内容。

优点

更快的首屏加载时间：用户可以更快地看到内容，因为 HTML 是在服务器上生成的。
SEO 友好：搜索引擎可以更容易地抓取和索引页面内容。
更好的性能：对于低性能设备，SSR 可以减轻客户端的负担。

缺点

服务器负担：每次请求都需要服务器生成 HTML，可能导致服务器负担加重。
交互性：SSR 可能需要额外的 JavaScript 来处理用户交互，增加了复杂性。
开发复杂性：需要处理服务器和客户端的代码，增加了开发的复杂性。

2. SSR 的工作原理

SSR 的基本工作流程如下：

用户在浏览器中输入 URL。
浏览器向服务器发送请求。
服务器处理请求，生成 HTML 内容。
服务器将 HTML 内容发送回浏览器。
浏览器渲染 HTML，用户看到页面。

3. 使用 Node.js 和 Express 实现 SSR

3.1 环境准备

首先，确保你已经安装了 Node.js 和 npm。然后创建一个新的项目目录并初始化 npm：

mkdir ssr-example
cd ssr-example
npm init -y

接下来，安装 Express：

npm install express

3.2 创建基本的 Express 服务器

在项目根目录下创建一个 server.js 文件，并添加以下代码：

const express = require('express');
const app = express();
const PORT = 3000;

// 模拟数据
const data = {
    title: 'Hello, SSR!',
    content: 'This is a simple example of server-side rendering with Node.js and Express.'
};

// 处理根路由
app.get('/', (req, res) => {
    const html = `
        <!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>
    `;
    res.send(html);
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

3.3 运行服务器

在终端中运行以下命令启动服务器：

node server.js

打开浏览器并访问 http://localhost:3000，你将看到服务器生成的 HTML 页面。

4. 使用模板引擎进行 SSR

为了更好地管理 HTML 结构，我们可以使用模板引擎，如 EJS、Pug 或 Handlebars。这里我们将使用 EJS。

4.1 安装 EJS

在项目中安装 EJS：

npm install ejs

4.2 配置 EJS

修改 server.js 文件以使用 EJS 作为模板引擎：

const express = require('express');
const app = express();
const PORT = 3000;

// 设置 EJS 作为模板引擎
app.set('view engine', 'ejs');

// 模拟数据
const data = {
    title: 'Hello, SSR!',
    content: 'This is a simple example of server-side rendering with Node.js and Express using EJS.'
};

// 处理根路由
app.get('/', (req, res) => {
    res.render('index', { data });
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

4.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.4 运行服务器并查看结果

再次运行服务器并访问 http://localhost:3000，你将看到使用 EJS 渲染的页面。

5. 注意事项

性能优化：对于高流量网站，考虑使用缓存机制（如 Redis）来缓存生成的 HTML，减少服务器负担。
错误处理：确保在服务器中添加错误处理机制，以便在渲染过程中出现问题时能够优雅地处理。
安全性：注意防止 XSS 攻击，确保用户输入的数据经过适当的转义。

6. 总结

服务器端渲染（SSR）是构建现代 Web 应用的重要技术之一。通过使用 Node.js 和 Express，我们可以轻松实现 SSR，并利用模板引擎来管理 HTML 结构。尽管 SSR 有其优缺点，但在许多场景下，它仍然是一个非常有效的解决方案。希望本教程能帮助你更好地理解和实现服务器端渲染。