NextJs-Pre-rendering

[yaofly2012]

Pre-rendering

特指Pages组件pre-rendering。

方案

1. SSG
   SSG固然很好（built once and served by CDN），但是很难有“一直不变”的内容（最常见的就是帮助文档吧），所以SSG + CSR 倒也是一种方案。

2. SSR

Importantly, Next.js lets you choose which pre-rendering form you'd like to use for each page.

就是通过Page组件文件里声明不同的方法来choose预渲染方式。

[yaofly2012]

Static Generation（SG/SSG）

Static Generation can be done with and without data.

一、Without data

默认会对页面进行SSG。

Issues：

1. 什么情况下不会进行SSG处理，定义getInitialProps？

二、With data: getStaticProps

2.1 约定大于配置

1. 在Page组件文件（且只能在Page组件文件）里导出命名函数getStaticProps；
   即Page组件文件导出了除了是渲染页面的组件外，还有获取页面组件数据的方法。

2.2 getStaticProps函数

1. 不能访问request，即使在dev阶段。

2. 只在服务端执行，代码也不会被打入JS bundle里，并且方法依赖的模块也不会打入JS bundle。
   和Page组件在一起怎么做到的？？？

3. getStaticProps函数里可以直接访问服务端代码

You should not fetch an API route from getStaticProps — instead, you can write the server-side code directly in getStaticProps.

访问API route 不必走HTTP请求，直接访问服务端代码。

4. getStaticProps函数返回值props的值必须是可序列话的，即必须可以JSON化，否则报错。

SerializableError: Error serializing .id returned from getStaticProps in "/posts/[id]".
Reason: symbol cannot be serialized as JSON. Please only return JSON serializable data types.

2.3 原理？

功能实现：

• build time执行
• 开发时候每次请求执行
• 数据传给Page组件
• ...

1. Statically Generates both HTML and JSON ？

三、Incremental Static Regeneration（渐进式SG）>v9.5

3.1 背景

With getStaticProps you don't have to stop relying on dynamic content, as static content can also be dynamic.

通过SG不一定不能依赖动态的内容，毕竟没有一成不变的内容。对于哪些实时性要求不高的动态内容，提供了渐进式SG解决方案。

3.2 原理

四、getStaticPaths

辅助getStaticProps函数，并且两者的执行时机是一致的（虽然感觉开发时没必要执行getStaticPaths）

4.1 返回值paths属性

4.2 返回值fallback 属性

fallback虽然是个boolean值，但是也要显示的赋值，这估计是作者想让开发明白自己在干什么（即采用什么兜底方案）。

Issues

1. 访问不存的页面时（404了）页面悄咪咪的继续发get请求
   

五、Preview Mode

预览模式。

解决的问题

怎么使用

[yaofly2012]

SSR

一、getServerSideProps

1. 只在服务端执行，客户端切换页面时也是会在服务端执行。

1.1 工作原理

1. 服务端
2. 客户端

1.2 SSR缺点

1. Time to first byte (TTFB) will be slower。
   所以说性能优化离不开具体的场景，没有正确的方式，有合适的方式。SSG+CSR也是一种解决方案。

1.3 代替getInitialProps ?

不同于getInitialProps方法，getStaticProps作为单独的命名导出，而不是作为Page组件的静态方法了（这种处理方式更好些，本质上这些静态方法跟Page组件没有直接关系的）。

1.4 Issues:

1. You can not use getStaticProps with getServerSideProps. To use SSG, please remove getServerSideProps
   两者不能同时使用？

2. getServerSideProps, getStaticProps 不能在Page组件里使用

ReferenceError: getServerSideProps is not defined

说明在构建的时候 getServerSideProps, getStaticProps 会和Page组件代码分开。

1.5 确定使用getServerSideProps?

nextjs自动Automatic Static Optimization，但是如果页面组件定义了getServerSideProps就不会进行静态优化（statically optimize）。