Next.js 14生产环境缓存Hashnode CMS数据，无法获取最新帖子

我在Next.js中通过普通API请求方式调用Hashnode CMS的GraphQL API，但遇到一个问题：生产环境下Next.js会缓存fetch请求，导致Hashnode上发布的最新帖子无法显示，只有开发模式能正常获取最新内容。我已经在fetch请求里设置了cache: "no-store"，但问题依旧，折腾了好几个小时都没解决。

相关代码 #

hashnode.ts（API请求逻辑文件） #

interface Query {
  query: string
  variables?: object
  tags?: Array<string>
}

export async function query({ query, variables, tags }: Query) {
  const data = await fetch("https://gql.hashnode.com", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query,
      variables,
    }),
    next: {
      tags,
    },
    cache: "no-store",
  }).then((r) => r.json())
  return data
}

app/blog/app.tsx（博客组件，遍历渲染帖子） #

export default async function Blog() {
  const {
    data: { publication },
  } = (await query({
    query: `
    query ($host: String!) {
      publication(host: $host) {
        posts(first: 10) {
         edges {
            node {
              coverImage {
                url
              }
              id
              publishedAt
              slug
              title
            }
          }
        }
      }
    }
  `,
    variables: {
      host: "adstrategic.hashnode.dev",
    },
  })) as QueryPostsList

  const posts: Array<Post> = publication.posts.edges.map(({ node }: { node: Post }) => node)

  return (
    <>
        <Container>
          <ul className="grid grid-cols-1 gap-0 overflow-hidden rounded-md border border-black/10 sm:grid-cols-2 md:grid-cols-3">
            {posts.map((post) => {
              return (
                <li
                  key={post.id}
                  className="cursor-pointer border-b border-black/10 p-6 hover:bg-black/10 [&:not(:nth-child(3n+3))]:border-r [&:nth-last-child(-n+3)]:border-b-0"
                >
                  <Link href={`/blog/${post.slug}`} className="mb-16 grid grid-cols-1 gap-8">
                    <Image
                      width="600"
                      height="400"
                      className="rounded border border-zinc-200"
                      src={post.coverImage.url}
                      alt=""
                    />
                    <div>
                      <h2 className="mb-5 overflow-hidden text-ellipsis border-b-2 border-gray-400 pb-5 text-2xl font-bold uppercase leading-tight tracking-wide">
                        {post.title}
                      </h2>
                      <p className="text-zinc-500">
                        {new Date(post.publishedAt).toLocaleDateString("en-us", {
                          weekday: "long",
                          year: "numeric",
                          month: "short",
                          day: "numeric",
                        })}
                      </p>
                    </div>
                  </Link>
                </li>
              )
            })}
          </ul>
        </Container>
    </>
  )
}

已尝试的解决方案 #

• 在fetch请求中添加revalidate属性：

export async function query({ query, variables, tags }: Query) {
  const data = await fetch("https://gql.hashnode.com", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query,
      variables,
    }),
    next: {
      tags,
      revalidate: 5
    },
  }).then((r) => r.json())
  return data
}

• 在博客页面路由中添加动态配置：

export const dynamic = "force-dynamic"

但以上方法都没能解决问题。

内容的提问来源于stack exchange，提问作者nicoiscoding