1

我有一个使用 getStaticProps + getStaticPaths 从无头 WP 生成页面的博客 - 一切都很好。然后我有一个连接到数据库的组件，允许我链接到任何单个类别中的任何下一个帖子。然后在 ...postSlug 页面中使用该组件。

因此，如果我切换到使用 getServerSideProps 发布帖子，基本上该组件可以完美运行，因为它会在每个帖子被请求并在服务器上构建时更新“上一个”+“下一个”URL。但是，如果我使用 getStaticProps，除非我手动刷新页面，否则组件不会使用正确的 URL 进行更新。所以我需要在组件中使用一些客户端数据获取，使用 useState、useEffect 或 SWR 或其他东西 - 但我不确定最好的方法（或者即使这可行或者我是否应该使用gServerSideProps）。

任何帮助将不胜感激。谢谢！为清楚起见，以下组件已编辑...

export default function MovePost() {
  const { usePost } = client
  const post = usePost()
  const { query = {} } = useRouter()
  const { categorySlug } = query
  const currentPaginationCursor = btoa( `arrayconnection:${post.databaseId}` )
  const { posts } = client.useQuery()

  const previous = posts({
    first: 1,
    before: currentPaginationCursor,
    where: { categoryName: `${categorySlug}` },
  }).nodes[0]?.slug

  return (
    <>
      { previous && 
        <Link href={`/archive/${categorySlug}/${previous}`}>
          <a ...

export default function Page() {
  const { usePost } = client
  const post = usePost()

  return (
    <>
      <Layout> 
          <div dangerouslySetInnerHTML={{ __html: post?.content() ?? '' }} />
        
        <MovePost />
      </Layout>
    </>
  )
}

export async function getStaticProps(context: GetStaticPropsContext) {
  return getNextStaticProps(context, {
    Page,
    client,
    notFound: await is404(context, { client }),
  })
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  }
}
4

0 回答 0