Next.js Discord

Discord Forum

Next 13/14's way to make SSR, SSG and ISR

Answered
Virginia's Warbler posted this in #help-forum
Open in Discord
Virginia's WarblerOP
Is this tutorial correct? https://www.youtube.com/watch?v=g0Jc5D6tiCo&t=282s

That in the past, you have these functions with special reserved names for:
- SSR: getServerSideProps
- SSG: getStaticProps & getStaticPaths
- ISR: 
function getStaticProps() {
  // ...
  return {
    props: { THE RESULT },
    revalidate: 1
  }
}

has been totally replaced by:
fetch (URL), {
  cache: "force-cache", // SSG
  cache: "no-store", // SSR
  next: {revalidate: 1} // ISR
})


BUT, I am unsure about how correct he is and I got a few questions
- I checked the documentation for fetch https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters . Regarding the new way to do ISR: I dont see a field called next in fetch > parameters > options
- Does it mean that the old reserved functions like getServerSideProps, getStaticProps & getStaticPaths are completely scraped? (ie: they wont work anymore in version 13+?)
- Im checking the NextJS documentation https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props , it is not consistent with the Youtube tutorial. They are still using getServerSideProps and I dont cache: force-cache being used. The closest thing I see is res.setHeader( 'Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59' ) https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#caching-with-server-side-rendering-ssr

SO, in conclusion, I want to ask: What is the correct way of doing SSR, SSG and ISR in the newest versions of NextJS nowadays?
Answered by joulev
1. fetch: In the app router, fetch is monkey-patched to add that additional next option: https://nextjs.org/docs/app/api-reference/functions/fetch
2. No. They work in the pages router. In the app router they don't work, because there are alternatives, as you already know.
3. See point 2. You are looking at the pages router documentation, where getServerSideProps and similar functions still work.
View full answer

8 Replies

@Virginia's Warbler Is this tutorial correct? https://www.youtube.com/watch?v=g0Jc5D6tiCo&t=282s That in the past, you have these functions with special reserved names for: - SSR: `getServerSideProps` - SSG: `getStaticProps` & `getStaticPaths` - ISR: function getStaticProps() { // ... return { props: { THE RESULT }, revalidate: 1 } } has been totally replaced by: fetch (URL), { cache: "force-cache", // SSG cache: "no-store", // SSR next: {revalidate: 1} // ISR }) BUT, I am unsure about how correct he is and I got a few questions - I checked the documentation for `fetch` https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters . Regarding the new way to do ISR: I dont see a field called `next` in `fetch` > `parameters` > `options` - Does it mean that the old reserved functions like `getServerSideProps`, `getStaticProps` & `getStaticPaths` are completely scraped? (ie: they wont work anymore in version 13+?) - Im checking the NextJS documentation https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props , it is not consistent with the Youtube tutorial. They are still using `getServerSideProps` and I dont `cache: force-cache` being used. The closest thing I see is `res.setHeader( 'Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59' )` https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#caching-with-server-side-rendering-ssr SO, in conclusion, I want to ask: What is the correct way of doing SSR, SSG and ISR in the newest versions of NextJS nowadays?
joulev
1. fetch: In the app router, fetch is monkey-patched to add that additional next option: https://nextjs.org/docs/app/api-reference/functions/fetch
2. No. They work in the pages router. In the app router they don't work, because there are alternatives, as you already know.
3. See point 2. You are looking at the pages router documentation, where getServerSideProps and similar functions still work.
Answer
joulev
In the documentation, there is this dropdown which allows you to see the documentation for the two routers. You can use either, or both, of them in your app.
Virginia's WarblerOP
And just a follow up question: How can you chose to use app router?
I dont remember seeing an option for that in create-next-app
Or is it a setting I should make somewhere, eg in package.json...?
@joulev
joulev
there should be a prompt in create-next-app
Virginia's WarblerOP
Thank you