The Opinionated Guide to React 03 - ReactJS project starters
On Create React App, Gatsby and Next
Create React App permalink
- maintained by the React team
- the fastest way to get started and have some React code show up on your page
- supports most CSS pre-processors Supports PWA
- easily updatable with new features Support for SVG as React Components
- not very extensible because you don't have access to the webpack or even babel config (unless you
- Not a lot of flexibility when it comes to changing the way it handles file types
- no Server-Side Rendering (SSR) Support
- no decisions from the React team in terms of app building, so all the router, state management, and other choices will be up to you.
🤔 What is server-side rendering?
🤔 Server-side- vs client-side rendering?
- a shortcut to making server-side rendered (SSR) - supported out of the box - applications in React
- has routing and styling defaults (but you can choose your own)
- the option to change the babel config (
- get started with the CLI (
- amazing docs with lessons to follow
- customization options
a steep learning curve, mostly because SSR things are just harder
harder to leave if Next is not the best tool for your project
- you can pull data from anywhere to make static sites
- has a CLI:
npx gatsby new gatsby-site.
- huge plugins ecosystem
- amazing documentation
- flexibility to tweak Gatsby internals to your needs Export to HTML
- amazing community and team behind it
- focus on performance and accessibility
- the steep learning curve for any advanced things
- knowledge of GraphQL required to get started
- not everything can be static
- some errors only show up on build or deploy
🤔 What are the benefits of static sites?
- better SEO (the app is pre-rendered HTML, so everything gets read by Google to rank your site better)
- ease of deployment (compared to server-side applications)
🤔 How do Gatsby and Next compare?
- "When something is static, I prefer to use Gatsby. When it's server-rendered, I go with Next."
- More also here