Reactjs Next.js 的buildtime究竟是什么时候发生的

构建时间发生在您为生产(next build)构建应用程序时.当应用程序在生产环境中运行时(next start).

getInitialProps(gIP)在运行期间针对每个页面请求在客户端和服务器上运行.最常见的用例是在加载请求的页面之前检索某种共享数据(比如一个会话，它让客户端和服务器知道用户是否正在导航到特定页面).这总是在getServerSideProps之前运行.虽然技术上不鼓励使用它，但有时绝对有必要在客户机和服务器上执行一些逻辑.

getServerSideProps(gSSP)仅在运行期间针对每个页面请求在服务器上运行.最常见的用例是在加载页面之前，从数据库中检索特定于页面的最新数据(比如产品的定价和显示库存量).当你希望一个页面被搜索引擎优化(SEO)时，这一点很重要，搜索引擎会索引最新的网站数据(我们不希望我们的产品显示"库存-getServerSideProps个单位"，而实际上它是一个停产产品！).

getStaticProps(gSProps)只在构建期间运行(有点).对于那些数据和页面不经常更新的网站来说，这是非常棒的.这种方法的优点是页面是静态生成的，因此如果用户请求页面，他们将下载一个优化的页面，其中动态数据已经烘焙到其中.最常见的用例是博客或某种大型购物产品目录，这些产品可能不会经常更改.

getStaticPaths(gspath)只在构建期间运行(有点).它非常适合预渲染需要在构建时使用动态数据的类似路径(如/blog/:id).当与gSProps结合使用时，它会从数据库/平面文件/某种数据 struct 生成动态页面，然后静态地提供服务.一个示例用例是一个博客，其中有许多博客帖子共享相同的页面布局和类似的页面URL struct ，但需要在构建应用程序时将内容动态烘焙到页面中.

为什么gSProps和gSPaths sort of在构建期间运行？Next引入了revalidate个选项和fallback个选项，允许这两个Nextjs函数在运行时以秒为单位超时后运行.如果您希望静态地重新生成页面，那么这很有用，但应该每n秒重新生成一次.好处是页面在导航到时不需要请求动态数据，但缺点是页面最初可能会显示过时的数据.只有用户访问页面(触发重新验证)，然后同一用户(或其他用户)访问同一页面以查看页面的最新版本，页面才会重新生成.这不可避免地会导致用户A看到陈旧的数据，而用户B看到准确的数据.对于一些应用来说，这没什么大不了的，对于其他应用来说，这是不可接受的.

最后，还有客户端呈现(CSR)，它是在客户端(浏览器)上运行时请求的assets资源 ，对于SEO来说并不重要，或者不能在服务器端运行(比如将事件侦听器附加到文档；这无法完成，因为服务器没有DOMs).最常见的用例是特定于用户的仪表板页面，该页面只与该用户相关，因此不需要由搜索引擎或某种操纵DOM的JavaScript编制索引，因此无法在服务器上运行.

其他注意事项:gIP和gSSP是渲染阻塞.也就是说，在代码解析/返回props 之前，页面不会加载.这不可避免地会导致在页面加载之前显示空白页面.这也意味着页面响应时间变慢:页面被请求，gIP/gSSP运行阻止页面加载的代码，gIP/gSSP代码解析，然后下载assets资源 ，当HTML加载到DOM中时，页面开始在客户端加载JavaScript，JavaScript完成运行，然后，页面被重新水化，然后变得具有互动性.总的来说，这会导致速度减慢TTI.