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，这两个缺点就迎刃而解；这也是同构应用的目的所在。
网友评论