How to configure webhook to update frontend project

Hey all,

First time user of strapi, and i’m making use of it’s cms for a backend, and next.js for a frontend. They are both deployed happily on a digital ocean droplet.

I’m getting a little bit confused with the whole refreshing data aspect. In an older website I have, i have a node.js backend, connected to a mongo db. When a user creates a new page in the cms backend, the mongo db is updated and if a user goes to the front end site a request is made to grab all the data in the pages collection so they’ll always see ‘up to date data’.

However in this new scenario, I can create a post for example in my strapi cms, but since i’m using “getStaticProps()” i understand (i think) that the data is getting loaded at the moment i build my frontend & backend, but after that no matter what happens on the cms (even though i can request the endpoint {serverUrl}/pages to see the new data), nothing will actually show up live on the site. In order for a user of the cms to update a page, and for it to be shown on the frontend, i would have to use getServerSideProps()?

OR i could use webhooks apparently? I’ve set up a github webhook following the tutorial at the bottom of this page (https://strapi.io/documentation/developer-docs/latest/deployment/digitalocean.html), which when I push code to my main branch it rebuilds both projects however I’m not sure how to configure the cms to do the same.

I.e. I’m thinking from the following page


I could set up a webhook that when a page entry gets updated, it will send off a request to github and rebuild both sites. Or am i being completely stupid?

So i have added the following which rebuilds both my backend and frontend as soon as a page has been updated-i.e if a user in the cms updates the blurb section. However, it just seems so wrong to rebuild the whole site based on trivial updates…surely there is a better way of doing this?

‘use strict’;

/**

 * Read the documentation (https://strapi.io/documentation/developer-docs/latest/concepts/models.html#lifecycle-hooks)

 * to customize this model

 */

module.exports = {

    lifecycles: {

        async afterUpdate(result, params, data) {

            console.log(result)

            const { exec } = require("child_process");

            exec("cd ~/stagStrapi/backend && npm run build && cd ~/stagStrapi/frontend && npm run build", (error, stdout, stderr) => {

                if(error){

                    console.log('error', error)

                    console.log('stderr', stderr)

                }

                exec("cd ~ && pm2 restart ecosystem.config.js", (errorEco, ecoStdOut, ecoStdErr) => {

                    if(errorEco){

                        console.log('error', errorEco)

                        console.log('stderr', ecoStdErr)

                    }else{

                        console.log('ecoStdOut', ecoStdOut)

                    }

                });

                console.log('stdout',stdout)

            });

        },

   },

}