react扬帆起航之同构(一)

0

本文信息

  • 本文创建于2018/03/07

服务端渲染

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

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

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

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

同构

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

nextjs

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

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...