对vue服务端渲染的理解以及其使用场景
理解
- 本质上，服务端渲染其实是生成了应用程序的“快照”，将vue及其对应的库运行在服务端，令其去访问接口去预加载数据，然后将获取到的数据作为组件的初始状态
- 首先拉取数据，此后，组件的
beforeCreate和created生命周期会在服务端调用，初始化完成后将生成的html字符串交由客户端浏览器托管，继续进行挂载，从而实现前后端同构
优点
- 由于搜索引擎爬虫抓取工具可以直接查看到已经完全渲染了的页面，所以可以达到更好的 SEO
- 可以具备更快的首屏内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备比如弱网络下的移动端来说极为友好
缺点
- 复杂度较高，浏览器特定的代码，只能在某些生命周期钩子函数中使用，一些外部扩展库可能需要特殊处理，才能在服务器渲染应用程序中运行
- 性能方面有较大问题，每一个请求都对应着多个新的实例的创建，就导致了对服务端资源的占用较大
- 解决方案1 多级别缓存
- node server ：通过协商的用户过期期限，去判断是否重新渲染页面
- nginx：通过标记等判断页面是否过期，从而决定是否让node server重新渲染页面
- 解决方案2 降级
- 当服务器的cpu、内存等达到某一界线时，可以直接变成spa版本而不是服务端渲染
- 解决方案1 多级别缓存
- 与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于 Node.js server 运行环境
场景
- seo
- 在只是企业官网或者只有几个页面需要做seo这种情况下，可以用预渲染pre-render来对这几个页面做单独的处理，也就达到了seo的目的
- 已经存在的项目，想要去修改服务端渲染有点不大可行，可以通过User Agent 判断请求来源，如果是搜索引擎的爬虫利用爬虫工具如Puppeteer去获取spa生成html返回给客户端，做一个模拟的服务端渲染，如果是正常用户就还是通过spa的方式
- 全新项目可以运用更加完善的工具框架去实现服务端渲染，如nuxt.js去搭建项目完成项目
对vue服务端渲染的理解以及其使用场景相关推荐
- vue服务端渲染之nuxtjs
前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
- vue服务端渲染 MySQL_vue服务端渲染简单入门实例
想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...
- java vue 服务端渲染_vue ssr服务端渲染小白解惑
vue ssr服务端渲染小白解惑 >初学ssr入坑 初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...
- 手把手教你 Vue 服务端渲染
写在前面 在写这篇文章之前,我有写一篇 Vue 预渲染的教程 以及 在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
- Vue 服务端渲染（SSR）、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
- egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
- Vue 服务端渲染 预渲染
文章目录 简介 那么 什么是服务端渲染 为什么使用服务端渲染 服务端渲染 or 预渲染 区别 如何使用预渲染 如何搭建一个预渲染开发环境 Tip 写在最后 简介 关于 Vue 的 SPA 说的已经太多 ...
- vue服务端渲染——基础
文章目录 vue服务端渲染(基础) Nuxt框架 文件目录结构 项目启动.打包 生命周期 SSR nuxtserverInit middleware 中间件 全局中间件 页面级中间件 validate ...
- java vue 服务端渲染_vue服务端渲染缓存应用详解
服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲 ...
最新文章
- Android：控件WebView显示网页
- oracle 递归查询
- crontab命令使用文档.txt
- gridcontrol 验证错误_值得品读的人生感悟句子，生气，是拿别人的错误惩罚自己...
- 十、Go协程的调度，互斥锁，计数器和线程池
- c command语言学例子,语言学第四章
- eureka-7-多网卡下的ip选择
- [css] 说说你对低版本IE的盒子模型的理解
- navicat 批量插入 测试数据
- 如何才能打造一个良好的Java功底，提高自己的核心竞争力？
- 51单片机蜂鸣器实现歌曲《起风了》代码
- slice_input_producer在2.0版本里怎么用_EPrime2.0安装避坑指南
- 九九乘法表php4种,PHP九九乘法表
- 影响科学圈的那些计算机代码
- 美国卡尔顿学院计算机专业怎么样,如何获得美国名校卡尔顿学院录取?
- 锐捷交换机密码恢复操作
- security整合oauth2（jwt非对称加密）：For MAC signing you do not need to specify the verifier key separately...
- oracle 归档日志 重做日志,Oracle的重做日志和归档日志
- 2020年中国各省GDP简析
- 刚刚通过绿色通道拿到蚂蚁金服offer来和大家分享一下面试经验