Gatsbyjs and create-react-app are similar in that can help you set up application and removes much of the configuration headache. However, Gatsby offers more like backed in performance optimizations and static rendering without the need for a server and a thriving ecosystem of plugins.
You might ask me "Isn't Gatsby a static site generator?".
The Answer is Yes But it offers more than that. It gives you HTML to start with then, rehydrates it into a fully-fledged React app
CRA VS Gatsby
They are similar, they work perfectly with React, they help you setup an application and they remove the configuration headache.
However...Gatsby Offers More
Zero config performance optimazations
GatsbyJS provides code and data splitting out-of-the-box. It loads your critical HTML and CSS, then prefetches resources for other pages. That way, clicking around feels so fast. Additionally, it offers things like:
gatsby-link uses an intersection observer to preload linked pages when they appear in the viewport, making them feel like they load instantlygatsby-image creates optimized versions of your images in Different sizes, loading a smaller, optimized version of an image and replacing it with a higher resolution version when loading has finished. It also uses an intersection observer to cheaply lazy load images.
Server side rendering without a serverAt build time, GatsbyJS takes all your react component with all the needed data and generates static HTML, JavaScript, and CSS files. Once the website is fully loaded it rehydrates it into a fully fledge React PWA
A Unified GraphQL Data Layer
GatsbyJS unifies all data sources into one layer using GraphQL
A rich plugin ecosystem
With GatsbyJS's flexible plugin system, it lets you bring your data source. From anywhere like CMS, database, or filesystem and makes it queriable through GraphQL.
A few Gotcha
The window ObjectIf one of your react components relies on the window object it will cause a problem when you are building the Gatsby app because the ssr step runs on a node environment. Luckily you can workaround that using the following check
const isBrowser = typeof window !== "undefined"
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,
use: loaders.null(),
},
],
},
})
}
}
You can use Gatsby without Graphql
Although Gatsby marries React and Graphql nicely you don't have to use GraphQL if you don't want to.
Here is an example
exports.createPages = async ({ actions: { createPage } }) => {
// `getPokemonData` is a function that fetches our data
const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
// Create a page that lists all Pokémon.
createPage({
path: `/`,
component: require.resolve("./src/templates/all-pokemon.js"),
context: { allPokemon },
})
// Create a page for each Pokémon.
allPokemon.forEach(pokemon => {
createPage({
path: `/pokemon/${pokemon.name}/`,
component: require.resolve("./src/templates/pokemon.js"),
context: { pokemon },
})
})
}
Where to go from here
I did a talk about the topic at Gatsby days London
You can find the slides also here
I am about to launch my course "migrate a create-react-app project to Gatsby" which will go a lot deeper in the topic and provide a step by step Guide on how you can take your existing CRA project and turn it into a Gatsby App. You can check it out here.
Cheers,
Khaled
Top comments (0)