服务端渲染Server side rendering
概念:什么是服务端渲染,什么是客户端渲染
相对于现在 前端开发的 前后分离模式,服务端渲染应该是更早时代的产物;
服务端渲染:在早期的时候,由于页面比较简单,前后端分离还没有做的比较完善,所以当时一般页面渲染还是在服务端完成html文件的拼装,然后浏览器接收到这个文件,就可以直接解析展示。
客户端渲染:如今前端页面的复杂性提高,前端已经不再仅仅是普通的页面展示了,现在前端页面功能更加完善,也更加复杂。同时伴随着ajax的兴起,使得现在越来越崇尚前后端分离的开发方式。后端不再提供完整的html页面,而是提供一些API使得前端可以获取需要的json数据,然后前端拿到数据后在前端完成html页面的拼装,然后展示在浏览器上,这就是客户端渲染。
如果你做过后端开发,写过模版引擎,其实这里说的服务端渲染其实就是 后端语言的模版引擎,比如java中的jsp,koa中koa-art-template
特性:服务端渲染和客户端渲染的区别
任何框架或开发形式的选型都应该适配特有的需求场景
1、首先先来了解三个专业名词:
(1)SPA:单页面应用:只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源,公共资源仅需加载一次,常用于PC端网站,购物等网站。
优点:页面之间切换快,减少了服务器的压力
缺点:首屏打开慢,不利于SEO搜索引擎优化,利用搜索引擎的规则是提高网站在有关搜索引擎的自然排名。
(2)SEO:搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎的自然排名
因为SPA单页面应用,是通过AJAX获取数据,这就难保证我们的页面能被搜索引擎收到,并且有一些搜索引擎不支持js和通过ajax获取数据。那就更不用提SEO了,为了解决这个 问 题就产生了SSR。
(3)SSR服务端渲染:SSR的出现一定程度上解决了SPA首屏慢的问题,又极大的减少了SPA对于SEO的不利影响。
服务端渲染的优缺点是?
优点:
前端耗时少。因为后端拼接完了html,浏览器只需要直接渲染出来。
有利于SEO。因为在后端有完整的html页面,所以爬虫更容易爬取获得信息,更有利于seo。
无需占用客户端资源。即解析模板的工作完全交由后端来做,客户端只要解析标准的html页面即可,这样对于客户端的资源占用更少,尤其是移动端,也可以更省电。
后端生成静态化文件。即生成缓存片段,这样就可以减少数据库查询浪费的时间了,且对于数据变化不大的页面非常高效 。
缺点:
不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,则对于前端复杂度高的项目,不利于项目高效开发。另外,如果是服务器端渲染,则前端一般就是写一个静态html文件,然后后端再修改为模板,这样是非常低效的,并且还常常需要前后端共同完成修改的动作;或者是前端直接完成html模板,然后交由后端。另外,如果后端改了模板,前端还需要根据改动的模板再调节css,这样使得前后端联调的时间增加。
占用服务器端资源。即服务器端完成html模板的解析,如果请求较多,会对服务器造成一定的访问压力。而如果使用前端渲染,就是把这些解析的压力分摊了前端,而这里确实完全交给了一个服务器。
客户端渲染的优缺点是?
优点:
前后端分离。前端专注于前端UI,后端专注于api开发,且前端有更多的选择性,而不需要遵循后端特定的模板。
体验更好。比如,我们将网站做成SPA或者部分内容做成SPA,这样,尤其是移动端,可以使体验更接近于原生app。
缺点:
前端响应较慢。如果是客户端渲染,前端还要进行拼接字符串的过程,需要耗费额外的时间,不如服务器端渲染速度快。
不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的,只是记录了一个页面,所以SEO很差。因为服务器端可能没有保存完整的html,而是前端通过js进行dom的拼接,那么爬虫无法爬取信息。除非搜索引擎的seo可以增加对于JavaScript的爬取能力,这才能保证seo。
使用服务器端渲染还是客户端渲染?
还是要根据具体的实际情况进行选择,比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染;而类似后台管理页面,交互性比较强,不需要seo的考虑,那么就可以使用客户端渲染。
另外,具体使用何种渲染方法并不是绝对的,比如现在一些网站采用了首屏服务器端渲染,即对于用户最开始打开的那个页面采用的是服务器端渲染,这样就保证了渲染速度,而其他的页面采用客户端渲染,这样就完成了前后端分离。
推荐链接?:https://www.cnblogs.com/muzishijie/p/11198315.html
总结:
在你的项目SEO优先级较高,前端工程复杂度低的情况下 应该采用SSR架构开发;相反则应该尽量选择 客户端渲染
开发:背景介绍完毕我们开始进入正题开始开发
一·开发技术背景学习
推荐链接? 1:nuxtjs官网:https://www.nuxtjs.cn/guide/installation
推荐链接? 2:Vue-SSR官网:https://ssr.vuejs.org/zh/guide/universal.html
这里建议 优先 学习 Vue-SSR的一些 代码书写背景,但不需要从Vue-SSR官网中的案例进行撸代码,只需要知道注意事项以及为什么即可,这时再切到nuxt中进行正式开发;
比如:
其次也不要全盘吞下Vue-SSR官网的所有内容,因为与nuxt.js的设计是有出入的;在Vue-SSR官网中作者只是阐述了 基于 Vue实现SSR的 基础的实现,并不具备足够的成熟的工程化落地经验;所以还是要以nuxt文档为主,比如在 nuxt中的默认路由是由框架 自动生成的,不需要开发者去手动配置等;
二·安装等前置条件执行:
1.首先根据 官方文档指引 进行安装
2.选择配置项并初始化工程
三·调试 run dev
1.我在这里偷懒直接 采用了官方介绍中间件的demo
下载链接?:https://github.com/nuxt/example-auth0
2.红色箭头标注的是 项目 预览地址
该页是浏览器打开后的效果图;可以看到我在上文中index.vue文件中 下方写到了 hi~ 文本, 并用nuxt-link>标签进行包裹;这是Nuxt推荐的路由方式;相应的我们应在 /auth/sayhi 目录下写下对应的文件
这是click hi~ 之后所进入到了http://localhost:49322/auth/sayhi 页面;
至此,我们基础的安装、运行、调试 已经ok
四·文件目录结构
1.同样,需要参照官方文档指引,来搞清楚整个工程结构及各模块功能
2.这里推荐优先搞懂 中间件目录以及页面目录
中间件目录相当于相应页面的路由守卫方法
至此,基础的基于Nuxt的ssr前端工程落地 开发调试阶段已经完成;
部署:如何部署SSR项目
部署文档
https://www.jianshu.com/p/2b1510e92a46
PM2-node进程管理程序
https://www.cnblogs.com/wangcp-2014/p/10874417.html
一·连接至目标服务器
1.SSR顾名思义,是要将我们开发好的前端代码 push 到服务器的;第一步就是要连接到目标服务器
二·将开发好的前端代码push到服务器并在服务器上进行工程的初始化 并启动
push形式分两种,一种是将代码打包后push上去,另外一种是将整个工程push上去,但需要注意的是都要将node_modus依赖包删除掉,并在服务器上进行工程的初始化 并启动
结尾:至此基于Vue-SSR-Nuxt.js的入门介绍已经完毕;
虽然本文写的不够深入,本文主要是带领读者进入Nuxt的基础开发,想Nuxt涉及到的许多原理是基于服务端开发的,究其原理就像模版引擎,如果撸过服务端代码的小伙伴一定不会陌生;
如果你觉得本文对你对SSR的了解有所帮助
请 点赞、关注、转发、收藏 吧,你的支持是博主前进的动力!
⬇️ 原文链接 ⬇️
⬇️ 原文链接 ⬇️
⬇️ 原文链接 ⬇️