Today sharing out my experience on using the frameworks Gatsby JS and Next JS
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:
- A reliable platform for creating static and serve side pages. Good community support.
- Out of the box support for Image optimizations, Code splitting( loading pages javascript bundle based on users request/ navigation).
- PWA features and not provided by default. Have to use the open-source library like — https://github.com/shadowwalker/next-pwa#readme — Connect to preview and https://github.com/hanford/next-offline — Connect to preview. These libraries are really new and have not much support from the next js team.
- Incremental static site generation is really a good feature for making a static site dynamic.
- The dependency of node js server: Next js allows you to export your app to static HTML, which can be run standalone without the need for a Node.js server. But this is intended for scenarios where none of our pages have server-side or incremental data requirements.
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!
