SSG and SSR in Next.JS

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

  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)
  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
  • 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
  • SSR to prefetch data on Server first for better SEO
  • subsequently fetching the data using CSR

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.

Notes

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sherry Hsu

Sherry Hsu

311 Followers

A software engineer passionate about learning and growth