Dynamic pages at load time, not build time

user_12208525 0
Viewed 65

I'm building an editorial site that regularly adds new content. As such, they've requested that articles and article content is loaded in at load time rather than having to run a build and wait for it. The speed is quite important for them and even after spending some time optimizing the build speed, they need it quicker.

I have the articles pulling in fine using the sanity client, but when you click on an article it's looking for the-slug-of-the-article.js rather than some kind of article page. If I could have it load something like article.js I could use the slug param from the URL to grab the page content, but I'm not sure how to actually load the page instead of the-slug.js without changing the URL structure.

To make things a bit more confusing, there's actually a category in here too, so the URL looks like: www.example.com/category/the-slug-of-the-article

sanity gatsby reactjs node.js javascript
1 Answers

Short answer: you can't build dynamic pages at "load" time using a static site generator.

TL;DR

I assume that you are generating a final client site. Otherwise, you can achieve what you are trying to do using an EC2 instance of AWS (or similar in any other service) that runs a gatsby develop. Gatsby enables a feature to refresh the content automatically sending a curl request to its own domain with the __refresh URL parameter. For its own behavior, of course, it's only available in gatsby develop:

curl -X POST http://localhost:8000/__refresh

To do so, you will need to able ENABLE_GATSBY_REFRESH_ENDPOINT environment variable, so you will need to adapt your running commands.

Of course, gatsby develop won't refine and build the "final" static site, without all SEO, code improvements nor asset optimization as gatsby build does, so this approach may work only for testing purposes.

In your case, Sanity adds a watcher that makes this work easier for you. You will only need to enable the watchMode flag like:

{
  resolve: `gatsby-source-sanity`,
  options: {
    projectId: `abc123`,
    dataset: `blog`,
    token: process.env.SANITY_TOKEN,
    graphqlTag: 'default',
    watchMode: true,
  },
},

Note: by default is set to false.

If it's not your case and you want to build a static site and show "live" content as soon as an article is published you will need to configure webhooks between your CMS (where the articles are written) and the server.

Basically, a webhook is an action that throws/notifies another action in the server. For example, as soon as an article is published in the CMS, the webhook will notify the server to run a deployment to publish the article. Of course, this action will take some time, depending on your project's size and the code optimization, from tens of seconds to up +15 minutes (in the worse cases).

The webhook implementation will depend and rely on the CMS and the server but more or less all of them are quite similar.

Keep in mind that you are serving static content that needs to be compiled, bundled, and built, that's why Gatsby is so fast (and all the static site generators indeed) so you can't bypass this process in a final client site to show "live" articles using this technology.

user_55853710
Related