一句话描述Next.js
Next.js是React框架，内置了很多功能，比如路由、预渲染、代码分割等等。
重点
目前为止个人觉得里面最值得读的是"Pre-rendering and Data Fetching"。
Pre-rendering and Data Fetching
“Pre-rendering and Data Fetching”是Next.js非常重要的概念之一。默认情况下，next.js会对每一个page进行预渲染，也就是说会提前为每一个page生成HTML，而不是由客户端的JS来生成。预渲染可以带来更好的性能和 SEO 效果。
静态生成和服务端渲染
- 静态生成：HTML 在 构建时 生成，并在每次页面请求（request）时重用。
- 服务器端渲染：在 每次页面请求（request）时重新生成 HTML。
静态生成的方式可用于：
- 运营页面
- 博客
- 电商产品列表
- 帮助文档
检验是否要用静态生成：在一个请求之前能不能与渲染？如果是，就应该选择静态生成。
但是，对于经常更新的数据，或者每一个请求内容都不一致的页面，可以使用服务端渲染。相对慢一些，但是预渲染页面总是保持最新的状态。另外一种方式是使用客户端的JS来获取最新的数据。
静态生成使用getStaticProps来获取文件数据、外部API以及数据库等数据，这种方法只在服务端运行，不会在客户端运行，所以getStaticProps相关代码也不会被构建到JS bundle。总的来说，在构建的时候会先去解析getStaticProps，然后进行预渲染。
服务端渲染，使用getServerSideProps，比较慢，因为每次请求都要计算结果，所以应该在需要的时候才使用，例如每次请求都需要获取最新的数据。
以上两种是预渲染的方式，还有一种是不需要预渲染。 即客户端渲染，对于用户相关，而与SEO无关的页面，可以使用客户端渲染，先生成页面上静态部分，再利用JS获取外部数据填充到剩余部分，其实这个就是在不使用Next.js时常用的手段不是嘛？
判断页面是否预渲染
- 打开网页，CMD+SHIFT+P, 禁止JavaScript
- 刷新页面，如果能正常进行交互则是预渲染，否则不是。
- 参考页面 👉: create-react-app.now-examples.vercel.app/ 预渲染和非预渲染页面的对比👇 ：
预渲染
非预渲染
