zoukankan      html  css  js  c++  java
  • 基于Vue的SSR

    一、什么是ssr?

      - server side render 服务端渲染

      基于 Vue/React 单页面应用 实现的服务器端渲染

      1、传统的vue纯浏览器端渲染 - 浏览器端执行 js

            

    优点

    1、局部刷新,用户体验优

    2、富交互

    3、节约服务器成本

    缺点

    1、不利于Seo 爬取返回的html页面,搜索引擎只能收录静态页面,不执行js

    2、浏览器任务重,一直在执行js,内存占用高

    3、首屏加载问题,需要等js运行才能展示

      2、ssr - 执行 js,除了浏览器还有node

            

           怎么把vue实例用node渲染成html字符串?

           核心库:

              · vue

              · vue-server-renderer

            ssr需要哪些东西?

              

              · 纯浏览器渲染的入口有哪些?main.js

              · ssr 需要两个入口:客户端+服务端,生成的bundle也是两个

      

    二、自己手动搭建一个vue+ssr项目

      特性:

        1、每一次访问必须新建一个vue实例

        2、只会触发组件的 beforeCreate 和 created 钩子,所以需要客户端 js

       手动改造的源码见 :https://gitlab.com/pfSlight/vue-ssr-test.git 

    三、ssr框架Nuxt

      vue - Nuxt

      react - next

       1、创建项目: vue init nuxt-community/starter-template vue-ssr-nuxt

       2、查看创建的项目:https://gitlab.com/pfSlight/vue-ssr-nuxt.git

  • 相关阅读:
    js 控制页面跳转的5种方法
    弹性盒
    js中变量声明有var和没有var的区别
    解决Cannot read property 'style' of null中样式问题
    JS中用for循环解决重复定义的问题
    博客第一天
    jQuery 无缝轮播
    随鼠标移动
    倒计时
    轮播图
  • 原文地址:https://www.cnblogs.com/slightFly/p/15104861.html
Copyright © 2011-2022 走看看