Open fayeah opened 3 years ago
Next.js是React框架，内置了很多功能，比如路由、预渲染、代码分割等等。
目前为止个人觉得里面最值得读的是"Pre-rendering and Data Fetching"。
“Pre-rendering and Data Fetching”是Next.js非常重要的概念之一。默认情况下，next.js会对每一个page进行预渲染，也就是说会提前为每一个page生成HTML，而不是由客户端的JS来生成。预渲染可以带来更好的性能和 SEO 效果。
静态生成的方式可用于：
检验是否要用静态生成：在一个请求之前能不能与渲染？如果是，就应该选择静态生成。
但是，对于经常更新的数据，或者每一个请求内容都不一致的页面，可以使用服务端渲染。相对慢一些，但是预渲染页面总是保持最新的状态。另外一种方式是使用客户端的JS来获取最新的数据。
静态生成使用getStaticProps来获取文件数据、外部API以及数据库等数据，这种方法只在服务端运行，不会在客户端运行，所以getStaticProps相关代码也不会被构建到JS bundle。总的来说，在构建的时候会先去解析getStaticProps，然后进行预渲染。
getStaticProps
服务端渲染，使用getServerSideProps，比较慢，因为每次请求都要计算结果，所以应该在需要的时候才使用，例如每次请求都需要获取最新的数据。
getServerSideProps
以上两种是预渲染的方式，还有一种是不需要预渲染。 即客户端渲染，对于用户相关，而与SEO无关的页面，可以使用客户端渲染，先生成页面上静态部分，再利用JS获取外部数据填充到剩余部分，其实这个就是在不使用Next.js时常用的手段不是嘛？
预渲染
非预渲染
文档链接：https://nextjs.org/learn/basics/data-fetching/pre-rendering 中文文档：https://www.nextjs.cn/docs/basic-features/pages
一句话描述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 效果。
静态生成和服务端渲染
静态生成的方式可用于：
检验是否要用静态生成：在一个请求之前能不能与渲染？如果是，就应该选择静态生成。
但是，对于经常更新的数据，或者每一个请求内容都不一致的页面，可以使用服务端渲染。相对慢一些，但是预渲染页面总是保持最新的状态。另外一种方式是使用客户端的JS来获取最新的数据。
静态生成使用
getStaticProps来获取文件数据、外部API以及数据库等数据，这种方法只在服务端运行，不会在客户端运行，所以getStaticProps相关代码也不会被构建到JS bundle。总的来说，在构建的时候会先去解析getStaticProps，然后进行预渲染。服务端渲染，使用
getServerSideProps，比较慢，因为每次请求都要计算结果，所以应该在需要的时候才使用，例如每次请求都需要获取最新的数据。以上两种是预渲染的方式，还有一种是不需要预渲染。 即客户端渲染，对于用户相关，而与SEO无关的页面，可以使用客户端渲染，先生成页面上静态部分，再利用JS获取外部数据填充到剩余部分，其实这个就是在不使用Next.js时常用的手段不是嘛？
判断页面是否预渲染
预渲染
非预渲染
文档链接：https://nextjs.org/learn/basics/data-fetching/pre-rendering 中文文档：https://www.nextjs.cn/docs/basic-features/pages