Vue服务器端渲染（SSR）是不是技术的倒退？

贝格前端工场

于 2024-01-26 10:31:46 发布

阅读量154

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57344393/article/details/135860334

版权

一、什么是服务器端渲染，是不是技术退步？

Vue服务器端渲染（Vue Server-Side Rendering，简称SSR）是一种将Vue组件在服务器端进行渲染，生成最终的HTML页面，然后将其发送给客户端的技术。

传统的Vue应用是在客户端进行渲染的，即在浏览器中下载Vue应用的JavaScript文件，然后在客户端进行解析和渲染。而SSR则是在服务器端生成完整的HTML页面，并将其发送给客户端，客户端接收到的是已经渲染好的HTML内容，无需再进行解析和渲染。

Vue服务器端渲染（SSR）并不是技术的倒退，它是一种在某些场景下更为适用的技术选择。

传统的Vue应用是在客户端进行渲染的，即在浏览器中下载Vue应用的JavaScript文件，然后在客户端进行解析和渲染。这种客户端渲染的方式在很多场景下是非常有效和合适的，尤其是对于复杂的交互和动态更新的应用。

然而，对于一些特定的场景，如对SEO友好性和首屏加载速度要求较高的项目，传统的客户端渲染可能存在一些限制。在这些场景下，使用服务器端渲染可以提供更好的SEO和性能表现。

二、服务器端渲染的优势

SSR的优势在于：

更好的SEO：由于搜索引擎爬虫通常只会渲染和索引HTML内容，传统的客户端渲染的Vue应用在初始加载时只有一个空的HTML模板，搜索引擎难以获取到完整的内容。而SSR可以在服务器端将完整的HTML页面生成并发送给搜索引擎，有利于SEO。
更快的首屏加载速度：由于SSR在服务器端已经将页面渲染好，客户端只需要接收到已经渲染好的HTML内容，无需再进行解析和渲染，因此可以提供更快的首屏加载速度，提升用户体验。
更好的性能表现：由于SSR将一部分渲染工作放在了服务器端，减轻了客户端的渲染压力，可以提供更好的性能表现，尤其是对于低性能设备或网络状况较差的用户。

因此，SSR并不是技术的倒退，而是一种根据具体需求选择合适技术方案的权衡和取舍。在某些场景下，SSR可以提供更好的用户体验和性能表现，是一种有价值的技术选择。

三、vue如何进行服务端渲染设置

Vue提供了官方的服务器端渲染（SSR）解决方案，可以通过以下步骤来进行Vue的服务器端渲染：

安装依赖：在项目中安装vue和vue-server-renderer两个依赖包。

npm install vue vue-server-renderer

创建服务器入口文件：创建一个服务器入口文件，用于创建和配置服务器，并将Vue应用渲染为HTML。

// server.js

const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      message: 'Hello, Vue SSR!'
    },
    template: '<div>{{ message }}</div>'
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Vue SSR</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

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

在这个例子中，我们使用Express作为服务器，创建一个Vue实例并将其渲染为HTML字符串，然后将HTML字符串发送给客户端。

配置构建脚本：在package.json文件中添加构建脚本，用于构建Vue应用的客户端和服务器端代码。

{
  "scripts": {
    "build:client": "vue-cli-service build",
    "build:server": "vue-cli-service build --target server --dest server-bundle"
  }
}

这个例子中使用了Vue CLI提供的构建工具，分别构建了客户端和服务器端的代码。

构建客户端和服务器端代码：运行构建脚本，分别构建客户端和服务器端的代码。

npm run build:client
npm run build:server

这将生成客户端和服务器端的代码文件。

运行服务器：运行服务器入口文件，启动服务器。

node server.js

现在，你可以通过访问http://localhost:3000来查看服务器端渲染的Vue应用。

这只是一个简单的例子，实际的服务器端渲染可能涉及到更复杂的配置和处理，比如路由、数据获取等。你可以参考Vue官方提供的服务器端渲染指南（https://ssr.vuejs.org/）来了解更多详细的信息和实践。

贝格前端工场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue服务器端渲染（SSR）是不是技术的倒退？

Vue服务器端渲染（Vue Server-Side Rendering，简称SSR）是一种将Vue组件在服务器端进行渲染，生成最终的HTML页面，然后将其发送给客户端的技术。传统的Vue应用是在客户端进行渲染的，即在浏览器中下载Vue应用的JavaScript文件，然后在客户端进行解析和渲染。而SSR则是在服务器端生成完整的HTML页面，并将其发送给客户端，客户端接收到的是已经渲染好的HTML内容，无需再进行解析和渲染。
复制链接

扫一扫