发布于 由admin

探索Vue.js中的服务端渲染(SSR)与客户端渲染(CSR)

Vue.js中的服务端渲染(SSR)与客户端渲染(CSR)：一场轻松的技术讲座

开场白

大家好！欢迎来到今天的Vue.js技术讲座。今天我们要聊的是一个非常有趣的话题——服务端渲染（SSR）与客户端渲染（CSR）。如果你曾经在选择这两种渲染方式时感到困惑，或者只是想了解更多关于它们的细节，那么你来对地方了！

我们将会以一种轻松诙谐的方式，带你深入了解这两者的区别、优缺点，并通过一些代码示例帮助你更好地理解。准备好了吗？让我们开始吧！

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

首先，我们来聊聊大家都比较熟悉的客户端渲染（CSR）。简单来说，CSR就是浏览器从服务器获取HTML、CSS和JavaScript文件，然后由浏览器负责解析和渲染页面。Vue.js 默认使用的就是这种方式。

CSR的工作流程

  1. 请求页面：用户点击链接或输入URL，浏览器向服务器发送HTTP请求。
  2. 返回静态资源：服务器返回HTML、CSS和JavaScript文件。
  3. 解析和执行JS：浏览器加载并解析这些文件，执行JavaScript代码。
  4. 渲染页面：Vue.js 在浏览器中初始化应用，动态生成DOM元素，最终呈现给用户。

CSR的优点

  • 开发简单：CSR的实现相对简单，尤其是在使用Vue CLI等工具时，几乎不需要额外配置。
  • 性能优化灵活：你可以使用各种前端优化技术，如懒加载、代码分割等，来提升应用性能。
  • SEO友好性差：由于页面内容是由JavaScript动态生成的，搜索引擎爬虫可能无法正确抓取页面内容，影响SEO效果。

CSR的缺点

  • 首屏加载慢：由于需要先下载所有资源，再执行JavaScript，用户的首次加载时间可能会较长。
  • 用户体验不佳：在移动设备上，尤其是网络条件较差的情况下，用户可能会看到空白页面或闪烁现象。

CSR的典型场景

  • 单页应用（SPA）：如管理后台、仪表盘等，用户一旦进入应用后，大部分操作都在同一个页面内完成，不需要频繁刷新。
  • 交互性强的应用：如社交网络、在线游戏等，用户频繁与页面进行交互，CSR可以提供更好的响应速度。

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

接下来，我们来看看服务端渲染（SSR）。SSR的核心思想是：在服务器端直接生成完整的HTML页面，然后将其发送给浏览器。浏览器接收到的不再是空白的HTML和一堆JavaScript，而是一个已经渲染好的页面。

SSR的工作流程

  1. 请求页面：用户点击链接或输入URL，浏览器向服务器发送HTTP请求。
  2. 服务器渲染页面：服务器接收到请求后，使用Node.js等服务器端环境运行Vue.js应用，生成完整的HTML。
  3. 返回渲染后的页面：服务器将生成的HTML发送给浏览器。
  4. 客户端接管：浏览器接收到HTML后，继续加载JavaScript文件，Vue.js应用会在客户端接管页面，提供后续的交互功能。

SSR的优点

  • 首屏加载快：由于服务器已经生成了完整的HTML，用户可以立即看到页面内容，减少了等待时间。
  • SEO友好：搜索引擎爬虫可以直接抓取到完整的HTML内容，极大提升了SEO效果。
  • 用户体验更好：用户在页面加载时不会看到空白或闪烁，体验更加流畅。

SSR的缺点

  • 服务器压力大：每次请求都需要在服务器端渲染页面，增加了服务器的计算负担，尤其在高并发情况下。
  • 复杂度增加：相比CSR，SSR的实现更加复杂，涉及到服务器端的配置、状态管理等问题。
  • 不适合频繁更新的内容：如果页面内容频繁变化，SSR可能会导致不必要的服务器负载。

SSR的典型场景

  • 内容驱动型网站：如博客、新闻网站等，页面内容相对固定，SEO非常重要。
  • 电商网站：商品列表、详情页等页面需要快速加载，且SEO要求较高。
  • 多语言支持的网站：不同语言版本的页面可以通过SSR提前渲染，提升用户体验。

SSR vs CSR：如何选择？

现在我们已经了解了SSR和CSR的基本原理和优缺点，那么问题来了：到底该选择哪一种渲染方式呢？

为了帮助你做出决策，我们可以通过一个简单的表格来对比两者的适用场景：

特性 客户端渲染（CSR） 服务端渲染（SSR）
首屏加载速度 较慢，依赖于JavaScript执行 较快，服务器直接返回完整HTML
SEO友好性 差，依赖JavaScript生成内容 好，搜索引擎可以直接抓取HTML内容
用户体验 初次加载时可能有空白或闪烁 用户可以立即看到页面内容，体验更流畅
服务器负载 低，所有渲染工作在客户端完成 高，每次请求都需要服务器渲染页面
开发复杂度 简单，适合单页应用 复杂，涉及服务器端配置和状态管理
适合场景 交互性强的应用、SPA、管理后台 内容驱动型网站、电商网站、SEO要求高的项目

混合模式：同构应用

当然，Vue.js 还提供了另一种解决方案——同构应用。所谓同构应用，就是结合了SSR和CSR的优势，既可以在服务器端渲染页面，又可以在客户端接管后续的交互。这样，你既可以享受SSR带来的首屏加载优势，又不用担心服务器的压力。

Vue.js 提供了 vue-server-renderer 来实现同构应用。通过它，你可以在服务器端渲染页面，同时在客户端使用相同的Vue实例接管页面，确保无缝切换。

同构应用的工作流程

  1. 服务器端渲染：用户首次访问时，服务器端渲染页面并返回完整的HTML。
  2. 客户端接管：浏览器接收到HTML后，加载JavaScript文件，Vue.js应用在客户端接管页面。
  3. 后续路由切换：用户在应用内部导航时，使用CSR的方式进行页面切换，避免再次请求服务器。

实战演练：搭建一个简单的SSR应用

说了这么多理论，不如我们来动手实践一下吧！接下来，我们将使用 vue-cli 和 vue-server-renderer 来搭建一个简单的SSR应用。

1. 创建Vue项目

首先，我们需要创建一个新的Vue项目。打开终端，运行以下命令：

vue create my-ssr-app

选择默认配置即可。创建完成后，进入项目目录：

cd my-ssr-app

2. 安装SSR相关依赖

为了让我们的应用支持SSR，我们需要安装一些额外的依赖：

npm install vue-server-renderer express
  • vue-server-renderer 是Vue官方提供的服务器端渲染工具。
  • express 是一个轻量级的Node.js框架，用于处理HTTP请求。

3. 修改入口文件

在 src 目录下创建两个新的文件：entry-server.js 和 entry-client.js。这两个文件分别用于服务器端和客户端的渲染。

entry-server.js

import { createApp } from './main';

export default (context) => {
  return new Promise((resolve, reject) => {
    const app = createApp();

    // 渲染Vue应用为字符串
    const renderer = require('vue-server-renderer').createRenderer();
    renderer.renderToString(app, (err, html) => {
      if (err) {
        reject(err);
      }
      resolve(html);
    });
  });
};

entry-client.js

import { createApp } from './main';

const app = createApp();

app.$mount('#app');

4. 创建服务器

在项目的根目录下创建一个 server.js 文件，用于启动Node.js服务器：

const express = require('express');
const serverBundle = require('./dist/server/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/client/vue-ssr-client-manifest.json');
const { createBundleRenderer } = require('vue-server-renderer');

const server = express();
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./public/index.template.html', 'utf-8'),
  clientManifest,
});

server.get('*', (req, res) => {
  const context = { url: req.url };

  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error');
      return;
    }

    res.send(html);
  });
});

server.listen(8080, () => {
  console.log('Server is running at http://localhost:8080');
});

5. 构建项目

为了让SSR正常工作，我们需要构建项目的服务器端和客户端代码。在 package.json 中添加以下脚本：

"scripts": {
  "build:client": "vue-cli-service build",
  "build:server": "vue-cli-service build --target ssr src/entry-server.js",
  "build": "npm run build:client && npm run build:server",
  "serve": "node server.js"
}

6. 启动服务器

最后，运行以下命令来构建项目并启动服务器：

npm run build
npm run serve

现在，打开浏览器访问 http://localhost:8080，你应该会看到一个由服务器端渲染的页面。恭喜你，成功搭建了一个简单的SSR应用！

结语

好了，今天的讲座就到这里啦！我们详细探讨了Vue.js中的服务端渲染（SSR）和客户端渲染（CSR），并通过一个简单的实战项目展示了如何实现SSR。希望这篇文章能帮助你更好地理解这两种渲染方式，并在实际项目中做出合适的选择。

如果你有任何问题或想法，欢迎在评论区留言交流！下次见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注