Next.js ISR 頁面在 CMS 中刪除后未刪除

Question

我正在嘗試 Next.js 並構建一個小應用程序，該應用程序從安裝了 GraphQL 的無頭 WordPress 應用程序中獲取帖子。 然后我使用 Apollo/Client 獲取 GraphQL 內容：

阿波羅客戶端.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
  cache: new InMemoryCache(),
});

export default client;

在索引中，我抓住了帖子：

index.js

import Head from "next/head";
import styles from "../styles/Home.module.css";

import { gql } from "@apollo/client";
import Link from "next/link";
import client from "../apollo-client";

function Home(props) {
  const { posts } = props;
  return (
    <div className={styles.container}>
      <Head>
        <title>Wordpress blog posts</title>
        <meta
          name="description"
          content="Wordpress blog posts with Apollo Client"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>=
        <div className={styles.grid}>
          {posts.map((post) => (
            <a
              key={post.node.databaseId}
              href={`/blog/${post.node.slug}`}
              className={styles.card}
            >
              <h2>{post.node.title}</h2>
              <div dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />
            </a>
          ))}
        </div>
      </main>
    </div>
  );
}

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query Posts {
        posts {
          edges {
            node {
              title
              databaseId
              slug
              excerpt(format: RENDERED)
            }
          }
        }
      }
    `,
  });

  if (data.posts.edges === 0) {
    return { notFound: true };
  }

  return {
    props: {
      posts: data.posts.edges,
    },
    revalidate: 10,
  };
}

export default Home;

然后對於單個帖子頁面：

/blog/[slug].js

import Link from "next/link";
import { gql } from "@apollo/client";
import client from "../../apollo-client";

export default function BlogPage(props) {
  const { post } = props;

  if (!post) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <Link href="/">
        <a>&larr; back to home</a>
      </Link>
    </div>
  );
}

export async function getStaticProps({ params }) {
  const { slug } = params;
  const result = await client.query({
    query: gql`
      query GetWordPressPostBySlug($id: ID!) {
        post(id: $id, idType: SLUG) {
          title
          content
        }
      }
    `,
    variables: { id: slug },
  });

  if (!result.data.post) {
    return { notFound: true };
  }

  return {
    props: {
      post: result.data.post,
    },
    revalidate: 10,
  };
}

export async function getStaticPaths() {
  const result = await client.query({
    query: gql`
      query GetWordPressPosts {
        posts {
          nodes {
            slug
          }
        }
      }
    `,
  });

  return {
    paths: result.data.posts.nodes.map(({ slug }) => {
      return {
        params: { slug },
      };
    }),
    fallback: true,
  };
}

添加新帖子時它可以工作，一旦我刪除它，它就不會被刪除。 在執行npm run dev和npm run build然后npm start時都會發生這種情況

我可能在 ISR 和重新驗證的工作方式上遇到了問題。 或者我的代碼中可能遺漏了什么？ 任何幫助，將不勝感激。

- 編輯 -

同時，在 Stackoverflow 和 Next.js github 存儲庫上還有幾個線程，與我所經歷的有關。 相關頁面：

Next.js 不刪除 CMS 中刪除的動態頁面

https://github.com/vercel/next.js/issues/25470

Next.js ISR 頁面在 CMS 中刪除后未刪除

如何清除 NextJs GetStaticPaths 緩存/“取消發布”動態路由？

https://github.com/vercel/next.js/discussions/18967

Answer 1

我不確定這是否符合您的用例，但在我從事的一個項目中，如果源數據被刪除，我們會返回 404。

export async function getStaticPaths() {
  // Get the paths we want to pre-render based on posts
  // We do not need to generate anything during build
  return {
    paths: [],
    fallback: true,
  };
}

export async function getStaticProps({ params: { slug } }) {
  // Run your data fetching code here
  try {
    const data = await getData(slug);
    return {
      props: { data, slug },
      revalidate: 30,
      notFound: !data,
    };
  } catch (e) {
    return {
      props: { data: null, slug },
      revalidate: 30,
      notFound: true,
    };
  }
}

文檔： https://nextjs.org/blog/next-10#redirect-and-notfound-support-for-getstaticprops--getserversideprops

Answer 2

我認為問題在於fallback: true 。 你可以在NextJS文檔中找到它。 為了在您導航到已刪除的路線時收到404 ，您必須指定fallback: blocking

使用動態路由時，有一些方法可以處理那些不在getStaticPaths數組中的路徑。 blocking或true 。

不同之處在於第一個像getServerSideProps一樣工作，所以它會在服務器中獲取數據，它會在服務器中生成HTML然后返回它，在以后的請求中它將提供已經 static 版本的頁面。 如果您想為那些已刪除的路由返回404狀態代碼，這是您想要使用的方式。

后備： true作品不同。 它提供頁面的 static 版本，但您必須在獲取數據時准備該頁面以具有加載器微調器或骨架。 如果您准備頁面來執行此操作，即使您的getStaticProps函數中有返回該條件的條件，它也不會返回404頁面。 實際上，如果你只return notFound: true屬性，你的頁面會拋出錯誤，因為它正在等待永遠不會出現的道具，因為它只返回notFound 。

如果您更改fallback: blocking ，運行類似getServerSideProps ，將嘗試獲取數據，它將不存在，因為您之前刪除了它，將return notFound: true和404頁面錯誤。 如果您使用 fallback true，它將嘗試提供 static 頁面，然后獲取數據。

Next.js ISR 頁面在 CMS 中刪除后未刪除

問題描述

2 個解決方案

解決方案1
2 2021-06-19 06:03:10

解決方案2
0 2022-07-05 06:34:44

Next.js ISR 頁面在 CMS 中刪除后未刪除

問題描述

2 個解決方案

解決方案1 2 2021-06-19 06:03:10

解決方案2 0 2022-07-05 06:34:44

解決方案1
2 2021-06-19 06:03:10

解決方案2
0 2022-07-05 06:34:44