Support static deployments with `ssr: false`

[farnabaz]

Disabling SSR limits the ability to prefetch query endpoints in the generation process and therefore generated website will not contain any content.

There are some approaches we can take to support non-ssr websites:

• We can ship nitro into service workers to handle API requests for content APIs and provides content live in production.

• Like Content v1 we can expose the whole database to the client using /api/_content/cache API (pre-rendered) and search and provide content live in the client.

\cc @pi0 @Atinux @Tahul

[atinux]

I like the second option since it will also provide the ability to search for statically generated websites.

[jshimkoski]

First things first, I want to thank the Nuxt Content team for all of your hard work. You all are amazing developers.

That said, I've run into this issue as well.

Being able to generate a static distribution of a Nuxt Content v2 site is crucial functionality and the ability to do this was a huge selling point of v1.

Requiring a Nodejs server in order to run a Nuxt Content v2 site is not only crippling, but it makes the development vs production flow a nightmare.

For example, I have a fully functional (in development) version of an application rewritten for Nuxt Content v2 but it cannot be deployed in the same manner as its v1 counterpart because it blows up with a "You should use slots with <ContentRenderer>" error after running npm run generate and npm run preview then visiting it in a browser.

For users without access to a Nodejs server, a static hosting solution is vital. I was actually shocked that this functionality wasn't baked into the stable release (especially after migrating everything over to v2, just to find out later that SSG doesn't currently work).

I hoping this issue can be resolved in the near future.

Thanks!

[atinux]

If you take a look at the video at the home page, it works with nuxt generate but not with ssr: false yet.

I believe the npm run preview might be broken after nuxt generate (cc @danielroe) but you can try with serve dist/ using https://www.npmjs.com/package/serve

[pi0]

Disabling SSR limits the ability to prefetch query endpoints in the generation process and therefore generated website will not contain any content.

I believe there should be an endpoint, that prefetches the content during prerender process and we have it with or without ssr option. What is limiting this?

[farnabaz]

@pi0 Using that endpoint, contents caches in nitro storage but since pages do not pretender during generation, all query APIs return 404 in production. (all /api/_content/query endpoints) It works fine with ssr: true because pages prerender in generation and generator could extract API calls and generate them.

We need to ship query matcher to the client for non-SSR SSGs.

[farnabaz]

Just to note here

Googlebot does not support service-worker and depending on it to provide contents for static websites will have a huge effect on SEO. Form google's point of view website will be empty.

/cc @pi0 @Atinux

[pi0]

Good point @farnabaz but t believe this is an expected consequence of using static SPAs anyway for SEO impact.

As we discussed, the requirement for SW as the server is for dynamic queries we cannot predict such as search functionality or preview mode which is probably not needed for search engines anyway to be indexed. prerendering API responses should be still possible for static deployments without sw.

[farnabaz]

Since the Service Worker presets work as expected, we need to

• [ ] Update documentation, and add notes about SPAs. There are two options,
  • Use Nitro's Service Worker preset
  • Pre-render pages and create a static website
• [ ] Detect ssr: false warn user and point to docs

[Drew-Macgibbon]

Is there any solution to this or an ETA on when it might get fixed?

Currently facing these issues using Nuxi & Nuxt 3.0.0-rc.9 with Nitro 0.5.1, Nuxt-content 2.10

• ssr: false - doesn't work with nuxt-content, ignores the /content folder (adding target: "static" has no impact)
• ssr: true & target: "static" - when refreshing nested routes it loads the base route first, then merges both together

for prerendering dynamic routes I've been using hooks in nuxt.config.ts

hooks: {
    async 'nitro:config' (nitroConfig) {
      if (nitroConfig.dev) { return }
      // ..Async logic..
      const data = await fetch('https://..../graphql', options)
      const posts = await data.json()
      await posts.data.map((post: any) => {
        nitroConfig.prerender.routes.push(`/blog/post/${post.id}`)
      })
    }
  },

Then making a 2nd API call in the dynamic route, which seems wasteful when previously we could pass the data as a payload to routes

Thanks in advance for any input.

---

Temporary fix: ssr: true & target: "static" works fine if nuxi preview is switched to npx serve .output/public

[atinux]

There are no target: "static" on Nuxt 3 actually.

We do have a bug for nuxi preview indeed, I think it's tracked in the framework repo.

We are still thinking of the best approach to support ssr: false on static hosting.

[R0N1n-dev]

If you take a look at the video at the home page, it works with nuxt generate but not with ssr: false yet.

I believe the npm run preview might be broken after nuxt generate (cc @danielroe) but you can try with serve dist/ using npmjs.com/package/serve

Actually this is not correct, "npm run generate" without "ssr: false" is also not working for me. am on rc9 and have tried it about 10 times to make sure. No it doesn't, atleast not for me. I get an empty page with no posts after nuxt generate.

[farnabaz]

@R0N1n-dev could you provide a simple reproduction?

[R0N1n-dev]

R0N1n-dev/nuxt3-content-blog The repo

[farnabaz]

@R0N1n-dev this happens because you are using queryContent in mounted. Move it to setup function and it will work fine.

[R0N1n-dev]

So basically , no optionsAPI usage fro content v2 in nuxt3.

[Lilja]

What's the status on this? Is this blocked on something? How can we progress on this issue?

[gion]

wow, it's been almost 2 years since this issue was opened.

My current hacky workaround is to fetch the content for the desired page in an useAsyncData. If the result is not used, it will not be added to the SSR payload, but the actual content API call will be cached:

await useAsyncData(() => queryContent(path).findOne())

Any other non hacky updates on this?

[vikram-rawat]

I am writing a blog which is purely static but my design requires me to use queryContent... Because of this I am unable to create static pages...

Could this issue be resolved like within next few months. I see it as pretty old but isn't this supposed to be prioritized over other issues...

Please close this issue :)