为什么将react项目做成ssr同构应用

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