Gatsby Vs. Next.JS Vs. CRA (Create React App)
2018 brought with it some really cool and novel concepts in web development — Server side rendering, static site generation, code splitting etc. and with that came a lot of confusion, miscommunication and misunderstood concepts. There was already a big debate going on between VueJS, Angular and React and suddenly there is Vulcan, Nuxt, Next.JS, Gatsby etc. to steal the thunder of these biggies and confuse the hyper active web developers who want to stay on the cutting edge of technology and plunge them more towards the edge.
Combine that with headless CMS (contentful and content stack), headless ecommerce (moltin and snipcart), PWAs — the whole scene has turned into a big mess with selection of a technology to get the job done on a particular project has become more time consuming than to actually develop the project.
Our developers (at Myrl Tech — www.myrl.tech) spend a serious amount of time beating each other up and trying to make their preferred stack win and we all feel like kids at a candy store. We have come to the conclusion that Gatsby, NextJS and CRA are serious technologies and can get the work done and Gatsby and NextJS both use ReactJS at the heart, thereby raising questions at the management level — wasn’t ReactJS high tech enough? why do you want to again relearn and rebuild everything? the break neck speed at which this particular community is re-iterating its products and technologies is scary and hard to keep a track of.
So let’s narrow down our debate to the question that is going to trouble almost all tech product companies in 2019 — how to decide which one to use amongst Gatsby, Next.JS and CRA?
Let’s approach this from four different angles —
- Size , Speed and Performance
- Learning Curve
- Frequency of data changing
- Community support and growth
Before we compare them, let’s understand how the three differ — CRA is a client side rendering technology which makes it a stupid choice if you want great SEO on your website (who doesn’t want great SEO in 2019?). Gatsby is a static site generation technology and creates static pages of the entire website and then pushes them to the browser, there by making it super fast and at the same time very SEO friendly. Next.JS is a server side rendering technology, which is basically the complete opposite of how React works and hence renders everything on the server itself.
Gatsby and Next.JS shine in the speed, size and performance round and this is the reason they were created in the first place — to make websites even faster.
Learning curve — ReactJS is popularly touted as one of the easiest libraries to learn, Gatsby isn’t far behind in ease of learning. It’s Next.JS that is considered by many as a sort of a monster to learn
If you data changes a lot, it is definitely not worth having Gatsby on the project, due to the fact that it creates a static page and sends it to the browser, this means it will have to keep generating static pages everytime the data changes in your app and hence seriously increasing the load on your servers’ computation power. In this case, CRA is great but Next.JS is even better and faster.
Community support — Gatsby has a great community, and we all know CRA’s community is supported by Facebook, it’s Next.JS that has been seen to lack here with many people on youtube complaining about a bad experience while developing with Next.JS
When will the search for the perfect platform ever end, you ask? Never — is what I say. We’re all still searching hard and hopefully we will find that one technology that has it all :)
If you’re a company struggling with tech and need a tech product development team to partner with, we’re available, do check us out — www.myrl.tech
