Beyond Static

Gatsby + Apollo for Fully Dynamic Apps

by Jason Lengstorf
@jlengstorf  ·  jason@gatsbyjs.com

Slides: git.io/beyond-static

Jason Lengstorf
  • Developer 🥑
  • Currently: Gatsby
  • Formerly: IBM
  • Portland, OR

You should use GraphQL for everything and serve your entire app as static assets

Development today isdifferent

The monolithic CMS is dying

The future is thecontent mesh

The content mesh.
The content mesh.

This is amazing

  • Manage data using purpose-built tools
  • Load data from anywhere using APIs
  • Build custom UIs that combine multiple data sources

This is terrible

  • Atrocious performance pitfalls
  • Complex business logic to combine data sources
  • UIs can become tightly coupled to back-ends
  • State management leads to nightmarish complexity

Also: async is hard

Page jumping during load.

How to tame the Content Mesh

  • Centralize data access with GraphQL
  • Serve only optimized static assets

Centralize data with GraphQL

  • Better explorability
  • Single source of truth
  • More scalable & team-friendly
  • Consistent, shareable dev workflow

Go Static for everything

  • Blazing fast performance
  • Simpler deployment flow
  • Reduced DevOps overhead

How this works in Gatsby

  • Node APIs to load any data source into GraphQL
  • “Early bind” data at build time
  • Generate static assets
  • Automate performance tuning
  • Deploy to a CDN (e.g. Netlify)
  • Rehydrate to a React app in the browser

Make the Right Thingthe Easy Thing

Design your tools so the laziest, shortcuttiest,
under-the-gunniest decisions a developer can make
will still result in an excellent user experience.

But...

“Isn’t Gatsby a static site generator?
My app has dynamic data!”

static assets !== static apps

React apps are dynamicGatsby sites are React apps

Something something transitive property...Gatsby sites are dynamic

The Content Mesh with Gatsby.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.
The Content Mesh with Gatsby.

Example: Gatsby’s Swag Store

The Gatsby Store.store.gatsbyjs.org

Static Data Loaded at Build Time

The Gatsby Store.store.gatsbyjs.org

Dynamic Data Loaded at Run Time

The Gatsby Store.store.gatsbyjs.org

Client-Only Routes for User Pages

The Gatsby Store.store.gatsbyjs.org

Data Loads Asynchronously

The Gatsby Store.store.gatsbyjs.org

💻 Live Demo

Let’s build a dynamic app in Gatsby.

github.com/jlengstorf/gatsby-with-apollo

Try it yourself:
gatsbyjs.org

You should use GraphQL for everything and serve your entire app as static assets

Thanks!

Jason Lengstorf

Jason Lengstorf
Follow me on Twitter: @jlengstorf

Resources

  1. The Journey to a Content Mesh
  2. Gatsby
  3. Apollo
  4. Gatsby with Apollo Demo
  5. Gatsby’s Swag Store
  6. Swag Store Source Code
  7. Store API Source Code