Discussion on how to load dynamic content at load time in Gatsby, including URL structure and SEO concerns.

<http://www.example.com/category/the-article-slug|www.example.com/category/the-article-slug>

<http://www.example.com/article?category=category&slug=the-article-slug|www.example.com/article?category=category&slug=the-article-slug>

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Article from "../components/Article"
import Listing from "../components/Listing"
const App = () => {
  return (
    <Layout>
      <Router basepath="/category">
        <Article path="/:slug" />
        <Listing path="/" />
      </Router>
    </Layout>
  )
}
export default App

const Category = ({ path }) => (
  <>
    <Router basepath={path}>
      <ArticlePage path="/:slug" />
      <CategoryListings path="/" />
    </Router>
  </>
);

src/pages/noise/slowly-slowly-isolation-radio-station.js

  <Router basepath={path}>
    <ArticlePage path="/:slug" />
    <CategoryListings path="/" />
  </Router>

// Implement the Gatsby API "onCreatePage". This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Loop through categories and do the following per category
  if (page.path.match(/^\/{CATEGORY_SLUG}/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = `/${CATEGORY_SLUG}/*`
    // Update the page.
    createPage(page)
  }
}