Unlocking Dynamic Power in Static Sites
The Challenge: Breathing Life into Static Pages
As a developer, I’ve always been fascinated by the potential of static sites. But, I’ve often wondered: can we make them more dynamic? Tanmai Gopal’s talk on making static React sites dynamic sparked an idea. What if I could use Gridsome, a Vue-powered static site generator, to build a site that updates in real-time?
The Solution: Leveraging Hasura and Netlify
I decided to put my Gridsome-built blog to the test. I have a list of books I’ve read, stored in a GraphQL API. I want to use this data source to dynamically update my site whenever I add or remove a book. To achieve this, I’ll combine the power of Hasura, a fast GraphQL server, with Netlify’s event-driven architecture.
Getting Started
First, I installed the Gridsome CLI tool and created a new project. Then, I deployed it to Heroku and set up a Hasura API Explorer. Next, I created a table called “books” with columns for id, name, and author.
Querying Remote GraphQL Sources
To query my remote GraphQL source, I installed the Gridsome source plugin and edited my gridsome.config.js file. I then navigated to the src > pages > About.vue file, where I wanted to display the data. Using GraphQL, I queried the author, id, and name from the books table.
Displaying Dynamic Data
To display the data, I added a page query and used the $page.books variable to access the query response. I then parsed the data using the v-for directive, storing each value in the book variable. Finally, I displayed the book author and name using Vue’s templating engine.
The Magic of Hasura Event Triggers
But here’s the catch: when I deploy the app, only the data available at deploy time is displayed. To solve this, I leveraged Hasura Event Triggers to trigger a Netlify build whenever I insert or delete a row in the books table. This ensures that my site updates dynamically, reflecting the latest changes to my data source.
The Result: A Dynamic Static Site
With Hasura Event Triggers and Netlify, I’ve created a static site that updates dynamically. Whenever I add or remove a book, the site rebuilds, reflecting the latest changes. This solution opens up new possibilities for static sites, allowing them to respond to changes in real-time.
Explore Further
Want to learn more? Check out the full repo on my GitHub and feel free to tweet me any questions. And if you’re interested in helping shape the future of content on LogRocket, join our Content Advisory Board!