DEV Community

Cover image for SSG and SSR in Next.JS
MD. Mahir FaisaL
MD. Mahir FaisaL

Posted on

SSG and SSR in Next.JS

Is get Static Props only good for rendering static pages like About or Blogs

get Static Props 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.
get Static Props 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 use Effect
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 get Server Side Props instead of get Static Props

get Server Side Props fetches data at run time (when exe starts running) from server. It is server-side rendering.
It is different from get Static Props in that:
data is fetched at run time, not build time
It provides better SEO as the data is rendered on server and available for crawler
It is slower than SSG because HTML is generated at run time
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 get Static Props:
Both can provide interactivity and up-to-date information (get Static Props work well with client-side fetching!)
Main pages or at least templates are rendered on the server
get Server Side Props 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 get Initial Props different from get Server Side Props?

get Initial Props is an older method. It runs first on the server side and then it is run again on the client side ever time is it called. It is slower than get Server Side Props because the code inside get Initial Props is executed in the run time, whereas the Next JS just calls an API to run get Server Side Props 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,
ice hunter: get Initial Props has this benefit that
SSR to prefetch data on Server first for better SEO
subsequently fetching the data using CSR
grepug: get Server Side Props 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 Next JS SSR.

Top comments (0)