SSG and SSR in Next.JS

Server Site Rendering and Static Site Generation

Next.js 9.3 and newer offers special functions for data fetching: getStaticProps, getStaticPaths and getServerSideProps. Before Next.js 9.3, there was a function getInitialProps used for data fetching.

I tried finding answers to the following questions to really fully understand these special functions.

Is getStaticProps only good for rendering static pages like About or Blogs?

getStaticProps fetches data at build time when the code gets compiled into exe and serves to the client the rendered HTML. It is the fastest Static Site Generation, SSG. The contents are cached on CDN, which makes it even faster.
However, it does not mean that it only servers static pages.
getStaticProps can be used with client-side fetching using libraries like react-query or swr to get up-to-date information in run-time.
e.g. the About page makes a request to extreme-ip-lookup.com to find out user's city inside useEffect

This has the advantage of

1. Super fast TTFP (time to first paint) where user can see the page loaded instantly
2. JS request, interactions will be added soon after when they are loaded and executed. The SSG pages are fast and still capable of providing up-to-date information and interactivity.

When would you use getServerSideProps instead of getStaticProps

getServerSideProps fetches data at run time (when exe starts running) from server. It is server-side rendering.
It is different from getStaticProps in that:

1. data is fetched at run time, not build time
2. It provides better SEO as the data is rendered on server and available for crawler
3. It is slower than SSG because HTML is generated at run time
4. It can be faster than CSG because it is faster to make requests from server (but then you need to send the data back to client… hmm)

It is the same as getStaticProps:

1. Both can provide interactivity and up-to-date information (getStaticProps work well with client-side fetching!)
2. Main pages or at least templates are rendered on the server

getServerSideProps is good when

• data is not static. Data needs to be fetched at run time
• SEO is important. We want the data to be pre-rendered
  e.g. Medium paid content. Users need to be authorized as a paid member to view the articles so the article suggestions are to be generated in run time. (The article itself should be available at build time though.. or the content is put together at run time?)

How is getInitialProps different from getServerSideProps?

getInitialProps is an older method. It runs first on the server side and then it is run again on the client side evertime is it called. It is slower than getServerSideProps because the code inside getInitialProps is executed in the run time, whereas the NextJS just calls an API to run getServerSideProps on the server, which then returns a JSON data to the client.

• It is the only method that runs on both server and client
• initial data-population from server: good for SEO!
• It is the only method that runs on _app.js

In the discussion thread,
@icehunter: getInitialProps has this benefit that

• SSR to prefetch data on Server first for better SEO
• subsequently fetching the data using CSR

@grepug: getServerSideProps request seems to block the transition during each transition on the client. See if this will go away in future.

Here is a long informative discussion thread on the various use cases and issues with NextJS SSR.

What is rehydration? How is it different from re-rendering?

React tries to reconcile the states during re-rendering whereas it just tries to mesh the views together in rehydration. Rehydration happens when we have some views rendered on the server side and then we fetch more data on the client side to display it.

See more in Josh’s Rehydration post

Notes

https://blog.logrocket.com/next-js-vs-gatsbyjs-a-developers-perspective/