Nuxt3: Strapi Content not Updating on Production Server

Questions and Answers
1

I am currently working on a site (mbmobilesauna.de) with Nuxt3 in the frontend. My backend is Strapi CMS. Both sites are actively running actually well in prod and dev. Side note: I’ve only been involved with Nuxt for a few months.

My problem:

I maintain the content of my site (mbmobilesauna.de) with Strapi. If I now change content in Strapi, this should then also update the website. This works so far but ONLY on localhost and not on the actual production URL.

My two sites (frontend, backend) are hosted at a service provider that uses Cloudflare. This service provider has assured me 100% that the problem is not with Cloudflare. Cloudflare caches the page only 4 hours and after the 4 hours the content should change but unfortunately this is not the case.

For my frontend project I have a Dockerfile and a Deployment.yaml which automatically publish my project as soon as I commit something new. To exclude that this is the reason, I have also tested all locally in a Docker container. Here the desired behavior is there. As soon as I change something in Strapi, the page that is in the Docker container is updated directly.

To exclude the possibility that this is a bug in Strapi, I used the Strapi prodction URL in the local development environment.

As already mentioned, everything works as it should perfectly on localhost. But as soon as the page is in production, the content is no longer updated unless I manually make a release in the frontend pipeline. (This behavior is not desired)

What I tried:

  • Try another hosting provider (Netlify, Firebase) - Here I have the same problem again in Production.
  • Try different browsers (Chrome, Firefox, Opera) - Again the same problem
  • Deactivate cache - Again the same problem
  • Clear cache completely - Again the same problem

How do I get my data out of Strapi:
nuxt.config.ts

  apollo: {
    clients: {
      default: {
        httpEndpoint: `https://STRAPI_PROD_URL/graphql`,
        browserHttpEndpoint: `https://STRAPI_PROD_URL/graphql`,
        connectToDevTools: false,
      },
    },
  },

index.vue

import gql from "graphql-tag";

const GET_HOMEPAGE = gql`
  query Homepage {
    homepage {
      data {
        id
        attributes {
          body {
            __typename
            ... on ComponentContentTypeCtLandingSection {
              id
              title
              landingDesc: description
              images {
                data {
                  id
                  attributes {
                    url
                    alternativeText
                  }
                }
              }
              link {
                id
                label
                url
                style
                unterseiten {
                  data {
                    id
                    attributes {
                      title
                      slug
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

const { data }: any = await useAsyncQuery({
  query: GET_HOMEPAGE,
  cache: false
});

I use for my requests NuxtApollo (https://apollo.nuxtjs.org/) and GraphQL

I have provided my complete repo here for more details:

Can anyone help me?

2

Hi! I’ve got same setup as yours Nuxt3+Strapi. Mb i can help you somehow)

for better understanding:
what should happens after editing content on strapi-side?

No, it’s not should update your website) On localhost working HMR-mode, which checking diffs in files an rebuilding necessary things - so you can see changes immediately.

Sorry, if i misunderstood your problem

3

Hello, thanks for the quick reply.

Well, the page (frontend) is dynamic and not static. That means I use Strapi here to maintain and exchange my content so that I don’t have to manually edit the code again or other people who are not familiar with code can maintain the website content afterwards. I absolutely agree with your statement if it were a static page but then I wouldn’t actually use Strapi because it wouldn’t be of any use to me. Here is an example of how I would like it:

In the frontend, I have a landing section that says, for example: “Hello user. Welcome”

In Strapi it would be the same because the page gets the content from there.
If I now change the content “Hello user. Welcome” to “Hello user. Welcome to my page”

Then, after the 4-hour cache from Cloudflare has expired, the content in the frontend should change to “Hello user. Welcome to my page”.

Unfortunately, this is not yet the case. In order for the content to change again, I currently have to rebuild my entire page, but this is not the desired behavior.

And as I said, to simulate the production mode, I started the page locally in a Docker container and everything worked fine just as intended.

Here is my Dockerfile

# build stage frontend
FROM node:18.16.0-alpine as build-stage-frontend
WORKDIR /frontend
COPY mb-sauna-website .


ARG STRAPI_URL

ENV VITE_VUE_APP_STRAPI_API_URL=$STRAPI_URL

RUN npm install
RUN npm run build

# Production stage
FROM node:18.16.0-alpine

WORKDIR /app

COPY --from=build-stage-frontend /frontend/.output /app

ARG STRAPI_URL

ENV VITE_VUE_APP_STRAPI_API_URL=$STRAPI_URL

ENV NODE_ENV=production

CMD node ./server/index.mjs
4

Probably, problem might be on nuxt3 side upon arhitecture of nuxt3 caching requests and avoiding double-fetching the data (Data fetching · Get Started with Nuxt).
In another words your nuxt-frontend doesn’t get new data from strapi-backend.

Through your repo i can’t see any refetching mechanics. So once Nuxt-side got the data from the strapi, it cached the response and not refetched the data.

Up to my case when i changes data on strapi-side I totally need refresh my nuxt-site, otherwise there wouldn’t be shown any changes. And as far as i know there are no auto-refreshing mechanics out of the box for both products - nuxt and strapi

5

What exactly do you mean by that?

Do you mean that you have to build the page again yourself?

Or do you mean simply pressing the refresh button at the top? If the latter, then that’s exactly what I want.

The problem is that when I change the content on Strapi it is not updated in my frontend. Or more detailed that fits at first, but when the user closes the page and calls it up again or simply refreshes the page with the button, the new content should actually appear. I made changes to the content in Strapi just a week ago but this “new” content is not displayed in the frontend, the old content is still there.

According to my understanding, the frontend Nuxt should actually send a new request to Strapi and get all the current data, but that doesn’t seem to happen. Only when I rebuild my page the content is updated.

Is there any way to deactivate the cache?

6

I have also done the same setup 1 to 1 for Vue with Strapi, Apollo and GraphQL and it works perfectly. If I maintain or change content in Production Strapi, it also changes in the Vue production frontend after 4 hours (4 hours because of the Cloudflare cache). The code I have used here is almost the same as in the Vue project. Nuxt is SSR which is why there are differences but actually nothing serious

7

Yes, behavior as you describing looks like SSG-build of Nuxt. In SSR mode, which is enabled-by-default in Nuxt3, hitting browser’s refresh button should refetch actual data from Strapi, without rebuilding frontend-build.
But definitely there is some problem with communication between frontend-side and strapi.

P.S.: try to change the way of getting data from graphQL to REST request. How will it be going?

8

Yes, exactly, but unfortunately I just can’t find out what the problem is. I’ve been looking for a solution for 2 weeks but I can’t find anything and I’m just at a loss

9

Maybe i should try the strapi plugin/module insted of apollo

10

try to change the way of getting data from graphQL to REST request. How will it be going?
And for the Nuxt3 with Strapi there is a great plugin https://strapi.nuxtjs.org/

11

Thanks. Ill keep you updated

12

So the problem I have is 100% with Apollo. I used the Nuxt/Strapi module (https://strapi.nuxtjs.org/) to get my data out of Strapi and everything worked perfectly the way I wanted it to.

I would still like to find out why it doesn’t work with Apollo.

When I have found a solution I will close the issue. I will then post the solution here

1 Like
13

Unfortunately I have not found out what was wrong with Apollo. In any case, I have now used the Nuxt/Strapi module.

Here is my code:

import homepageQuery from "../queries/Homepage.gql";

const graphql = useStrapiGraphQL()

const { data } : any = await graphql(homepageQuery)
1 Like