zoukankan      html  css  js  c++  java
  • vue中的ssr和前后端同步渲染

    1 ssr

    全称:server side render(服务器端渲染),可以在服务器端渲染应用程序。

    前端渲染问题:

    1 白屏时间长,影响用户体验。

    2 不利于搜索引擎优化( SEO )

    所以要在服务器端渲染应用程序

    1.1 服务器端渲染:

     vue为服务器端渲染提供了模块: vue-server-renderer,如没有请先下载:npm install vue-server-renderer

      该模块提供了createRenderer方法,来创建渲染器

       渲染器提供了renderToString方法,渲染应用程序组件

       渲染器实现了promise规范,因此:可以通过then方法监听成功,可以通过catch方法监听失败

    1.2 服务器端渲染模板

    想在模板中渲染应用程序分成两步:

      第一步:在createRenderer方法中,通过template引入模板文件

      第二步:在模板文件中,通过<!--vue-ssr-outlet-->定义应用程序渲染的位置。

          注意:在webpack4.x版本中,默认压缩删除注释,这将导致服务器端渲染模板不能用,

          解决办法:在html-webpack-plugin插件中的readme.md中,(365行)将代码复制到前端编译文件中

              (webpack.client.js),在plugins下,通过minify配置,将removeComments:true改为false

    例如:创建一个vue应用程序:

     在后端去引入vue应用程序,将模板内容渲染到页面上:

    在index.html文件中,通过<!--vue-ssr-outlet-->定义应用程序渲染的位置:

    浏览器端渲染:

      1 白屏时间长,影响用户体验,

      2 不利于SEO优化

    服务器端渲染:

      无法绑定交互

    为了解决浏览器端与服务器端渲染的问题,则要使用前后端同步渲染技术。

    2 前后端渲染环境

    前端渲染

    是为了给用户使用,因此希望资源加载的快(压缩,打包,添加指纹等等)

      为了更好的效果,要加载样式;为了看到页面,要处理模板等...

    但是服务器端渲染不需要考虑这些问题,只需要一个应用程序组件,并最终将其渲染成字符串。

    因此前后端渲染有不同的入口文件,有不同的webpack配置

    有不同的入口文件

      前端入口文件,要让应用程序组件上树;

      后端入口文件,只需要一个应用程序组件

    不同的webpack配置

    前端要考虑样式,模板,性能优化(压缩,打包,添加指纹等)等

    后端只要将ES Module规范,编译成CommonJS规范即可。

    2.1 目录部署

      模拟vue-cli的目录部署:

      config 存储配置文件

      home 前端开发的项目

        public 存放开发时模板文件

        src 开发目录

      views 模板发布的目录

      static 静态资源发布的目录

      app.js 服务器入口文件

    3 npm 指令

    由于webpack配置存储到特定位置,因此启动webpack指令很长

      webpack --config 文件位置

    为了简化webpack的运行,则可以配置一些npm指令,像vue cli一样运行:

      npm run client 运行前端配置

      npm run server 运行服务器端配置

      npm run start 同时运行前后端配置

      npm run start:client 监听并运行前端配置

      npm run start:server 监听并运行后端配置

    要在package.json中,配置scripts项,来定义指令

    4 服务器端渲染

      1 不需要模板,不用写html插件

      2 不需要样式,不用写style-laoder,不需要拆分样式

      3 不需要性能优化、拆分模块,添加指纹,服务器端本地引入文件,因此打包在一起就可以了等

      4 通过target: node配置,说明给node使用。

      5 在output.libraryTarget: commonjs2, 将ES Module规范转成commonjs规范

      6 使用vue-server-renderer插件,发布json文件(先引入vue-server-renderer和这个插件下的server-plugin文件)

        在参数对象中,通过filename属性,可以自定义json文件的发布位置。

     

    为了使用发布的json文件,vue-server-renderer提供了createBundleRenderer方法

      第一个参数表示json文件

      第二个参数表示配置对象

        template定义模板文件的位置

    插值语法:vue服务器端渲染允许在渲染页面的时候,向页面中,插入一些数据。

      在renderToString方法中传递数据。

      在模板中,通过插值语法插入数据

        {{}} 渲染文本插值

        {{{}}} 渲染标签插值

        例如之前简单的做SEO搜索引擎优化:

        可以在html文件中,添加字段  

        <meta name="keywords" content="这是网站的主要内容">
                  <meta name="description" content="这是一段描述信息">
      插值语法可以简化书写:
      在renderToString方法中传递这些数据:
      

      在html文件中使用插值语法渲染:

     

    5 路由同步

    路由同步就是说:前后端渲染的页面是一致的。

    如果使用hash路由,改变hash,不会向服务器端发送请求,因此服务器端不会更新页面,并且服务器端无法获取hash数据,无法解析hash数据。

    所以在前后端同步渲染的时候,只能使用history路由测试(多页面应用程序)。

    当使用history策略的时候,不同页面应该请求同一个路径下的静态文件,所以静态文件的路径应该是绝对路径

    注意:使用history策略,服务器端要做重定向

    5.1 前后端解析

    前端解析:

     前端有路由模块,是专门用来解析前端路由的。

    解析路由:

    可以使用路由模块解析路由,路由实例化对象提供了一些方法

      push 将一个新的地址加入到路由序列中。

      onReady 监听路由解析完毕

      getMatchedComponents 当前路由规则下,匹配的组件。

    后端解析:

     后端要在渲染页面的时候解析,所以要通过请求对象获取url地址

     再将url地址提交给vue-router模块创建的路由实例化对象去解析。

    为了将url信息传递给后端入口文件,分成两步:

      第一步:在renderToString方法中,传递数据

      第二步:将后端入口文件改成一个返回promise对象的方法

          方法的参数就是renderToString方法传递的数据

          在方法中,解析路由,并最终使用promise对象的resovle或者reject方法,返回处理结果。

    6 同步数据

    同步数据就是与页面一起返回的数据。

    由于是与页面一起返回的,因此可以在页面中直接使用这些数据,不必发送请求了。

    一些重要的,需要首屏渲染的内容,可以放在同步数据中。

    自己实现的代码:点我

  • 相关阅读:
    mybatis常用的配置解析
    shiro学习(一)
    三、maven学习-高级
    二、maven学习
    一、maven学习
    常用工具类
    三、redis学习(jedis连接池)
    一、redis学习(基础)
    校验用户名是否存在(ajax+jackson)
    Spring-简介-IOC理论推导
  • 原文地址:https://www.cnblogs.com/yess/p/14856196.html
Copyright © 2011-2022 走看看