All Articles

Is Gatsby Just Static Generator?

The short answer is no, Gatsby is more than just a static generator. Did you ever heard or read the following affirmation, “use Gatsby when you need to build websites or landing pages, use something else for apps.”?

If you did, let me tell you it is wrong, you can also use Gatsby to build amazing apps, Gatsby is also a great solution for building dynamic pages, it also supports SSR on build lifecycle with gatsby-ssr.js and more, see here.

I want to give you a brief understanding of the possibilities you will have if you decide to use Gatsby, so let’s think of a very popular scenario, you might want to build an e-commerce or an app where you will have pages you need a strong use of SEO as a product page or perhaps a landing page and there will also be authentication, shopping cart or even a user dashboard, content you really don’t care much about SEO so it makes a lot of sense to make this part of your project a client-only.

Different from CRA where I see many developers using React router DOM Gatsby uses @reach/router under the hood.

Here is a Gatsby project directory tree, if you want to understand everything on it, I recommend reading the docmentation here:

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
 |-- /pages
 |-- /templates
 |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

Notice that inside src we will have directory called “pages”, this is where everything becomes pages automatically with paths based on your file name, and if you add an index.js file you will have your root path ’/’ and if you add app.js you will end app with ‘/app’, if you add dashboard.js you have ‘/dashboard’ and so on. Now, what you can do is make ‘/app’ and ‘/dashboard’ routes a dynamic page and let everything else a static pages, the product page, your root landing page and so on. So it means a Gatsby page is a hybrid app, just static + dynamic runtime and also with client-only routes.

Let’s use this sample project here where we use unauthenticated content which are all static pages and authenticated content for dashboards and so on.

Navigate to the src/pages and you will find 3 files.

  1. 404.js
  2. app.js
  3. index.js

Each one of these files will come up as a page, as we talked above, now navigate to the app.js file and there will be the following code:

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Details from "../components/Details"
import Home from "../components/Home"
import Login from "../components/Login"
import PrivateRoute from "../components/PrivateRoute"
import Status from "../components/Status"

const App = () => (
 <Layout>
  <Status />
  <Router>
    <PrivateRoute path="/app/profile" component={Home} />
    <PrivateRoute path="/app/details" component={Details} />
    <Login path="/app/login" />
  </Router>
 </Layout>
)

export default

If you have ever used CRA, there is something familiar here, we have a dynamic app with routes and pages from components, everything just as you are used to work with, all powered by gatsby and @reach/router.

Now lets go back and find the gatsby-node.js file:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = `/app/*`;

    // Update the page.
    createPage(page);
  }
};

Here we use the Gatsby API “onCreatePage” to let Gatsby know that every route beyond ‘/app/*’ is just a SPA, the routes will be handled by @reach/router. And there is also a very good plugin to make that job easier, gatsby-plugin-create-client-paths. Now you should take a moment and try to see all components in this projects, to understand what is going on, everything else is just React code.

Conclusion

Gatsby is an awesome framework and in the end, it is just React with Gatsby features and lifecycles that gives you a lot of power on what you can do and it is very good developer experience. With that said, use Gatsby for building some real apps, not just “sites”.

If I missed something, let me know in the comments below. 😃