ssr同构应用:一般也称为服务端渲染,叫同构应用可能更合适。服务器只做首次渲染,然后交给客户端,客户端接管页面交互
一、客户端渲染:
原理:
利用react、vue开发网页应用,用户在第一次请求服务器时,服务器返回的是一个空的html;浏览器拿到空的html后再从服务器拉取css文件,js文件,并获取api数据;
获取到的css,js文件存在于本地,用户浏览页面,在页面之间切换时,浏览器会利用缓存文件,直接渲染,不走服务端路由,只是从服务端获取api数据。
优点:
1、客户端直接渲染,速度快。
2、服务端不用每次返回html,只返回api数据,服务器压力小。
缺点:
1、不利于seo。搜索引擎爬虫对html的解析较好,较难爬取js动态生成的内容。而react应用的html只是一个空架子,所有内容都是通过js动态渲染的。
2、首次加载白屏。用户在第一次请求服务器时,先拿html,然后解析html,再去拉css,js,在网络不好的情况下,整个过程可能会比较长,用户会看到白屏。
二、服务端渲染:
原理:
用户浏览页面,在页面之间切换时,服务端对每个页面输出带有内容的html,用户每次请求都需要经过服务器。
优点:
1、首屏加载快。
2、利于seo。
缺点:
1、服务器压力大,每次请求都经过服务器,服务器每次都要解析准备好这次要请求的html
2、只是首屏加载快,对用户已经看过的页面没有优势。
三、ssr同构应用(服务端渲染的一种)
原理:
用户首次访问服务器,服务器将带有内容的html返回,浏览器解析html,拉取css,js资源,拉取完资源后,转换成客户端渲染模式。
优点:利于seo,加载快,结合了服务端渲染和客户端渲染的优势。
缺点:技术较为复杂。
四、ssr同构应用的实现:
1、直接运用react社区的next.js框架进行开发
写法与react有一些区别,较适合新项目的开发。对于已有的react项目,改造量还是较大的。next.js对每个页面都做成了服务端渲染,比较耗服务端性能,也没必要。
2、通过react服务端渲染库,结合node搭建服务器。
在理顺同构应用的流程后,实现对已有react项目的快速改造,改造量小。可以实现对部分页面的seo。
这种方式可以兼顾开发效率和改造的灵活性,优势最为明显。
因此,我选择第2种方式实现ssr同构应用。
总结:
总体来说,页面的渲染性能,客户端渲染优于服务端渲染。因此我们只需要解决客户端渲染的两个缺点即可:不利于seo和首次加载慢。之所以有这两个缺点,原因在于react、vue应用的原始html页面是一个空架子,从空架子到内容加载出来需要时间,对搜索引擎爬虫,也爬不到任何内容。
如果我们能在用户首次访问服务器时,返回带有内容的html,这两个缺点就迎刃而解;这也是同构应用的目的所在。