Gatsby and Next JS : My experience

Today sharing out my experience on using the frameworks Gatsby JS and Next JS

Gatsby Vs NextJS. (Image Source Google Images)

Gatsby JS:

GatsbyJS is a static site generator. It performs pre-build and returns static files (HTML, CSS, JS) as a result. This means that the back end does the server-side job once on the build stage (besides cases when the client in the browser asks for API).

Features :

  • Support Static Site Generation
  • Support Client-Side Rendering
  • Using GraphQL for data handling
  • Extensive support of in-house and community plugins
  • Using by: reactjs.org, www.figma.com

My Observations:

  • An excellent platform for creating static pages.
  • Out of the box support for Image optimizations, Code splitting( loading pages JavaScript bundle based on users request/ navigation).
  • PWA features are provided by inbuilt plugins. These libraries are really good and have a lot of support from the gatsby community.
  • Incremental static build can be used to create a dynamic website. But currently, it supports only with the gatsby cloud hosting.
  • For fetching data from APIs, it has a strong dependency on Graph QL. Even though this is can be avoided, but some feature like Image Optimizations and some plugins requires Graph QL.

My Recommendations:

Gatsby ecosystem has a strong dependency on Graph QL. The knowledge of React JS alone won’t be enough for the development team to build a website with Gatsby. From the performance perspective, it will have less time for the content paint and loads fast as the page is ready during the build time. We recommend Gatsby JS If the use cases are for static site generation alone.

Next JS

Next.js is a JavaScript framework created by Vercel. It lets you build server-side rendering and static web applications using React.

Features :

  • Support Server Side Rendering
  • Support Static Site Generation
  • Support Client-Side Rendering
  • Dynamic website
  • Incremental static site generation
  • Using by: marvel.com, hulu.com

My Observations:

My Recommendations:

We can recommend Next JS only if we have valid use cases for doing both static site generation and server-side generation. Serve side generation requires node js running in the server. The pages generated from this platform will load fast and less time for the first content paint. We also recommend creating a “hybrid” Next.js app by using Static Generation for a few pages and using Server-side Rendering for others. We can also use Client-side Rendering along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by client-side JavaScript.

Happy Reading!

A <>er

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