首页 > 其他分享 >Vue SSR

Vue SSR

时间:2023-06-13 15:56:10浏览次数:32  
标签:Vue 渲染 js html SSR 服务端 页面

1、概念

【SSR的本质就服务端返回渲染好的html文档】

vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成

服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染

2、优缺点

(1)优点

  • 更好的 SEO​

    • 在 SPA 中是抓取不到页面通过 Ajax 获取到的内容

    • SSR 是直接由服务端返回已经渲染好的页面

    • 【搜索引擎爬取工具可以抓取渲染好的页面】

  • 更快的内容到达时间(首屏加载更快)

    • SPA 会等待所有 Vue 编译后的 js 文件都下载完成后,才开始进行页面的渲染

    • SSR 直接由服务端渲染好页面直接返回显示,无需等待下载 js 文件及再去渲染

(2)缺点

  • 更多的开发条件限制

    • 服务端渲染应用程序,需要处于 Node.js server运行环境

  • 更多的服务器负载

    • 在 Node.js 中渲染完整的应用程序

    • 比仅仅提供静态文件的 server 更加大量占用CPU 资源

标签:Vue,渲染,js,html,SSR,服务端,页面
From: https://www.cnblogs.com/le-fang/p/17477763.html

相关文章

  • vue2 学习提纲
    手册慕课网-vue2手册:http://www.imooc.com/wiki/vuelesson/vueslot.html视频vue2.5入门https://www.imooc.com/learn/980echarts数据报表https://coding.imooc.com/learn/list/499.htmlVue+EChart4.0从0到1打造商业级数据报表项目vue2.6的版本2.快速入......
  • vue中watch监听
    1.对data中一般数据的监听,使用watch,回调有newValue和oldValue两个参数,当数据变化后触发watch:{/***data中数据的监听*@paramnewValue*@paramoldValue*/value:function(newValue,oldValue){alert('监听'+oldValue+'变为'+ne......
  • vue2.0中使用element-ui时报错
    1、重新安装依赖a)  yarnaddbabel-preset-es2015--devb)  npminstallbabel-preset-es2015-D2、修改babel.config.js配置module.exports={ presets:['@vue/cli-plugin-babel/preset',['@babel/preset-env',{modules:false}]], ......
  • Vue路由的基本概念
    Vue路由的基本概念Vue路由是一个非常重要的概念,它允许你在应用程序中创建多个页面并在这些页面之间进行导航。在Vue中,路由是通过VueRouter实现的。本文将介绍VueRouter的基本概念和用法,并对路由配置进行详细解析。基础认知/路由路由是指应用程序中的一个页面。在Vue......
  • vue 报错 !!vue-style-loader!css-loader?{“sourceMap“:true}!.
    npmrundev报错Thesedependencieswerenotfound:*!!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-858b20d4","scoped":true,......
  • 在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iter
    报错如下: 该怎么解决呢?现在说说解决他的两种方法:1.直接在v-for循环后面绑定一个属性,跟前面需要循环的属性一一对应,截图如下:  2.在vscode中去掉Eslint规则检查,具体操作截图如下:文件–》首选项–》设置–》在搜索框中输入:vetur.validation.template,找到之后将前面的打钩......
  • vue中v-model理解
    1.原理v-model是语法糖,相当于以下代码<inputv-model="value>/>等价于<input:value="value"v-on:input="this.value=$event.target.value"/>v-bind:value实现数据从data->组件input触摸事件实现数据从组件->datav-model在内部为不同的输入元素使用不同的属性并抛......
  • 直播软件app开发,vue里tab菜单横向展示,可分页功能组件实现
    直播软件app开发,vue里tab菜单横向展示,可分页功能组件实现子组件: <template><div>  <el-buttonv-if="move!=0&&!dataLen"size='small'icon="el-icon-arrow-left"@click="navPrev"></el-button>   <ulref......
  • 创建vue工程
    一、创建项目(1)elementui elementui就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。 网页链接:https://element.eleme.cn/#/zh-CN/component/installation ......
  • vue时间选择器 nut-datepicker
    vue时间选择器https://blog.csdn.net/Marshall_Ma/article/details/1242444511、年-月-日时:分效果展示:打开选择器:<divclass="label">记录日期:</div><nut-cell:showIcon="true":isLink="true"@click.native="switchPicker"......