Static Site Generation+
Client Side Rendering+
Gatsby.js vs. Next.js | First impressions with the best react framework tools currently!
During the last couple of months, I have been doing all my professional work in two very popular frameworks. One being Gatsby.js and the other one Next.js. After spending countless hours learning, experimenting, and working with both tools, I think it's finally time for side by side comparison of them both to see their individual benefits and their pitfalls.
Why not use create-react-app?
The first thing you might be asking yourself is, why you should use a framework on top of your react-application? But the answer to this question is very straight forward - SEO!
Although this fact made many people question React as a web dev tool, the solution to this issue has been found - and it's called Next.js. and Gatsby.js.
Should I start with Next.js or Gatsby.js?
It's hard to say! I don't know the answer since it will be based on your personal preference. If you're new to React I would actually say that Gatsby is a bit easier to understand at first. I think the documentation is done best at Gatsby.js and you will quickly see many results since you're working with static site generation. On the other hand, I would probably suggest you take a look at Next.js if you're already familiar with React. I would say the workflow is more intuitive to a trained react developer.
Would your client prefer Gatsby.js or Next.js?
This is a matter of your client's opinion. I have created a little list to show some of the things I would keep in mind when deciding what framework you should go with:
Why you should choose Gatsby.js
- Your client wants to build a blog, portfolio page, or similar.
- Your client wants large files like images, videos, animations, etc. displayed on their page.
- Your client is really focused on good results from a Lighthouse report.
- Your client cares about the amount of API-calls to your database, due to costs.
- You don't have to worry (that much) about Image sizes, optimization, etc. as a developer.
- Gatsby has an amazing plugin library for almost everything!
Why you should choose Next.js
- Your client wants to create an eCommerce platform or a page with dynamic content.
- Your client wants searchability on their page (Can be made with Gatsby.js - but's it's a bit tricky).
- Your client wants to see the changes fast after they change something in the backend.
These are the factors I could imagine that you would find yourself asking your client after having worked with these frameworks for some time. All clients are different but from the list above there's one major reason why your customers would prefer Next.js rather than Gatsby.
This is why your client would prefer Next.js
Personally, I think that Gatsby.js has a lot of great benefits, that would make this framework the winner of this comparison - but, the fact that you can't see the changes in the frontend immediately after you change something in the backend is a major pitfall, that would make most of your clients prefer Next.js. Gatsby has however invented what they call "Gatsby Cloud" which generates extremely fast builds. This will allow you to see changes in real-time.
It takes you a little longer to set up - but can be done - and with content management systems like Sanity.io, you can even integrate this into your backends preview. If you cannot integrate it to your backend you have to let your client know that they have to visit a page named something like "preview-your-page-name.gtsby.io" to see the real-time changes happening. This can't be a bit confusing to most customers, so I would suggest you ask them what they would prefer, explaining to them all the benefits they gain with gatsby. One more thing is that they only have 100 Real-time edits a month on the free plan - and to upgrade you have to pay. I haven't tested this, but most often companies only post something 1-5 times a month, so maybe this wonøt be a bother for your client.
I hope you found this helpful. Kodex CPH is a company who are specialist in design modern and blazing-fast websites, so please let us know if we can help you in any way.
SQL vs NoSQL: Critical Differences you need to know!
Published at: 2020-11-17
A professional web development workflow in a small team?
Published at: 2020-11-16
What can you do to get a faster website? Tips for beginners and advanced developers.
Published at: 2020-04-20
What is the Pomodoro technique?
Published at: 2020-04-13
Four Day work week
Published at: 2020-04-11
Published at: 2020-04-10
Gatsby.js - Is static generated websites a technology of the future?
Published at: 2020-04-09
The basics of statically generated websites.
Published at: 2020-04-09
What is Netlify
Published at: 2020-04-08
First impressions of Sanity as a content management system
Published at: 2020-04-07