服务端渲染

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

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

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

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

同构

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

nextjs

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

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

同构内容未完待续，react扬帆起航之同构（二）将介绍如何基于create-react-app-typescript生成的应用构建同构应用。

react扬帆启航专栏分享的时我个人学习与实践react过程中的一些历程，希望借此专栏与大家共同探讨react相关的技术，以求进步。

第一期系列文章主要内容有： react的基本环境搭建、路由配置与组建分割、前后端数据交互、状态管理(mobx)、react应用部署以及同构。

第一期系列文章主要记录的是我搭建react的种子项目react-sail的过程。如果你觉得对你有些帮助的话，给react-sail个start吧，有兴趣的朋友可以一起来完善。