SSG and SSR in Next.JS

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

  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

  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?

  • 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?

Notes

--

--

--

A software engineer passionate about learning and growth

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Let’s Build a MERN Stack E-Commerce Web App

React for Creating User Interfaces

Window.location

React: A Look Inside

Advanced typescript for React developers — discriminated unions

Easily Maintain HTML Partials in Webpack Based Javascript Applications

Mutability Vs Immutability In JavaScript

Mutability Vs Immutability In JavaScript

Learn by implementing React’s useState and useEffect — A simplified overview

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

A software engineer passionate about learning and growth

More from Medium

How to update Next.js' old version to the latest version?

Next.js vs React

Nextjs 12 with Antd-Less

Google reCaptcha V3 on a form that posts to NextJs API Route.