Dynamic Content with Gatsby and WordPress

Gatsby is a static site generator, but it can also do dynamic content. It’s built on React, so you can use all the dynamic stuff in React along with your static content.

This creates what could be the perfect pairing for a lot of websites. Static content for speed, scalability, security, and SEO, with some dynamic content sprinkled in when necessary.

The comments on this site are dynamic, they use Apollo to fetch comments from WPGraphQL after the post loads. This is baked into the Publisher theme.

Proof of Concept: Fetch New Posts Dynamically

Another concept I was playing around with is grabbing new content instantly instead of waiting for a static build to finish.

If you had a news site, and a new story breaks that has to get out right away, this post would show up the instant it is published dynamically. If you then did a static build, as soon as the static build is deployed, that post would be static.

This is done using Apollo and a dateQuery. Here’s the idea:

• Build the static files as usual, and deploy.
• A new post is published, we get this post and display it dynamically at the top of the post list.
• A new static build finishes, the new post is embedded statically.

If you have a short build time, this isn’t that big of a deal. But you could use this same concept to get cart items, urgent notifications, or any other dynamic content.

Here’s a video, there’s a gist with code below.

Here’s the code I used, keep in mind this is in the context of the Publisher theme, it won’t work to just copy/paste this into your theme.

It’s just a proof of concept, you could do a lot to optimize this, like reset the dateQuery each static build and pre-load any dynamic posts so there is no jumpiness.