首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在Next.JS中实现类似于静态导出的回退行为

问如何在Next.JS中实现类似于静态导出的回退行为
EN

Stack Overflow用户
提问于 2021-08-31 19:01:39
回答 1查看 218关注 0票数 1

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

我可以生成像这样的大多数页面,没有任何问题。但我希望能够静态地生成大多数页面,并且在生产构建期间页面没有静态呈现时,仍然能够使用客户端呈现按需生成新页面。

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

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

我不期望任何增量SSR,因为我在nextJs中没有后端服务器,只是希望能够在每次有人点击未预先呈现的特定页面时获取数据(从另一个非NextJs API)。我也意识到这些页面不会被搜索引擎正确索引。

我有什么方法可以做到这一点吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-04 13:58:47

我设法通过修改404页面解决了这个问题:404.tsx/js

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

代码语言:javascript
复制
// 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代码。这将使页面的行为不同于网络爬虫或机器人。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69004069

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档