前言
尽管本人目前项目中并未有需要服务端渲染的需求,但是作为一名前端开发,我有兴趣深入了解一下它,网上找了几篇文章结合起来看,再结合我比较熟悉的技术栈,发现react+koa作为前端和服务端来开始这一项目是最合适的.
定义
服务端渲染即由服务端获取数据,通过html输出的方式在网页中呈现,与现在流行的客户端渲染(CSR)不同,CSR由js进行比对渲染(比如虚拟DOM),SSR交由html使浏览器直接渲染
目的
- 加快首屏渲染
- 利于SEO,更容易被爬虫拿到
但是同样的,缺点就是代码量变大变复杂,以及服务器端压力变大,所以利弊得失需要视项目实际情况去定
实现
SSR的定义及原理很简单,但是要具体实施是有难度的,因为考虑到双端就涉及到一个概念————同构
什么是同构
我们的前端代码通过处理可以在服务端运行,输出的html也可以在浏览器上直接显示,但是这就是服务端渲染了吗?no!当我们添加某些交互功能,比如按钮,js事件,你会发现毫无反应!原因是服务端无法直接处理这些js事件,我们仍需要对它们进行处理,这就是同构的目的,so,我们的代码是要跑两遍的,服务端跑一遍完成html结构的渲染,客户端跑一遍完成js等事件的绑定,这就是同构。
代码相关
可以参考这篇文章,我把代码clone下来后在本地跑了一遍,完全没有问题的,但是打包后的样式没有加载出来,后面有需求再研究吧。
链接:https://blog.csdn.net/dKnightL/article/details/125295881
参考文章: