getServerSideProps

[distant folio]

afaik this is getServerSideProps, what's the equivalent of this in nextjs 14+

[winged nest]

Hi @distant folio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js 14+, the traditional data fetching methods like getServerSideProps and getStaticProps used in the pages directory have been replaced with a simpler API built on top of fetch() and async React Server Components inside the app directory.

For example, the equivalent of getServerSideProps would be a fetch request with the cache option set to no-store. This indicates that the fetched data should never be cached and should be refetched on every request, similar to how getServerSideProps works.

Here's an example:

export default async function Page() {
  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`<https://...`,> { cache: 'no-store' })

  return <div>...</div>
}

You can find more information about this in the Next.js documentation (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@distant folio Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[distant folio]

@winged nest So fetch requests are cached by default? Or do I have to enable it, I want heavy catching for fetch requests

[winged nest]

Let me check the knowledge base for you again. Give me one moment! :books:

---

Yes, by default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. This means that the data can be fetched at build time or request time, cached, and reused on each data request. Here's an example:

// 'force-cache' is the default, and can be omitted
fetch('<https://...',> { cache: 'force-cache' })

However, there are exceptions. fetch requests are not cached when:

• Used inside a Server Action.
• Used inside a Route Handler that uses the POST method.

You can also control the caching behavior using the fetchCache option in your layout or page. Here are some options:

• 'auto' (default): The default option to cache fetch requests before dynamic functions with the cache option they provide and not cache fetch requests after dynamic functions.
• 'default-cache': Allow any cache option to be passed to fetch but if no option is provided then set the cache option to 'force-cache'. This means that even fetch requests after dynamic functions are considered static.
• 'only-cache': Ensure all fetch requests opt into caching by changing the default to cache: 'force-cache' if no option is provided and causing an error if any fetch requests use cache: 'no-store'.
• 'force-cache': Ensure all fetch requests opt into caching by setting the cache option of all fetch requests to 'force-cache'.

You can find more information about this in the Next.js documentation (https://nextjs.org/docs/app/building-your-application/caching#data-cache).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: