无需重建下一个js即可获取

Question

我使用 next js，我正在尝试创建一个以 Wordpress 作为后端的静态站点，我设法使用 gitlab 部署我的站点，该站点部署到 ftp 服务器

我的问题是每次更改数据都必须重建

我不想使用 useEffect 因为它对 SEO 不利

我无法将 getStaticProps 与 next js 应用程序 14 一起使用

这是我的代码

谢谢您的帮助

我的代码：

async function fetchData() {
  const res = await fetch("fetchUrl", {
    next: { revalidate: 60 }, // Revalidation ISR (par exemple, toutes les 60 secondes)
  });
  if (!res.ok) throw new Error("Failed to fetch posts");
  return res.json();
}

`export default async function Home() {
  const data = await fetchData();

  return (
    <>
      <div className="bg-red-500">data wordpress and deploy ci/cd</div>
      <pre>{data.acf.titre}</pre>
    </>
  );
}

我希望通过以正确的方式刷新部署的网站来获取我的页面，而不影响 SEO 或性能，谢谢

Answer 1

来自 next.js 文档：

如果您在此路线的其他任何地方没有使用任何动态函数，它将在下次构建静态页面时预渲染。 然后可以使用增量静态再生来更新数据。

增量静态再生 (ISR) 使您能够：

• 更新静态内容而不重建整个网站
• 通过为大多数请求提供预渲染的静态页面来减少服务器负载
• 确保正确的缓存控制标头自动添加到页面中
• 处理大量内容页面，无需较长的下一次构建时间

示例

interface Post {
  id: string
  title: string
  content: string
}
 
// Next.js will invalidate the cache when a
// request comes in, at most once every 60 seconds.
export const revalidate = 60
 
// We'll prerender only the params from `generateStaticParams` at build time.
// If a request comes in for a path that hasn't been generated,
// Next.js will server-render the page on-demand.
export const dynamicParams = true // or false, to 404 on unknown paths
 
export async function generateStaticParams() {
  let posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: post.id,
  }))
}
 
export default async function Page({ params }: { params: { id: string } }) {
  let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}