客户端页面转换后如何为服务器端呈现的动态路由返回 404 页面答案

【问题标题】：How to return 404 page for a server-side rendered dynamic route after client-side page transition客户端页面转换后如何为服务器端呈现的动态路由返回 404 页面
【发布时间】：2022-01-05 16:05:49
【问题描述】：

我正在开发一个将 Contentful 作为内容管理系统的 next.js 项目。我想在客户端页面转换后为服务器端呈现的动态路由返回 404 页面。

当我直接请求页面（通过输入 url 或刷新页面）时，一切正常并返回 404 页面。但是当用户已经在站点上并通过“下一个/链接”链接（客户端页面转换）导航到服务器端呈现的页面时，getServerSideProps 仅返回包含结果的 JSON。可以在这里记录：https://nextjs.org/docs/basic-features/data-fetching#only-runs-on-server-side。这会导致网站完全为空并出现以下控制台错误：

[错误] 加载资源失败：服务器响应状态为 404（未找到）（page.json，第 0 行）

这是我要导航到的页面的 getServerSideProps：

export const getServerSideProps: GetServerSideProps = async ({ params }: Params) => {
  const { slug } = params;
  try {
    const entry: Entry<any> = await (
      await ContentfulService.getInstance().getEntryBySlugAndType(slug, 'page', 4)
    ).items[0];
    const page: IPageFields = entry.fields;
    return {
      props: { page }
    };
  } catch (error) {
    return { notFound: true };
  }
};

我做错了什么？是否有机会为客户端页面转换返回 404 页面？

【问题讨论】：

标签： reactjs typescript next.js

【解决方案1】：

我可以通过向我的 404 页面添加一个简单的 getStaticProps 来解决我的问题。

像这样：

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {}
  };
};

【讨论】：