Nuxt•4mo ago

Static website with prerendered content

Hello everyone, I have developed a website and I am looking to export it as a fully static site. My goal is to ensure that all content is rendered during the build process. For instance, the text fetched through an API (content hosted in a CMS) should be retrieved and applied at the time of generation. After the site is generated, any future changes in the CMS should not affect the content on the website. I have already set the ssr:false and the nitro:{static:true} but these doesn't look like they are doing what I want. Also for some reason when these 2 are added in my nuxt.config.ts file the development server breaks and I am getting a net::ERR_CONTENT_LENGTH_MISMATCH 200 error in my browser's console. Could anyone provide guidance on the best approach to achieve this? Thank you!

6 Replies

Jacek•4mo ago

I have a wrapper around useAsyncData using Pinia store to cache entries. Without it, I observe network requests to CMS even though website is built with nuxt generate.

const { data, error } = await useAsyncData(
  cacheKey,
  () => {
     if (cacheKey in myPiniaStore.entries) {
      return myPiniaStore.entries[cacheKey];
    } else {
      /* fetch from CMS */
    }
  }
);

const { data, error } = await useAsyncData(
  cacheKey,
  () => {
     if (cacheKey in myPiniaStore.entries) {
      return myPiniaStore.entries[cacheKey];
    } else {
      /* fetch from CMS */
    }
  }
);

But if you reference images or videos from CMS, and you wish to serve them from your domain, it will require something extra.

george.x.rOP•4mo ago

Hi @Jacek I don't use Pinia in my project. I have a composable that fetches my data each time I call it.

const useGetData = async () => {
    try {
      const data = await $fetch(www.example.com, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${token}`,
          },
          query: { locale: iso, populate: "*" },
        })
      );
        

      return { data };
    } catch (e) {
      console.error("Error fetching data:", e);
    }
  };

const useGetData = async () => {
    try {
      const data = await $fetch(www.example.com, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${token}`,
          },
          query: { locale: iso, populate: "*" },
        })
      );
        

      return { data };
    } catch (e) {
      console.error("Error fetching data:", e);
    }
  };

Do you think that the issue is because I am using fetch?

Jacek•4mo ago

$fetch is just ofetch which is just slightly improved native fetch, meaning "no cache". You write this code and Nuxt is going to include it in the build assets like it is any other piece of code (generating random number, or calling a weather API, stock status API, whatever...) Pinia works with Nuxt SSR to pass store content as JSON attached in generated HTML - this way when your code loads on the client, it won't need to fetch from CMS. It should theoretically be already handled by useAsyncData, but for some reason I observe network calls to CMS from statically generated website if I don't use Pinia (and I use it to share page footer data, so I am not going to throw it away even if I would find out that I was using useAsyncData wrong). Before I had set it up this way, I was dumping CMS data into JSON files and referencing them with import. Is there any reason why you avoid useAsyncData?

george.x.rOP•4mo ago

I updated the code and chaged the #fetch to useAsyncData and now it seems it works ok..im still trying to understand the differences between all of them 😅

Cue•4mo ago

Is there anything in the docs https://nuxt.com/docs/getting-started/data-fetching that’s not very clear or could be improved?

Nuxt

Data fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

george.x.rOP•4mo ago

I believe it should have more examples or at least specify which one is better to use for static generated websites.

Gaming

Programming

Static website with prerendered content