Prerendering

getInitialProps is the old way of handling SSR in Next.js. Now we use getStaticProps or getServerSideProps, depending on if we want SSG or SSR

There are 2 types of pre-rendering that Next offers:

• static generations - The about page is identical no matter who views that page. - Server-side rendering - HTML is generated by the server on each request.
• Client-side rendering - as vanilla React does, we can still opt to use CSR if advantageous.

In the browser devtools, we can find all of the props that are being sent from the server by filtering for _next_data. We can see the props object being passed in a <script /> tag.

• you can also filter the network requests by the same string to see the Nextjs requests that are made to get the props.

Static Site Generation (SSG)

The idea is "Why does the html need to be generated on the client, when we can leverage the server to do it beforehand? (ie. at build time)"

• this is the default, thus recommended option

If your page shows frequently updated data, and the page content changes on every request, you must use SSR.

Statically generated pages can be cached by CDN

Examples:

• Marketing pages
• Blog posts and portfolios
• E-commerce product listings
• Help and documentation

Incremental Static Regeneration (ISR)

By default, getStaticProps is run at build time.

However, sometimes we want to update static pages after we've built our site

With ISR, we can use static-generation on a per-page basis, without needing to rebuild the entire site

To do this, we add the revalidate prop to getStaticProps()

If we set revalidate to 10 (seconds), a few things will happen:

• Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
• After the 10-second window, the next request will still show the cached (stale) page
• Next.js triggers a regeneration of the page in the background.
• Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.

Server-Side Rendering (SSR)

Here, Next.js pre-renders a page on each request. It will be slower because the page cannot be cached by a CDN, but the pre-rendered page will always be up-to-date.

To use Server-side Rendering for a page, you need to export an async function called getServerSideProps. This function will be called by the server on every request.

Usage

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`<URL>`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

When you run yarn build, it generates 1 HTML document for every route on your site. Every side page, every blog post, every store item — an HTML file is created for each of them, ready to be served up immediately.

getServerSideProps is run on every request