When to use a react framework such as Next or Gatsby vs Create React App

Question

I'm in the sort of rapid prototyping phase of my React/javascript learning experience. I was wondering when folks would reach for a framework such as Next.js or Gatsby.js vs the standard Create React App.

I really dig the page based structuring and prospect for preloading links of Next.js. However, I'm not sure when you would reach for Next as apposed to CRA or even ejected CRA.

Thanks!

Answer 1

create-react-app is best for both building website and mobile apps(react native apps) because lots of learning curves available. other two are the react frameworks(we can say).

use Gatsby for single page website faster and easy to deploy. use Next.js while working with REST APIs (i guess...)

it's up to you. a good developer always find his/her way for easy and fast work.

Answer 2

I recently did a lot of research myself about this topic especially create-react-app vs Gatsby.js and I found out that Both tools let you write react code right away without worrying too much about the setup. However, Gatsby, for example, offers on top of that, server-side rendering at build time which is crucial for SEO. You don't need any server to render your views which is the case for Next.js because they are already done at build time. when a user visits your website the HTML version will be loaded first and once the javascript is loaded your website will become a fully functional react web app.

The good thing is they all share the same view layer so you can move from one tool to another. you can check moving from create-react-app to Gatsby.js which goes into details.

Answer 3

I am in the same boat. I started with CRA to create a SPA which was great to start with and get over the learning curve. But I soon realized two important issues :

1. Sharing on social networks : I was unable to change the OGP tags per route. The effect of that is, only your base route (setup correctly with OGP tags) when shared on a social network can produce the card (twitter term), any other route you share will basically show as blank. This is true for Facebook and LinkedIn as well. See here.
2. Search Engine Optimization : Though there have been few articles about search engines able to crawl your SPA correctly for indexing, in my experience it hasn't been satisfactory. For e.g. in Google I noticed that only the home page is indexed and it's not parsed correctly. Separate titles from separate elements are concatenated together. Bing, doesn't seem to have indexed it. May be Google indexed it because I have indexed the home page using Google's Search Console. It's not a feasible solution if I have to re-index manually for every new page or after an update to a page.

Create-React-App : A really good bootstrapper tool to get started with to create a SPA.

Gatsby/React-Static : Similar to Create-React-App but produces HTML build output instead thus "pre-rendering". I am yet to experiment with this. I am hopeful that this would resolve (1) and (2) since I can now have different OGP tags already in the HTML being served from a static site server (S3/Azure Blobs/Github Pages) instead of them being changed locally after the fetch. I am not sure if this will work yet. The added advantage here is, since Gatsby already pre-renders during build time, the user experiences better performance. (May be someone experienced with Gatsby can clarify, or I will edit this answer after I am done.) Update (2/19/2018) : I can confirm that (1) is solved by Gatsby.js while still hosted as a static website.

Next.js : If Gatsby doesn't solve (1) and (2), Next.js will be my fall back to create a full blown SSR app. The issue here is, now I am going to have to use PaaS to host the site (e.g. Azure Web Apps or AWS ElasticBeanStalk or Heroku) instead of a static site hosting service (Azure Blob, AWS S3, Github Pages). This will be slightly costlier and bit more work to setup CI/CD pipelines.

Also see these alternatives listed on CRA's docs.

Answer 4

I'm doing this research myself. My understanding is that Next.js provides Server-Side Rendering out of the box. Create React App does not do this so you need to provide your own solution for SSR (for things like faster page loads and SEO).