search

robmellett / shopify-nuxtjs-starter

56 stars 6 forks source link

Question: How do you handle Shopify product/page updates for static site deployment #9

Closed adamdehaven closed 3 years ago

adamdehaven commented 3 years ago

I've been playing around with your starter project (and a sandbox project of my own, also using nuxt-shopify) and saw that you mentioned this accounts for static site generation.

I've run into a dilemma and I was wondering if you found a solution:

When generating and deploying as a static site, the product information (and in my case, store pages) are fetched on the server during the build, and then hard-coded into the static site. This is perfect until someone updates one of the Shopify pages or product info, and there is my issue.

How do you have the static content (so that it's available before hydration), but also update the site content with any new Shopify changes that occurred since the build?

Here's what I've done:

  1. I fetch all content (products and pages) in the store via the nuxtServerInit method, which sets up the data for when the first page is loaded.
  2. When the user navigates to a product or page, I trigger the fetch event to go out and retrieve all products and pages again, but on an interval (e.g. I only allow a fetch every 5 minutes).

This works; however, on the initial page load, there will be a flash of content if anything has changed. For example, if I change a product title, it will show incorrectly until the $shopify method returns the fresh data and writes it to the store. Then for the rest of the user's session, the newest data is shown.

I found a way around this by trigging a build via webhook on the host server any time certain Shopify events occur (e.g. product creation/deletion/update). Again, this works, but seems less than ideal.

Any ideas? If you have the time to help me take a look, I have a project all set up.

robmellett commented 3 years ago

Hey mate,

That's correct.

if you're using static generation you will need to rebuild your site. https://nuxtjs.org/docs/2.x/concepts/static-site-generation#updating-your-content

As you have found out, you will need a webhook to trigger the build in your CI.

All the best.

adamdehaven commented 3 years ago

Thanks for the info - I was sure I was missing something, but it sounds like I was right on track. Thanks again 👍