Create Client Only Routes (Dynamic Pages)

Often you want to create a site with client-only portions, which allows you to gate them by authentication or load different content based on URL parameters.

You can create a client-only route page in two steps:

1. Create a main entry point page manually. In our example we would like to have a few client-side pages a /app/details page and a /app/profile page. Our entry point page should /app.

2. Configure Gatsby to navigate to the client only routes.

In your gatsby-node.js file

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/app/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = '/app/*'
    // Update the page.
    createPage(page)
  }
}