SSG and SSR in Next.JS

MD. Mahir FaisaL — Sun, 06 Mar 2022 05:39:22 +0000

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

Super fast TTFP (time to first paint) where user can see the page loaded instantly
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.

Build a Next.js Website in 4 Steps

MD. Mahir FaisaL — Fri, 25 Feb 2022 17:21:52 +0000

Carson Gibbons is the Co-Founder & CMO of Cosmic JS, an API-first Cloud-based Content Management Platform that decouples content from code, allowing devs to build slick apps and websites in any programming language they want.
In this blog I will show you how to pick up an existing website example and curtail it into your own, beautiful Next.js website for publishing content and easy updates. This React Universal Website is built using the Next.js framework. Code is shared between the client and server making development a breeze. Add Cosmic JS-powered content and you’re taking your website to the Next.js level.
Next.js is an amazing new addition to the React open-source ecosystem. It is “a minimalistic framework for universal server-rendered React applications” that makes the process of building these types of applications much faster and easier.
If you haven’t already, get started by Signing Up for Cosmic JS. Helpful resources are provided below to streamline your development operations.

CREATE A NEW BUCKET
Your bucket’s name is the name of your website, project, client or web application that you are building.
INSTALL THE NEXT.JS APP
Once you’ve signed up and named your bucket, you’ll be prompted to start from scratch or “see some apps”. For this blog I simply clicked the right button to “see some apps” so that I could begin the installation process for the Next.js Website.
DEPLOY TO WEB
I clicked “Deploy to Web”. I can then start editing my Global Objects, Object Types and Pages while my web application is deploying. You will receive an email confirming the deployment of your web application. If you encounter any issues during deployment, you may be routed to the Cosmic JS Troubleshooting Page.
EDIT GLOBAL OBJECTS, OBJECT TYPES AND OBJECTS
Editing is a dream come true in the Cosmic JS Dashboard. To read more about how Cosmic JS was built with editing content in mind, read Building With the Content Editor in Mind.

DEV Community: MD. Mahir FaisaL

SSG and SSR in Next.JS

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

When would you use get Server Side Props instead of get Static Props

How is get Initial Props different from get Server Side Props?

Build a Next.js Website in 4 Steps