Seo - fetch without rebuild next js

Ben
September 5, 2024
225 views
0 votes
2 Answers

I use next js and I’m trying to make a static site with WordPress as a backend, I managed to deploy my site with gitlab which deploys to an ftp server

my problem is that I have to rebuild each time to change the data

I don’t want to use useEffect because it’s not great for SEO

and I can’t use getStaticProps with next js app 14

here is my code

thank you for your help

My code :

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>
    </>
  );
}

I would like my page to fetch by refreshing the deployed site in the correct way without affecting SEO or performance thanks

Answers

- dockercompose
- September 5, 2024 at 12:55 pm
- 0 votes
0
From next.js docs:

If you are not using any dynamic functions anywhere else in this route, it will be prerendered during next build to a static page. The data can then be updated using Incremental Static Regeneration.

Incremental Static Regeneration (ISR) enables you to:
- Update static content without rebuilding the entire site
- Reduce server load by serving prerendered, static pages for most requests
- Ensure proper cache-control headers are automatically added to pages
- Handle large amounts of content pages without long next build times
Example
```
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>
  )
}
```
Here’s how this example works:
- During next build, all known blog posts are generated (there are 25 in this example)
- All requests made to these pages (e.g. /blog/1) are cached and instantaneous
- After 60 seconds has passed, the next request will still show the cached (stale) page
- The cache is invalidated and a new version of the page begins generating in the background
- Once generated successfully, Next.js will display and cache the updated page
  If /blog/26 is requested, Next.js will generated and cached this page on-demand
Login or Signup to reply.

- Harshdasila
- September 5, 2024 at 1:43 pm
- 0 votes
0
There might me two possible solutions for your problem:
1- Add a tag in fetch to re-validate path on specific operations ie. when you update your data call that particular tag to revalidate it.
-> fetch(https://..., { next: { tags: [‘collection’] } })
2- By default NextJs 14 caches your fetch response, so you can make fetch request every time you hit the API. So disable cache by adding this.
->fetch(https://..., { cache: ‘force-cache’ | ‘no-store’ })
Source – https://nextjs.org/docs/app/api-reference/functions/fetch

Login or Signup to reply.