nuxt
`queryContent` doesn't work after generating static HTML (`ssr: true`) within a `client-only` block
Environment
- Operating System:
Linux - Node Version:
v16.15.0 - Nuxt Version:
3.0.0-rc.5 - Package Manager:
[email protected] - Builder:
vite - User Config:
target,ssr,app,modules,components,css,build,content,vite,webpack,hooks,runtimeConfig - Runtime Modules:
@pinia/[email protected],@nuxt/[email protected] - Build Modules:
-
Reproduction
https://stackblitz.com/edit/github-rissth?file=pages/[...slug].vue
- when you load this,
npm run devshould load the page just fine with all thequeryContentmetadata displayed on the page - run
npm run generate - after its done, run
npx serve dist - the data no longer shows on the page
Describe the bug
if these conditions are met, queryContent will fail with a 404 when trying to fetch any content
-
target: 'static' -
<NuxtPage>within<client-only>tags - generated site with
npm run generate
the result is Failed to load resource: the server responded with a status of 404 (Not Found) when using queryContent
Additional context
this used to work in the previous major versions of nuxt and content, i'm in the process of migrating an application to the new versions and this came up. the behavior in npm run dev works fine
Logs
No response
using npm run preview instead of npx serve dist results in some raw html being returned instead:
<!DOCTYPE html>
<html data-head-attrs="">
<head>
<script src="/.localservice@runtime.872be04de15f32da2f6e3973878bcc22a4a17b5d.js"></script>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="head:count" content="2" />
<link
rel="modulepreload"
href="/_nuxt/entry-aa6f6836.mjs"
as="script"
crossorigin
/>
<link rel="prefetch" as="script" href="/_nuxt/ContentDoc-8c6d71ae.mjs" />
<link
rel="prefetch"
as="script"
href="/_nuxt/ContentRenderer-f78f77b6.mjs"
/>
<link
rel="prefetch"
as="script"
href="/_nuxt/MarkdownRenderer-56573f21.mjs"
/>
<link rel="prefetch" as="script" href="/_nuxt/ContentQuery-4d7bc793.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/json-8d67399f.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/asyncData-7e65d86b.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/query-66e92008.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/utils-998ea952.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ContentList-cd6c36a0.mjs" />
<link
rel="prefetch"
as="script"
href="/_nuxt/ContentNavigation-9e3ac9e8.mjs"
/>
<link rel="prefetch" as="script" href="/_nuxt/Markdown-bbfe168d.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseA-730754dc.mjs" />
<link
rel="prefetch"
as="script"
href="/_nuxt/ProseBlockquote-1ed0c50a.mjs"
/>
<link rel="prefetch" as="script" href="/_nuxt/ProseCode-b17c5ff9.mjs" />
<link rel="prefetch stylesheet" href="/_nuxt/ProseCode.c12da1e5.css" />
<link
rel="prefetch"
as="script"
href="/_nuxt/ProseCodeInline-78872af3.mjs"
/>
<link rel="prefetch" as="script" href="/_nuxt/ProseEm-c7c28b98.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseH1-ea3602b5.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseH2-7b77a35f.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseH3-37b1cf70.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseH4-28befb4b.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseH5-583a0a22.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseH6-314db5c7.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseHr-6419055b.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseImg-fc13fd90.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseLi-2f5c3689.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseOl-4b931f91.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseP-ecdf3f07.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseStrong-95eb1b06.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseTable-408cc5e5.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseTbody-0bab66c1.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseTd-7131b146.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseTh-78f5005a.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseThead-62e381a1.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseTr-aea51687.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/ProseUl-f5f9c078.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/_...slug_-decdc8fc.mjs" />
<link rel="prefetch" as="script" href="/_nuxt/web-socket-f675c477.mjs" />
<link
rel="prefetch"
as="script"
href="/_nuxt/error-component-9c948264.mjs"
/>
</head>
<body data-head-attrs="">
<div id="__nuxt"><span></span></div>
<script>
window.__NUXT__ = (function (a) {
return {
data: {},
state: { $serror: null },
_errors: {},
serverRendered: true,
config: {
public: {
content: {
base: "_content",
tags: {
p: "prose-p",
a: "prose-a",
blockquote: "prose-blockquote",
"code-inline": "prose-code-inline",
code: "prose-code",
em: "prose-em",
h1: "prose-h1",
h2: "prose-h2",
h3: "prose-h3",
h4: "prose-h4",
h5: "prose-h5",
h6: "prose-h6",
hr: "prose-hr",
img: "prose-img",
ul: "prose-ul",
ol: "prose-ol",
li: "prose-li",
strong: "prose-strong",
table: "prose-table",
thead: "prose-thead",
tbody: "prose-tbody",
td: "prose-td",
th: "prose-th",
tr: "prose-tr",
},
highlight: false,
wsUrl: a,
},
},
app: {
baseURL: "\u002F",
buildAssetsDir: "\u002F_nuxt\u002F",
cdnURL: a,
},
},
};
})("");
</script>
<script type="module" src="/_nuxt/entry-aa6f6836.mjs" crossorigin></script>
</body>
</html>
Hey @n00kii, I believe you will need to configure nitro to run as a service worker. Please see https://content.nuxtjs.org/guide/deploy/static-hosting#client-side-only-rendering
unfortunately this does not work for me. you can see this effect in the reproduction site, no data will be returned from the fetch.
adding
ssr: false,
nitro: {
preset: 'service-worker'
}
to nuxt.config.ts gives errors in the console:
/api/_content/query/PV5SIH4Pb4?_params={}&previewToken:1
Failed to load resource: the server responded with a status of 404 (Not Found)
and
Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://github-rissth--3000.local.webcontainer.io/') with script ('https://github-rissth--3000.local.webcontainer.io/sw.js'): A bad HTTP response code (404) was received when fetching the script.
I can't seem to reproduce this with a new project locally (or on Stackblitz):
Although it seems there's an issue with building Nitro when using the service-worker preset on Stackblitz, I'll open a separate issue for that
