react扬帆起航之同构（一）

本文信息

• 本文创建于2018/03/07

服务端渲染

在依靠客户端渲染时，当用户打开页面时，多数情况下是这样的（不考虑缓存）: 向静态资源服务器获取html/css => 向静态资源服务器获取js => 向api服务器获取数据 => 开始渲染内容。而在依靠服务端渲染时，发送http请求后，服务端计算出用户需要的数据，然后返回带有内容的html。因此，一般情况下，对于首次打开的页面，服务端渲染的速度是优于客户端渲染的。

服务端渲染的另一个用处就是SEO，这个是显而易见的，查看页面源代码即可理解。

所以，服务端渲染主要就是为了两部分：首屏性能、SEO。

然而，相对于客户端渲染，服务端渲染更为复杂，对开发人员技术要求度更高。同时，由于需要在服务端进行计算，服务端渲染也会加大服务器压力，虽然服务端肯定也会做缓存。

同构

为了最大限度结合服务端渲染与客户端渲染的优势，引入了同构的概念。react组件能够同时在客户端与服务端渲染的方式，称之为同构。在具体应用中，首次访问会采用服务端渲染，后续的渲染由客户端负责。

nextjs

如上所述，构建react同构应用并不简单，对技术要求更高。一直以来，也没有一个方便的react同构框架，直到nextjs的出现。nextjs可以方便的用来构建react同构应用，大大降低了构建同构应用的门槛。

本系列文章主要介绍的是基于create-react-app-typescript生成的应用构建同构应用，对于nextjs不再作更多的介绍，有兴趣的请自行了解。