如何在 Next.JS 中为静态导出提供类似后备的行为答案

【问题标题】：How to have a fallback like behavior for static export in Next.JS如何在 Next.JS 中为静态导出提供类似后备的行为
【发布时间】：2021-10-30 09:12:40
【问题描述】：

我的 nextjs 应用是静态导出的。我使用 getStaticPaths 和 getStaticProps 在构建时正确呈现了动态页面。它们在一个名为 [exercised].js 的文件中定义，带有一个参数。

我可以毫无问题地生成大多数这样的页面。但是我希望能够静态生成我的大部分页面，并且当页面在生产构建期间没有静态呈现时，仍然能够通过客户端呈现按需生成新页面。

不过，according to the docs，我可以为我的动态页面启用或禁用回退。但我无法启用回退，因为我正在静态导出应用程序。如果禁用回退，我将无法自己进行任何客户端数据获取和页面呈现，因为默认情况下，对于构建期间未生成的任何页面都会返回 404 not found 响应。

我希望我可以继续静态导出我的页面，并且当它们静态不可用时仍然有一些方法可以在客户端呈现它们。

我不期望任何增量 SSR，因为我在 nextJs 中没有后端服务器，只是希望能够在每次有人点击未预渲染的特定页面时（从另一个非 NextJs API）获取数据。我也知道这些页面不会被搜索引擎正确索引。

有什么方法可以实现吗？

【问题讨论】：

“静态不可用时在客户端渲染”——你知道非静态生成的页面会有哪些路径吗？
@juliomalves 不，我没有。这就是为什么我希望在发生这种情况时“回退”以在客户端上获取数据。
那我想不出办法用静态导出来实现。
虽然这个问题有点老了，但我遇到了完全相同的困境。我一直在玩的一个解决方案是一个 litte hacky，它涉及向 404 页面添加代码，以便它可以检测您是否在动态路由上，并在需要时呈现正确的页面。
如果您有兴趣，请告诉我，我将使用此解决方案发布答案

标签： javascript next.js

【解决方案1】：

我通过破解 404 页面设法解决了这个问题：404.tsx/js

这不是一个容易优雅地解决的问题，因为从本质上讲，静态导出默认会提供所有页面，而重定向确实需要由后端处理。大多数提供商会改为重定向到 Next.JS 提供的 404 页面。我们可以利用这一点，在 404 页面上呈现我们想要的内容：

// in your 404.tsx
const NotFound: FC = () => {
  const router = useRouter();
  const path = router.asPath;
  // This will match for dynamic/<id>/path
  const match = path.match(/^\/dynamic\/(.+)\/path$/);
  // Check to see if current route is your dynamic route...
  if (match) {
      const id = match[1]; 
      // if so, render your dynamic component
      return <YourDynamicComponent id={id}/>;
     
  }
  // else render regular 404 page
  return <NotFoundPage />

}

限制

虽然普通用户会看到他们想要的内容，但静态服务器仍会返回 404 代码。这将使页面的行为与网络爬虫或机器人不同。

【讨论】：