服务器端渲染（SSR）与客户端渲染（CSR）在 Node.js 中的比较

JJCTO袁龙

于 2024-08-16 15:20:02 发布

阅读量296

点赞数 17

分类专栏： Node.js 文章标签： node.js 服务器运维

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141260772

版权

Node.js 专栏收录该内容

125 篇文章 3 订阅

订阅专栏

服务器端渲染（SSR）与客户端渲染（CSR）在 Node.js 中的比较

随着现代网页应用的快速发展，前端开发的技术也在不断演变。性能和用户体验成为了开发者越来越关注的两大核心目标。在众多实现方式中，服务器端渲染（SSR）和客户端渲染（CSR）是最为常见的两种模式。而在 Node.js 这一强大的后端框架中，这两种渲染方式各自发挥着重要的作用。本文将对 SSR 和 CSR 在 Node.js 中的区别与应用进行详细的比较，旨在帮助开发者选择最适合自己项目的技术实现方案。

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

服务器端渲染（SSR）是指在服务器上生成网站的完整 HTML 页面的过程。在用户请求页面时，服务器会快速生成 HTML 内容，然后直接将其返回给浏览器。这意味着在用户的浏览器中，页面在初次访问时就会被完整渲染。SSR 的主要优点包括：

更快的首屏加载时间：由于返回的是完全渲染的 HTML，用户可以迅速看到页面内容。
更好的 SEO：搜索引擎能够更容易抓取服务器渲染的内容，这对于需要 SEO 优化的网站尤为重要。
更好的用户体验：由于内容迅速显示，用户会有更好的使用体验，而不必等待 JavaScript 加载和执行。

SSR 示例代码

下面是一个简单的 Node.js 服务器端渲染的示例，使用 Express.js 和 EJS 模板引擎。

// 引入所需模块
const express = require('express');
const path = require('path');
const app = express();

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

// 定义一个路由
app.get('/', (req, res) => {
    const data = { title: 'Welcome to SSR with Node.js', message: 'SSR provides fast initial load!' };
    res.render('index', data); // 渲染 EJS 模板
});

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

在 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>

2. 什么是客户端渲染（CSR）？

与 SSR 相对，客户端渲染（CSR）是将 HTML、CSS、JavaScript 文件发送到客户端（浏览器），然后由浏览器使用 JavaScript 动态生成页面内容的过程。用户首次请求时，浏览器接收到的是一个空的 HTML 框架，随后通过 JavaScript 文件请求页面内容。这种方式的主要优点包括：

更好的用户交互：CSR 可以提供更流畅的用户体验，用户在页面中完成操作时，应用程序可以快速更新，而不需要重新加载整个页面。
减少服务器负担：由于大部分的渲染工作由客户端完成，服务器的负载相对较低。

CSR 示例代码

下面是一个简单的客户端渲染的 Node.js 示例，使用 Express.js 和 Vue.js。

const express = require('express');
const path = require('path');
const app = express();

// 提供静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 定义一个路由
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
});

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

在 public/index.html 文件中，可以使用 Vue.js 来渲染内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client-Side Rendering with Vue.js</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'CSR provides a dynamic user experience!'
            }
        });
    </script>
</body>
</html>

3. SSR 与 CSR 的比较

3.1 性能

SSR 优势：SSR 在首屏渲染时表现更佳，能快速将内容传递给用户，尤其对于内容丰富的网站尤为重要。
CSR 优势：CSR 可以在用户后续操作中实现更快的响应，减少了页面重载的时间，更适合单页面应用（SPA）。

3.2 SEO

SSR 优势：SSR 更加友好于搜索引擎抓取，尤其是当网站需要频繁更新内容时，SSR 提供的完整 HTML 有助于提高搜索引擎排名。
CSR 劣势：CSR 可能会让搜索引擎取变得困难，因为它依赖 JavaScript 来生成功能和内容。

3.3 开发复杂性

SSR 劣势：SSR 的开发通常较为复杂，需要处理请求/响应的周期，且调试相对困难。
CSR 优势：CSR 的开发模式通常更直观，更多的选择在客户端代码中解决问题，调试及原型构建较为简单。

3.4 适用场景

使用 SSR 的场景：需要良好 SEO 的内容集中型网站，如博客、新闻网站，社交媒体等。
使用 CSR 的场景：需要高交互性能的应用，如社交网络、在线商店等动态内容网站。

4. 结论

在 Node.js 环境中选择服务器端渲染（SSR）还是客户端渲染（CSR），取决于具体的项目需求和预期的用户体验。SSR 提供了快速的初始加载和更好的 SEO，而 CSR 则带来了流畅的用户体验和更具交互性的操作。理解这两者的优缺点，将有助于开发者在构建现代 web 应用时做出明智的选择。

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

在这里插入图片描述

JJCTO袁龙

关注

17
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
服务器端渲染（SSR）与客户端渲染（CSR）在 Node.js 中的比较

服务器端渲染（SSR）是指在服务器上生成网站的完整 HTML 页面的过程。在用户请求页面时，服务器会快速生成 HTML 内容，然后直接将其返回给浏览器。这意味着在用户的浏览器中，页面在初次访问时就会被完整渲染。更快的首屏加载时间：由于返回的是完全渲染的 HTML，用户可以迅速看到页面内容。更好的 SEO：搜索引擎能够更容易抓取服务器渲染的内容，这对于需要 SEO 优化的网站尤为重要。更好的用户体验：由于内容迅速显示，用户会有更好的使用体验，而不必等待 JavaScript 加载和执行。
复制链接

扫一扫