Next.js fallback blocking控制页面加载行为 详情

Next.js提供了fallback选项，用于控制页面加载行为。该选项用于处理某些页面如果暂时无法进行渲染，Next.js应该如何处理。

fallback选项有两种取值：true和false。当取值为true时，如果访问的页面不存在，Next.js会返回一个fallback页面。这个fallback页面会在客户端重新生成，并在浏览器中显示。用户可以看到这个页面，但是页面内容并不是实时生成的，而是服务端提前生成好的。当页面实时生成完毕之后，会被替换掉这个fallback页面。这种方式被称为“静态生成”。

当fallback为false时，如果访问的页面不存在，则会返回404页面。

除了true和false之外，fallback还可以设置为blocking。这个选项意味着所有数据准备就绪之后再渲染页面。这种方式被称为“服务端渲染”。在这种情况下，如果访问的页面暂时无法生成，Next.js会对该页面进行等待，直到所有数据准备就绪之后才开始渲染页面。

可以通过以下代码进行fallback的设置：

export async function getStaticPaths() {
  return {
    paths: [
      { params: { page: '1' } },
      { params: { page: '2' } },
      { params: { page: '3' } }
    ],
    fallback: 'blocking'
  }
}

在这个例子中，我们设置了fallback为blocking，表示页面的渲染将在所有数据准备就绪后再进行。

总的来说，fallback选项可以帮助我们控制页面加载行为，使得页面的渲染更加智能化和高效化。