Next.js Discord

Discord Forum

Cache Page on first hit with external API call

Unanswered
Britannia Petite posted this in #help-forum
Open in Discord
Britannia PetiteOP
I am a bit confused: I want to fully (!) cache an SSR page that does an external call to our CMS and then returns. Right now, I am using:

export const revalidate = 86400

and unstable_cache() to fetch the data.

However, I want nextjs to FULLY cache the entire page and not just the request. Its super slow even though caching the request works. How can I fully cache the whole page but NOT build it during build time? Basically like ISR I think, but I need to be able to revalidate the external API call via tags manually

2 Replies

Britannia PetiteOP
export const revalidate = 86400
export const dynamic = "force-static"

export default async function Services() {
  const companiesByCity: {
    city: A
    places: B[]
  }[] = []

  const cities = await EXTERNAL_API_CALL()

  for (const city of cities) {
    const places = await EXTERNAL_API_CALL_2(city)
    companiesByCity.push({
      city,
      places,
    })
  }

  return (
    <div className="pt-12 md:pt-40 md:pb-12 bg-ui-bg-subtle">
      <Container className="">
        <Services companiesByCity={companiesByCity} />
      </Container>
    </div>
  )
}


Above is my simplfiied code. Why can I not get it to return Instantly if it hits the cache for the WHOLE page not just the endpoint?
Milkfish
I think this is what ppr does.
It uses isr without making the whole page dynamic.
To use it, you'll have to set it up on the next config file, and wrap the component with a suspense boundary.


Or, you can just cache the data inside of the external API call. But that won't cache the page, just the data. I think ppr would cache the page