Vue SSR服务端渲染 vue预渲染

前端开发进化史

了解SSR之前，需要知道最原始的服务器渲染、前后端一起开发。使用用一个服务器。原始的服务器渲染是整个web项目放入后端，提供路由访问。好处坏处也很多，举例：MVC模式。JavaWeb

原始服务渲染

优点：

安全性：因为整个项目都在后端同一个服务器里。通过后端控制层提供路由访问
首屏加载快：这样浏览器不会太大工作，只需要接受后端返回回来html渲染

缺点：
不方便协同开发：前后端开发困难，繁琐不方便，可能需要等待后端或者前端进度
前端代码量：前端还行需要自己编写模板语句。jstl，ejs等…
维护难：随着项目增大页面的控制维护成本也会越来越大
体验不足: 每次页面的切换需要重新请求在渲染

随着时代的变更。为了让开发更加高效，而且有更好的体验和维护成为。衍生出了前后端分离模式

意思就是：前端是一个单独模块单独服务器，后端也是单独模块单独服务器。两者之间通过跨域访问接口接口方式进行数据交互。大大提升了项目开发效率。比如较流行的 SPA单页面程序

SPA单页面浏览渲染

优点：

维护成本低：前端后端后只需要维护之间关注的功能。
协同开发：前端不需要等后端，后端也不需要等前端，个做个的事。
体验好：可以做到接近原生软件效果，因为始终都是一个页面。而且一次性把所以页面请求到了，后面页面只需要请求一次或者不请求，也能访问到

缺点：

SEO不友好：因为页面中只有一个div。比如vue：div id=“app”, 其他页面是通过js操作生成页面。而SEO是爬取html的。不回爬取js
首屏加载慢：由于更多加载及渲染工作都在浏览器端执行，比如：请求一个网站，浏览需要发出请求，获取到js，执行js获取到页面，在执行渲染页面，然后包括图片，css等。都需要大量和后端往返；
性能问题：由于更多加载及渲染工作都在浏览器端执行、单页面访问页面步骤：先执行js —> 生成DOM —》渲染DOM —》发出请求回来—》解析数据—》操作数据—》重新渲染

随着人们的需求升级，为了弥补缺点的不足。我们有推行了新模式 SSR服务端渲染 这个传统的MVC有一些相似，但具体又不同。他的出现解决了SPA单页面程序的问题，但是自身还有其他问题。看我们是怎么业务，在选择适合的方式。说说SSR缺点优点：

SSR服务端渲染

优点：

更好的SEO：由于搜索引擎爬虫抓取的工具可以直接查看完全渲染的页面
首屏加载快：浏览器工作量大大减少，部分工作交给后端渲染执行创建

缺点：

项目复杂度：由于需要做node中间处理，需要更多文件处理分服务，和浏览端文件
依赖性： SSR需要webpack做打包文件打包分离处理及node Server运行环境。条件成本
更多的服务器端负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源

SPA单页面程序和 SSR应用场景

单页适用场景：后台管理项目，大量路由项目，
SSR适用场景：官网，推广页

比如你一个仪表板项目。初始加载时间对你不是很重要，那么就不用考虑SSR，这需要你开发权衡。看你的项目内容需要展示的时间来判断
如何你项目中希望部分页面(登录页、介绍页)。有良好加载快又能SEO。那么推荐你使用 预渲染

预渲染什么？(https://ssr.vuejs.org/zh/#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-vs-%E9%A2%84%E6%B8%B2%E6%9F%93-ssr-vs-prerendering)

Vue中如何使用。推荐看着篇文章： Vue预渲染案例(https://juejin.im/post/59d49d976fb9a00a571d651d#heading-9)

Vue SSR服务端渲染 vue预渲染相关推荐

Vue SSR 服务端渲染原理（简易版本）
前言在了解Vue SSR之前,我们要搞明白两个东西先:SSR 和浏览器的渲染, 涉及到的技术: Vue vue-server-renderer Nodejs Express 1. 什么是SSR S ...
vue ssr 服务端跳转刷新踩坑
解决方法: 使用 a 标签href属性跳转能刷新当前页面的信息问题描述: 在ssr渲染期间,普通的this.$router.push的路由跳转不能刷新服务端的数据请求,服务端的数据跳转丢失出现原因 ...
java vue 服务端渲染_vue ssr服务端渲染小白解惑
vue ssr服务端渲染小白解惑 >初学ssr入坑初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...
Vuex 数据流管理及Vue.js 服务端渲染（SSR）
Vuex 数据流管理及Vue.js 服务端渲染(SSR)项目见:https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e- ...
使用Nuxt.js框架开发(SSR)服务端渲染项目
(SSR)服务端渲染的优缺点优点: 1.前端耗时少,首屏加载速度快.因为后端拼接完了html,浏览器只需要直接渲染出来. 2.有利于SEO.因为在后端有完整的html页面,所以爬虫更容易爬取获得信息 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
SSR服务端渲染（nuxt重构项目）
SSR服务端渲染(nuxt重构项目) 目的:优化SEO,提高网站权重 ,页面静态化,强化搜索引擎,提高首屏渲染速度参考文档:https://zh.nuxtjs.org/guide/installat ...
Nuxt SSR 服务端渲染详解
Nuxt SSR 服务端渲染详解 1.Nuxt项目构建 2.Nuxt的生命周期 2.1 nuxtServerInit 钩子 2.2 middleware 中间件 2.3 validate 数据校验 ...
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点: 有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面. 对于网络慢或运行慢的设备,可提 ...

Vue SSR服务端渲染 vue预渲染

前端开发进化史

SPA单页面程序和 SSR应用场景

Vue SSR服务端渲染 vue预渲染相关推荐

最新文章

热门文章