React之服务端渲染Next.js

因为工作需要，我被赶鸭子上架，来学习学习流行的服务端渲染。
闻名已久，如雷贯耳的，能解决单页应用的缺点，但是又没有其他明显不能接受的缺点的服务端渲染。
来吧，跟我一起来好好学习，天天向上。

什么是Next.js？

Next.js是基于React实现的服务端渲染框架。它使用React语法，可以很好的实现代码模块化。有利于开发和维护，在React生态圈中表现优秀。

Next.js有什么优点？

1、默认服务端渲染模式，以文件系统为基础的客户端路由。
2、代码自动分隔，使页面加载更快；
3、（以页面为基础的）间接的客户端路由；
4、以WebPack的热替换为基础的开发环境；
5、使用React的JSX语法和ES6module，模块化和维护更方便。
6、可以运行在Express和Node.js的HTTP服务器上；
7、可以定制化专属的bable和webpack配置。

说到这个，就得来聊一聊客户端渲染和服务端渲染这两个概念了。

什么是服务端渲染？什么是客户端渲染？

服务端渲染，是指页面的渲染和生成由服务器来完成，并将渲染好的页面返回客户端。
而客户端渲染是页面的生成和数据的渲染过程是在客户端（浏览器或APP）完成。

Next.js服务端渲染的优点是什么？

1、初始只加载首页，首屏渲染快，能提升单页应用首屏加载性能；
2、对SEO（搜索引擎优化）友好，因为服务端渲染的页面在网络传输中的时候，传输的是一个真实的页面，对爬虫很友好。
3、一切皆JS。

服务端渲染的缺点是什么？

1、服务器压力比较大，HTTP请求会花费更多的时间。改善方法是可以使用服务端的页面缓存技术，减轻服务器的渲染压力；
2、HTML页面会增加和花费更多的下载时间，如果React组件包含很多的数组和表格，就是不能忽视的问题。
3、使用SSR（服务端渲染）会增加应用程序的复杂度，这意味着服务器应用在其他特性和改进上的时间会更少。
4、交互方式单一，无法进行异步刷新（可以通过后端在HTML中插入js代码绑定时间来实现异步刷新）

不说缺点，先来说说最大的优点：对SEO友好这个事情。

为什么服务端渲染对SEO（搜索引擎优化）友好？

这是相对于客户端渲染对SEO的极端不友好而言的，客户端渲染都是通过JS来修改DOM使得HTML拼合显示的，现在客户端渲染多数都是SPA(单页应用）初始DOM结构为空，对SEO极端不友好。
而服务端渲染从名字到原理就和客户端渲染不一样，服务端会直接生成整个页面，浏览器下载的是完整页面，DOM结构都在里面，所以爬虫可以直接获取。

说起这个，就来说说两者之间的区别吧。

客户端渲染和服务端渲染有什么区别？

客户端渲染：

通常我们使用React，或者Vue，都是SPA（单页应用，你的浏览器会下载一个最小化的HTML页面，处使页面几乎为空，然后用JS来动态生成内容，填充页面。

服务端渲染：

在服务端已经生成好初始页面内容，所以你的浏览器下载的是一个完整的页面，内容已经在里面了。但是内容的更新仍然还是需要浏览器来处理。

了解了两者的区别，就来说说应用吧 。

什么时候需要使用服务端渲染？

1、你需要在谷歌，DuckDuckGo，必应，雅虎和百度上去做SEO（搜索引擎优化）
2、已经有一个运行中的React应用，需要最佳的性能并且同时你还愿意为增加的服务器资源付费。

什么时候不应该使用服务端渲染？

1、你的React应用还没完成。首先你得让它能工作，但是如果你是从头开始写，那是绝对没有问题的。
2、只需要在谷歌上做SEO，那是不需要服务端渲染的。

说到这里，难免就会有人有疑问，为什么SEO对于谷歌跟别的搜索引擎不一样呢？
那就来看看下面这个问题吧。

为什么在谷歌上做SEO不需要服务端渲染？

因为大部分的搜索引擎仅能抓取URL直接输出的数据资源，对于Ajax类的异步请求数据无法抓取，但是Goole除外。因为谷歌的算法在不断更新变化，同时有自己强大的技术支持，可以做到AJAX的爬虫抓取。