vue做ssr有什么影响 • Worktile社区

worktile

Worktile官方账号

Vue.js 是一个用于构建用户界面的渐进式框架，其支持服务端渲染（Server Side Rendering, SSR）的特性为开发者提供了更多的灵活性和性能优化的机会。下面将介绍在使用 Vue.js 进行 SSR 时可能会带来的影响。

性能优化：
使用 SSR 可以提高页面加载性能和搜索引擎优化（SEO）效果。通过在服务端渲染组件，可以减少客户端加载所需的初始页面HTML，并将初始渲染结果直接输出给浏览器，减少页面展示时间。这对于提高首次加载速度非常有帮助。同时，搜索引擎的爬虫可以更好地识别和索引服务器渲染的页面，对于网站的SEO效果也是有益的。
开发工具限制：
SSR 对于前端开发者来说可能需要掌握额外的知识和技能。需要了解服务器端的相关知识，熟悉服务端的渲染逻辑和相关框架，以及处理服务端和客户端之间的数据传递和同步。这对于开发者来说可能有一定的学习曲线。
构建复杂度：
SSR 的实现会增加项目的复杂性。需要考虑到服务端与客户端之间的同步问题，确保页面在服务器端和客户端的行为一致，同时还需要处理好异步数据的加载和渲染问题。这可能需要额外的逻辑和代码来处理，增加了开发和维护的难度。
不适合所有场景：
SSR 并不适用于所有的项目和场景。对于简单的页面或者不需要考虑 SEO 的应用，使用传统的客户端渲染可能更加简单和高效。而对于复杂的、需要考虑SEO和性能优化的应用，SSR则是一个很好的选择。

综上所述，使用 Vue.js 进行 SSR 可以提高页面加载性能和SEO效果，同时需要掌握额外的技能和处理复杂度，在选择使用SSR时需根据具体的项目需求和情况进行考虑。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue.js是一个用于构建用户界面的渐进式JavaScript框架，它提供了许多强大且易于使用的功能。其中一个功能是服务器端渲染（Server-Side Rendering, SSR），它可以将Vue组件在服务器端进行预渲染，然后将已渲染的页面直接发送给浏览器。在使用Vue.js进行SSR时，会有一些影响和注意事项，以下是其中的五点：

初始加载时间更快：由于服务器端渲染将页面预先渲染为HTML，并将其发送给浏览器，因此初始加载时间会更快。这是因为浏览器不需要等待JavaScript下载和解析完成后再进行页面渲染。
更好的SEO：由于服务器端渲染生成了完整的HTML页面，搜索引擎可以直接读取页面内容，无需等待JavaScript渲染后再进行抓取。这对于SEO优化非常有利。
更好的用户体验：在使用Vue.js进行SSR时，页面的交互和渲染都在服务器端进行，因此用户可以更快地看到内容，提升了用户体验。
适用于旧版浏览器：由于服务器端渲染生成的页面是完全运行在服务器上的，因此对于一些旧版的浏览器来说，不需要使用新的JavaScript特性或API，可以更好地兼容旧版浏览器。
构建和部署的复杂度增加：使用Vue.js进行SSR需要对服务器进行配置，并且需要额外的部署步骤。这增加了项目构建和部署的复杂度。此外，由于页面渲染在服务器端进行，服务器的资源压力也会增加。因此，需要在服务器方面做一些优化和配置，以确保性能和稳定性。

总之，Vue.js的SSR带来了许多好处，包括更快的初始加载时间、更好的SEO、更好的用户体验和更好的浏览器兼容性。但需要注意的是，SSR也会增加构建和部署的复杂度，并增加服务器的资源压力。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

一、什么是Vue的SSR？
Vue的SSR（Server-Side Rendering，服务端渲染）是指将Vue应用程序的初始渲染过程从客户端移动到服务器上执行，然后将已完成的HTML返回给浏览器。这种方式使得服务器可以生成完整页面的HTML，并将其发送到浏览器，浏览器只需要进行少量的客户端渲染来激活Vue应用程序，以便进行交互和动态更新。

二、为什么要使用Vue的SSR？

更好的SEO：由于搜索引擎爬虫在检索网页时只会获取并执行HTML代码，传统的SPA（Single Page Application，单页应用）无法被搜索引擎有效爬取到内容，而SSR能够将完整的HTML返回给爬虫，从而提升SEO效果。
更好的首屏加载性能：SPA需要在浏览器中进行异步加载和渲染，而SSR通过在服务器端渲染，将初始的HTML直接返回给浏览器，大大减少了首屏加载时间，提升用户体验。
更好的用户体验：SSR在初次渲染时能够直接展示完整的页面内容，无需等待JS文件下载和执行，可以在低网速或弱网络环境下更快地展示页面。

三、Vue的SSR对开发者有什么影响？

构建Server端和Client端代码：SSR需要开发者编写服务器端的代码来处理请求和渲染页面，并且需要将原本的SPA改造为SSR的应用。因此，开发者需要同时熟悉前端和后端开发技术。
路由管理：在SSR中，需要解决前端路由和后端路由的一致性问题，确保用户在切换页面时能够正确获取对应的数据和渲染页面。
数据预取：为了避免在客户端渲染过程中重复请求数据，需要提前预取数据，并在服务器端将其附加到渲染的HTML中。这就需要开发者把数据获取的方式和组件的生命周期进行合理的管理。

四、Vue的SSR的操作流程是怎样的？

创建一个Vue项目，并安装依赖：

$ vue create project
$ cd project
$ npm install vue-server-renderer

创建一个服务端入口文件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: {
      url: req.url
    },
    template: `<div>Hello World</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

server.listen(8080)

创建一个客户端入口文件client.js：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

在public/index.html中添加一个空的<div>，用于客户端渲染的挂载点：

<!DOCTYPE html>
<html>
<head>
  <title>Vue SSR</title>
</head>
<body>
  <div id="app"></div>
  <!--vue-ssr-outlet-->
</body>
</html>

在package.json中添加前端和后端构建命令：

"scripts": {
  "build:client": "vue-cli-service build --target client",
  "build:server": "vue-cli-service build --target server",
  "build": "npm run build:client && npm run build:server"
}

运行以下命令，构建前端和后端代码：

$ npm run build:client
$ npm run build:server

运行以下命令，启动服务端渲染：

$ node server.js

通过以上操作，就能够启动一个基本的Vue SSR应用，将服务端渲染的HTML页面返回给浏览器。

五、总结
Vue的SSR可以提供更好的SEO和首屏加载性能，对开发者来说需要同时掌握前端和后端的技术，进行代码构建和解决路由管理和数据预取等问题。通过创建一个服务端入口文件和客户端入口文件，并使用vue-server-renderer进行渲染，可以实现Vue的SSR应用。

2年前 0条评论