vue SSR 服务端渲染记录

villainhr 发布于2019-08-21 17:55 / 3312人阅读

摘要：前几天了解了下服务端渲染的流程，记录下。现在我们的服务器与应用程序已经解耦处理异常服务端渲染一些坑对象找不到，由于前端使用的，在环境不存在数据预获取时，组件尚未实例化无法使用，数据请求及格式化等操作都应该放置在处理

前几天了解了下vue 服务端渲染的流程，记录下。首先，什么是ssr(服务端渲染 Server Side Rendering)，为什么需要？

服务端渲染是什么

前后端分离之后，页面加载的流程是，前端异步请求拿到数据渲染页面。服务端渲染就是在后端把数据取好，拼好页面的DOM树发给前端，到浏览器解析渲染。有没有想到前后端分离之前，由后端把数据塞进模版，前端负责显示的过去。（有没有种天下之势，合久必分，分久必合的感慨哈哈哈哈哈)

服务端渲染优点

页面的SEO, 异步拿数据显示对爬虫不友好

首屏渲染速度快，更好的用户体验

服务端渲染原理

接下来，介绍下vue 服务端实现原理及流程。

SSR 有两个入口文件client-entry，server-entry , webpack打包之后，生成 server-bundle, client-bundle

服务器收到浏览器的请求，创建一个bundleRenderer,读取1生成的server-bundle，执行代码（具体做了什么后面会讲到），生成html发送到前端

把第二步生成的html跟前端的client-bundle进行混合（hydrate），混合时判断client-bundle 的DOM节点跟服务端返回的html里DOM节点是否相同，是的话挂载（vue中的$mount）到这个节点上，页面渲染完毕

用白话形容，服务端获取页面所需的数据之后，拼出html，把html转成string发送到前端，前端把html插入到指定节点，渲染页面，OK了。

服务端数据预取

看看官网的demo,服务端怎么做的服务端数据预取。

// entry-server.js
import { createApp } from "./app"
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    router.push(context.url)
     // 等到 router 将可能的异步组件和钩子函数解析完
    router.onReady(() => {
      //获取相匹配的组件
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      // 对所有匹配的路由组件调用 `asyncData()`
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        // 在所有预取钩子(preFetch hook) resolve 后，
        // 我们的 store 现在已经填充入渲染应用程序所需的状态。
        // 当我们将状态附加到上下文，
        // 并且 `template` 选项用于 renderer 时，
        // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

根据router拿出相匹配的组件，客户端定义asyncData（数据预取函数，拿数据），服务端asyncData，获取数据

把源数据和状态写进store（数据和状态存储容器，store独立于业务组件，详情可查看Vuex），避免客户端和服务端状态不对等。状态写进window.__INITIAL_STATE__格式，客户端可拿到

bundleRenderder

html渲染好之后，转成string发到客户端，客户端插入到对应DOM节点下就可以啦～

const { createBundleRenderer } = require("vue-server-renderer")
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推荐
  template, // （可选）页面模板
  clientManifest // （可选）客户端构建 manifest
})
// 在服务器处理函数中……
server.get("*", (req, res) => {
  const context = { url: req.url }
  // 这里无需传入一个应用程序，因为在执行 bundle 时已经自动创建过。
  // 现在我们的服务器与应用程序已经解耦！
  renderer.renderToString(context, (err, html) => {
    // 处理异常……
    res.end(html)
  })
}

服务端渲染一些坑

document 对象找不到，由于前端使用的 window，在 node 环境不存在

数据预获取时，组件尚未实例化（无法使用 this ），数据请求及格式化等操作都应该放置在store处理

海外云主机服务器托管 vue条件渲染服务端渲染网页端webrtc视频渲染网页端3d云渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90200.html

手把手教你搭建SSR(vue/vue-cli + express)

摘要：最近简单的研究了一下，对已经有了一个简单的认知，主要应用于单页面应用，是很不错的框架。创建好之后，在命令行直接输入即可，当控制台显示服务已启动则表示该服务已经启动成功了。配置参数中有一项为这项配置的就是我们即将使用的模板。最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是...

liangdas 2019-08-23 18:05 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0
理解vue ssr原理，自己搭建简单的ssr框架

摘要：前言大多数项目要支持应该是为了考虑，毕竟对于应用来说，搜索引擎是一个很大的流量入口。引入是一个构建客户端应用的框架，即组件是在浏览器中进行渲染的。由于服务端渲染要用做中间层，所以部署项目时，需要处于运行环境。前言大多数Vue项目要支持SSR应该是为了SEO考虑，毕竟对于WEB应用来说，搜索引擎是一个很大的流量入口。Vue SSR现在已经比较成熟了，但是如果是把一个SPA应用改造成S...

Riddler 2019-08-23 14:13 评论0 收藏0
从零开始搭建一个vue-ssr（上）

摘要：从零开始搭建一个背景是什么全拼是，服务端渲染。大家不妨可以打开一些页面或者一些公司的网站，查看源代码，你会发现，也是有这个标记。这时候，我们发现页面的路由切换生效了，并且不同页面的源代码也不一样了。从零开始搭建一个下项目源码从零开始搭建一个vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服务端渲染。所谓服务端渲染，指的是把...

Winer 2019-08-23 18:23 评论0 收藏0
Vue.js SSR 内容总结

摘要：本文只是对官方文档和对官方的个人学习总结，说得不够完整的请见谅本文主要对以下几方面内容对的内容进行分析总结出现的原因的总体原理当中的数据预取在编写代码时候的限制的构建原理出现的原因单页应用有一个很大的缺点就是问题，搜索引擎目前只能对同步的进本文只是对Vue.js官方SSR文档和对官方hackernews demo的个人学习总结，说得不够完整的请见谅本文主要对以下几方面内容对Vue....

曹金海 2019-08-23 18:25 评论0 收藏0