CRA vs Next.JS vs Gatsby

If you’ve developed with React, chances are you learned using Create React App — the command line tool developed by Facebook that allows users to generate a new React App and utilize a preconfigured Webpack build. This makes it incredibly simple to start a new app and get straight to coding functionality rather than focusing on configuring build scripts.

Today we’re going to take a quick look into the differences provided by Next.JS and Gatsby, two alternative tools to build React Applications with.

CRA

Create React App is definitely the first place to start as a beginner or someone doing more exploring and experimenting.

Pros:

1. Super simple set up to create Single Page Applications using React.
2. Full Client Side Rendering is great and easy to learn.
3. Server and Client code are completely separated.
4. Easy to deploy — as the build creates static files.

Cons:

1. Can end up very heavy / lower performance if not carefully built.
2. Can result in slow loading times / performance.
3. Manual set up for routing, state management, code splitting, etc.
4. Can’t be used for public sites that need SEO (Search Engine Optimization).

Next.JS

Next.js is a popular and powerful React framework meant for static, server side rendered applications. It’s great for public sites that need SEO, and have dynamic content.

Pros:

1. Pre-rendering server side — fast loading times and highly dynamic.
2. SEO capable for sites that need Search Engine Optimization.
3. Zero Configuration — styling and routing configs right out of the box.
4. Best DX out of the 3 options (WebPack support, Fast Refreshing, Error Handling).

Cons:

1. More complex to learn and use than CRA.
2. Lack of built in support for layouts.
3. Limited plug-in availability.
4. Server side rendering adds extra complexity to building.

Gatsby

Gatsby is not just a static site generator — it’s a Progressive Web App Generator. With Gatsby users can build public facing apps that are content heavy, top notch SEO, and super fast performance.

Pros:

1. Fast Performance due to static website generation.
2. Powerful SEO capabilities.
3. Deploy easily to CDN.
4. Awesome plug-in ecosystem.

Cons:

1. More complex than CRA — will need GraphQL and Node.js knowledge.
2. Heavy configuration required.
3. Longer build times with more content.
4. Debugging plug-in issues can be difficult.

Conclusion

While each option has it’s own pros and cons, and much different best use cases, I will personally be exploring Next.JS more moving forward for its configuration, performance, and deployment capabilities.

Cheers, I’ll see you again soon!