introduction

Next.js 将自动的决定一个页面是否为静态的(能够被预渲染) - 例如它并不存在阻塞数据请求 .. 这通常是通过是否存在getServerSideProps或者getInitialProps在Page 中 …

这个特性允许Next.js 发行能够同时包含服务端渲染以及静态生成的页面的水和应用 ..

注意:

静态生成的页面将仍然具有交互性: Next.js 将在客户端水和代码让它完全具有交互性 ..

这个特性的一个好处是优化的页面确保没有服务端的计算,并且能够立即从多个CDN的位置进行流化传输数据给最终用户 .. 最终将导致一个超快的用户的加载体验 …

how it works

如果数据抓取函数存在于一个页面中,那么next.js 将会按需渲染这个页面,或者根据请求渲染(意味着服务端渲染) ..

如果不是将在动的静态优化(通过预渲染页面为静态Html)

在预渲染的时候,路由的query将会为空,因此这个阶段不会存query的信息,在水和之后,Next.js 将会触发应用的更新去提供路由参数在query对象中 …

query对象会在水和触发另一个渲染之后更新的这种情况下是:

  • 页面是一个动态路由
  • 页面中,URL中包含了query 值
  • 配置在next.config.js中的重写,于是这些参数能够在query中解析并提供 ..

为了能够分辨query是完全更新的并且准备好使用,你能够利用next/router中的isReady字段进行判断 ..

注意: 使用动态路由增加的参数到一个页面,那么在使用getStaticProps时总是能够在query对象中可见 …

next build将发行’.html’ 文件(对于静态优化过的页面),举个例子pages/about.js将会自动优化为

.next/server/pages/about.html

并且如果你增加getServerSideProps到页面中,它依旧是一个js

  1. .next/server/pages/about.js

注意

  • 如果你有一个getInitialProps的自定义App组件,那么页面中的对于静态生成的优化将会关闭 ..
  • 如果有一个自定义的Document具有getInitialProps,确保你检测ctx.req在假设页面是服务端渲染之前进行了定义 ,ctx.req对于预渲染的页面将会是undefined

也就是说服务端渲染能够包含ctx.req存在,但是预渲染这个值是空的(这应该是约定) …

  • 避免在渲染树中 使用next/router的asPath值(直到路由的isReady为true,静态优化的页面仅仅在客户端知道asPath(在服务端不可知),因此使用它作为一个属性可能会导致错误 … active-class-nameexample 说明了使用asPath作为属性的一种方式 …