「浏览器」服务端渲染

前言

服务端渲染（Server-Side Rendering，SSR）是一种常见于网页应用的技术，它指的是在服务器上将网页的内容生成，然后发送完整的HTML页面到客户端的浏览器的过程。这与传统的客户端渲染（Client-Side Rendering，CSR）相对，客户端渲染是在用户的浏览器上动态生成页面内容。

示例

EJS（Embedded JavaScript templating）是一个流行的模板引擎，它可以嵌入JavaScript代码到HTML页面中。它通过特定的模板标签让你能够将服务器端的数据插入到HTML页面中。这个过程通常用于服务端渲染（SSR）中，以动态地创建HTML页面，这些页面包含了来自服务器端的数据和逻辑。

下面是一个基于Node.js和EJS实现的简单服务端渲染的代码示例：

首先，你需要安装 ejs 和 express：

bash 复制代码

npm install express ejs

然后，你可以创建一个基础的Express服务器并使用EJS作为模板引擎：

javascript 复制代码

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文件，它可以是像这样的：

html 复制代码

<!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等框架支持的通用（同构）渲染，以提供最佳的用户体验和性能。这种方式可以让应用的首屏直接由服务端渲染并提供给客户端，而后续的页面交互则由客户端接管，从而结合两种渲染方式的优势。