In the past my de facto choice for building react apps has always been Facebook’s create-react-app. It makes react app development fast an easy with out-of-the-box build configuration and deployment, flawless hot reload, PWA features, and starter code. You simply need to add your components and routing rules and you are ready to deploy, super simple!
While create-react-app shines in ease of use, it has certain limitations:
- You must completely implement your own routing
- Conforming to present webpack configurations (or eject)
- Large bundle size
Specifically w.r.t SEO and page load speeds, I started looking for a viable alternative. Honestly, not really looking because I’ve seen you around the block for a while now, GatsbyJS. It just became clear to me that it was time for us to get introduced more closely 😉.
For about 3 weeks now, I have been working with GatsbyJS and here are my initial thoughts on the framework coming from my previous create-react-app background. I started with gatsby-starter-default and my experiences are relative to this starter code.
Differences
GatsbyJS uses GraphQL for accessing data. In fact, GatsbyJS makes a clear identification of data as being a fundamental 4th part of your app (in addition to html, js, and css). It takes a little bit of practice to learn to use this feature, but once you do, it becomes the feature that elevates GatsbyJS to a whole new level. You can use it, for example, to pipe your markdown documents to react pages making it a great framework for blogging and documentation. Compared to create-react-app, achieving the same behavior requires additional packages and logic.
Directory structure. Unlike with create-react-app, public directory is fully generated code. You should implement all your work in src directory. If you have a need to include files that do not need to bundling, you can add static directory in the project root and it will be copied as-is to your public directory during the build cycle.
All additional features are plugins. If you have been working with create-react-app before, you must retrain your brain to look for the right plugins when you need extra functionality. My favorite plugins so far are gatsby-plugin-react-helmet for SEO tagging and gatsby-plugin-sitemap that automatically created a sitemap for my react app.
With GatsbyJS you get routing out of the box. Anything you add to src/pages becomes a navigable route. When you are working with a react app that has multiple pages, GatsbyJS makes it really easy to add pages quickly.
Component bundling. I have not yet got deep enough to comment on this feature at a knowledgeable level, however, it is very apparent from just observing the generated output from the build command that GatsbyJS and create-react-app handle source code bundling very differently.
So far I have not been able to fully utilize React Cosmos with GatsbyJS. If you are not familiar with react cosmos yet, you should check it out. It is a really nice tool for developing react components in isolation. My favorite feature is using it to build responsive components where I can check the appearance of each components in different screen sizes. This is a really useful feature and works great with create-react-app. I was able to configure react cosmos with GatsbyJS for components, but not for full pages. Also the amount of documentation on how to configure it correctly was lacking to say the least.
Choices, Choices…
While my experience with using GatsbyJS has been great, it does not mean it is a one-size-fits-all solution.
Based on the project requirements, I will probably continue to choose create-react-app over GatsbyJS when I want to prototype things quickly or build truly single page apps, or for apps that have complicated routing rules so I can customize them myself. GatsbySJ is a great option for apps with several pages with simple routing requirements, markdown data, and for blogging etc. It also appears to be a good choice when SEO and page load speeds are high priority.
Overall I highly recommend learning GatsbyJS as an alternative way of building react apps. It will give you the ability to choose the best tool for the job, not just defaulting to the one and only way you know.