SSR是什么？Vue中怎么实现？

最新推荐文章于 2024-09-28 15:33:59 发布

He_wc

最新推荐文章于 2024-09-28 15:33:59 发布

阅读量2.9k

点赞数 25

分类专栏： Vue 学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/he_9a9/article/details/134728495

版权

Vue 学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一、是什么

概念

SSR是指服务器端渲染（Server-Side Rendering），是一种将客户端和服务器端合并的 Web 应用程序渲染技术。在 SSR 中，应用程序的 UI 在服务器端渲染完成后，再将整个渲染好的 HTML、CSS 和 JavaScript 发送到客户端。

发展史

传统的服务器端渲染：在 Web 发展的早期阶段，大部分网站都采用传统的服务器端渲染方式。每次用户请求页面时，服务器会动态生成 HTML，并将其发送给客户端。这种方式的优点是对搜索引擎友好，但在交互性方面存在局限。
出现 AJAX 技术：随着 AJAX 技术的兴起，前端开始使用 JavaScript 在客户端动态加载数据并更新页面内容，这种方式被称为客户端渲染（CSR，Client-Side Rendering）。这种方式提高了网页的交互性，但对搜索引擎不友好，因为页面内容大部分是通过 JavaScript 动态生成的。
现代的SSR应用：随着单页面应用程序（SPA）的兴起，开发人员开始寻求既能实现较好的交互性，又能保持良好的 SEO 的解决方案。这时，SSR 技术逐渐成为了一个热门的话题，许多框架和库开始提供支持服务器端渲染的能力，比如 React、Vue 等。通过 SSR，开发人员可以在服务器端预渲染页面内容，同时在客户端继续使用 SPA 架构来实现交互性。
渐进式增强：随着 SSR 技术的不断发展，渐进式增强也成为了一个重要的思想。开发人员可以根据设备和浏览器的能力，动态地选择使用 SSR 或 CSR，以提供更好的用户体验。

总的来说，SSR 技术经历了从传统的服务器端渲染到客户端渲染再到现代的 SSR 应用的发展过程，为构建具有良好交互性和搜索引擎友好的 Web 应用提供了重要的技术支持。

结论

Vue SSR是一个在SPA上进行改良的服务端渲染
通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA

二、主要作用

SSR（服务器端渲染）在Web开发中具有以下几个重要作用：

SEO优化：搜索引擎爬虫能够识别和索引静态HTML页面，而对于客户端渲染（CSR）的页面，由于大部分内容是通过JavaScript动态生成的，搜索引擎可能无法正确解析和索引页面内容。通过使用SSR，可以在服务器端预先渲染完整的HTML页面，使其对搜索引擎友好，提高网站的搜索引擎优化效果。
首屏加载速度优化：传统的CSR方式需要先下载HTML、CSS和JavaScript文件，然后在浏览器中执行JavaScript来生成并渲染页面内容，这会导致首屏加载时间较长。而SSR将页面的渲染过程提前到服务器端完成，客户端只需接收渲染好的HTML页面，从而加快了首屏加载速度，提供更好的用户体验。
改善用户体验：由于SSR可以在服务器端渲染页面，所以在向客户端返回HTML前，可以提供完整和可交互的初始页面内容。这意味着用户可以更快地看到页面的基本结构和内容，并与页面进行交互，而不需要等待JavaScript的加载和执行。
更好的性能和可伸缩性：在负载较大的情况下，使用SSR可以减轻客户端的工作负担。由于服务器负责渲染页面，客户端只需负责处理用户交互和展示数据，减少了客户端的计算和渲染压力，提高了性能和可伸缩性。

需要注意的是，SSR并不适用于所有情况。在一些复杂的应用场景中，可能仍然需要使用客户端渲染（CSR）或混合渲染的方式来满足特定的需求。选择何种渲染方式需要根据具体情况进行权衡和决策。

优点

更好的 SEO：由于搜索引擎爬虫只能识别静态 HTML，而不支持 JavaScript 渲染的内容，因此 SSR 可以使站点更容易被搜索引擎检索。
更快的首屏加载速度：由于 SSR 在服务器端进行渲染，可以提前生成完整的 HTML 页面，从而避免了客户端还要等待 JavaScript 加载和渲染的时间。
更好的用户体验：由于 SSR 可以在服务器端预先渲染页面，因此可以在客户端实现更好的页面初始展示效果，从而提高用户体验。

缺点

服务器压力增加：相比于客户端渲染（CSR），SSR需要在服务器端进行页面渲染和处理，这会增加服务器的负载。如果网站流量较大或并发请求较多，服务器可能需要投入更多的资源来处理请求，从而增加成本和管理难度。
服务器渲染时间延长：由于SSR需要在服务器端进行页面渲染，因此生成完整的HTML页面可能需要更多的时间。这可能会导致对于某些复杂页面或大量请求的情况下，响应时间变长，影响用户体验。
复杂性增加：SSR涉及到服务器端和客户端之间的交互，需要确保两者之间的数据同步和一致性。这增加了开发和维护的复杂性，并可能需要更多的技术知识和工具支持。
JavaScript依赖限制：由于SSR在服务器端渲染页面，部分前端框架和库中依赖于浏览器环境的JavaScript功能在服务器端可能无法使用。这意味着在编写SSR应用程序时，需要考虑到这些限制，并可能需要对代码进行调整或选择其他解决方案。
网络传输量增加：相比于客户端渲染，SSR需要将完整的HTML页面发送给客户端，而不仅仅是一部分内容和JavaScript。这导致网络传输量增加，尤其是对于移动设备和网络连接较慢的用户来说，可能会导致加载时间延长。

虽然SSR存在这些缺点，但在许多情况下，通过权衡利弊并根据具体需求进行选择，可以最大程度地发挥SSR的优势，并提供更好的用户体验和性能。

三、Vue实现

在Vue中实现服务器端渲染（SSR）通常涉及以下步骤：

安装依赖：首先需要安装一些必要的依赖，包括vue、vue-server-renderer等。
创建服务器入口：创建一个服务器入口文件，通常命名为app.js或server.js。在该文件中，需要创建一个Express或Koa服务器，并配置路由、静态文件服务等。
创建Vue实例：在服务器入口文件中，创建一个Vue实例，并通过Vue的工厂函数（createApp）创建应用程序实例。
创建路由和数据预取：定义应用程序的路由和组件，并在路由对应的组件中实现数据的预取逻辑。数据的预取可以通过调用组件内的特定方法或钩子函数来实现，例如在组件内部定义一个名为asyncData的方法，在该方法中获取组件所需的数据。
创建模板：创建一个HTML模板文件，该模板将用于在服务器端渲染时注入Vue实例的内容。通常使用基本的HTML结构，并在模板中添加一个标记，用于注入Vue实例生成的HTML内容。
服务器端渲染：在服务器入口文件中，根据用户请求的URL路径，使用Vue的服务器端渲染函数（renderToString）将Vue实例渲染为字符串，并将其插入到HTML模板中。然后将完整的HTML页面作为响应发送给客户端。
客户端激活：在客户端，需要对服务器端渲染的内容进行激活，以便Vue能够接管页面并添加交互性。这通常涉及在客户端入口文件中创建Vue实例，并将服务器端渲染的内容替换为客户端渲染的内容。

总的来说，实现Vue的服务器端渲染需要对服务器端和客户端代码进行适当的组织和配置，同时也需要考虑到数据预取、路由管理、模板注入等方面的处理。Vue官方文档中也提供了详细的服务器端渲染指南，可以供开发者参考和学习。

下面是一个简单的示例，演示如何在Vue中实现服务器端渲染（SSR）：

安装依赖：

npm install vue vue-server-renderer express

创建服务器入口文件 app.js：

const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const app = express();

// 创建Vue实例
const Vue = require('vue');
const appInstance = new Vue({
  template: `<div>Hello SSR!</div>`
});

// 创建渲染器
const renderer = createRenderer();

// 处理请求
app.get('/', (req, res) => {
  // 使用渲染器将Vue实例渲染为HTML字符串
  renderer.renderToString(appInstance, (err, html) => {
    if (err) {
      console.error(err);
      res.status(500).end('Server Error');
    } else {
      // 发送渲染后的HTML给客户端
      res.send(`
        <!DOCTYPE html>
        <html>
          <head><title>SSR Demo</title></head>
          <body>${html}</body>
        </html>
      `);
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在命令行中运行启动服务器：

node app.js

访问 http://localhost:3000 可以看到服务器端渲染的结果。

在这个简单的示例中，我们创建了一个服务器入口文件 app.js，使用Express创建了一个简单的服务器，并定义了一个根路由处理函数。在处理函数中，我们创建了一个Vue实例，并通过渲染器将其渲染为HTML字符串。然后将渲染后的HTML作为响应发送给客户端。

需要注意的是，这只是一个简单的示例，实际的服务器端渲染可能涉及到更复杂的路由管理、数据预取、状态管理等。开发者可以根据具体需求和项目架构进行相应的扩展和优化。

小小结论

使用ssr不存在单例模式，每次用户请求都会创建一个新的Vue实例
实现ssr需要实现服务端首屏渲染和客户端激活
服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取
- 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
- 切换组件通过mixin混入，在beforeMount钩子完成数据获取