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

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.