Meta-frameworks

Remix & Gatsby

Two React meta-frameworks, two philosophies. Remix: nested routes with per-route data loaders. Gatsby: a GraphQL data layer that unifies every source into one query.

Remix · Demo 01

Nested routes load data in parallel

Interactive simulation

Remix maps nested URLs to nested layouts, and each layout has its own loader. The clever part: Remix fires all the loaders at once, in parallel — no request waterfall. Press load to watch them resolve together.

/sales/invoices/2024 → 3 nested loaders

root.tsx · /idle
sales.invoices.tsx · /sales/invoicesidle
$year.tsx · /2024idle

// app/routes/sales.invoices.$year.tsx
export async function loader({ params }) {
  return json(await getInvoices(params.year))
}
export default function Year() {
  const invoices = useLoaderData()   // data ready on first paint
}

Gatsby · Demo 02

One GraphQL layer over everything

Interactive simulation

Gatsby pulls Markdown, a CMS, JSON and APIs into a single GraphQL data layer. You query it like one database. Toggle fields in the query and watch the result update.

Query (click fields to toggle)

query { allPost { nodes { title author date readingTime } } }

Result

// every source plugin feeds the same GraphQL schema
export const query = graphql`
  query { allMarkdownRemark { nodes { frontmatter { title } } } }
`

Gatsby · Demo 03

Source plugins → unified schema

Interactive simulation

Each gatsby-source-* plugin adds its data to the same graph. Click sources to plug them in and watch the unified node count grow.

gatsby-source-filesystem gatsby-source-contentful gatsby-source-shopify gatsby-source-graphql

unified GraphQL graph

queryable nodes

Demo 04

Remix vs Gatsby — when to reach for which

Both build on React, but optimise for different things.

Remix

Server-rendered, dynamic, form-heavy apps. Loaders + actions per route, web-standard requests, fast mutations. Great for dashboards & apps with live data.

Gatsby

Static-site generation from many data sources via GraphQL. Pre-built pages, image pipeline, big plugin ecosystem. Great for content sites & marketing.

Demos are interactive simulations built with vanilla JS — Remix and Gatsby run via a build step / Node server and can't execute inside a static page. The real Remix loader and Gatsby GraphQL code is shown in the dark code blocks above.

↑ All 64 tools