68

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!

brc-dd
  • 10,788
  • 3
  • 47
  • 67
Vince Picone
  • 719
  • 1
  • 5
  • 8
  • Welcome to stackoverflow - nice to have you. Please read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) to help keeping stackoverflows content on the highest possible level and increase your chances getting an appropriate answer. Your question is way too broad because to answer one should know your specific requerements. – Axel Sep 02 '17 at 02:30
  • 5
    I was hoping to get some insight into exactly what use cases would cause someone to reach for a framework such as next. I don't necessarily have a specific use case in my mind. I was more hoping to precipitate that kind of knowledge from answers here. – Vince Picone Sep 02 '17 at 02:41
  • Really just a suggestion: google "React vs Next.js vs Gatsby.js" (or something similar) and then ask all the specific questions that are still unclear afterwards or in between... – Axel Sep 02 '17 at 02:57
  • @Axel I googled it and then it took me here. – norbekoff Sep 21 '22 at 10:26
  • @norbekoff kinda funny, isn't it...? – Axel Sep 22 '22 at 10:51

4 Answers4

28

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.

dparkar
  • 1,934
  • 2
  • 22
  • 52
  • 3
    Gatsby or Next.js, if properly configured, will definitely solve your two issues. I recommend [react-helmet](https://github.com/nfl/react-helmet) for managing meta tags, it's part of most Gatsby starters. – chmac Feb 19 '18 at 13:57
  • 3
    Great answer~! I'm in this stage(making decision about which framework to pick up). This topic is worth of an Article! So if you could write it in details as a standalone article, please share it with us~! Charts, data, figures are highly appreciated! Thanks. – Franva Mar 26 '18 at 23:56
12

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.

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
Khaled Garbaya
  • 1,479
  • 16
  • 20
2

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).

typeoneerror
  • 55,990
  • 32
  • 132
  • 223
  • I know this was answered in 2016, but the answer was not accurate then as it is not now. SSR is not required for SEO. See [here](https://medium.freecodecamp.org/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9) for a great article debunking that myth (written before this answer was posted). CRA supports code-splitting which speeds up page loads. Hopefully your research brought you to a better understanding... – smallstepstoday Dec 11 '17 at 15:12
  • 1
    @smallstepstoday I was not aware of this, thank you for the reading material! – typeoneerror Dec 12 '17 at 16:50
  • @smallstepstoday after reading the article, I still think it is an issue. perhaps the article hadn't been updated when you first read, but I was linked to https://news.ycombinator.com/item?id=12759605 – typeoneerror Dec 12 '17 at 16:52
  • @typeonerror There has been debate over the years, but a lot of really well-informed people in a lot of leading SEO companies say differently. I don't think it is worth continuing the debate here. Having said that, here is another [good example](https://moz.com/community/q/does-google-and-other-search-engine-crawl-meta-tags-if-we-call-it-using-react-js) of what I am talking about. – smallstepstoday Dec 16 '17 at 01:35
  • 3
    One last comment... I was just on Google Structured Data Testing Tool, testing a React application that I now have online. I am adding Json+LD scripts dynamically within specific React components. The tool correctly recognizes these scripts, even though they are created outside the initial index.html. The tool inserts a comment before the dynamically added scripts as follows: To me this validates what the others are saying. – smallstepstoday Dec 16 '17 at 21:19
-3

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.