fix(nuxt): don't inline styles for per-request ssr: false

[Alex--C]

🔗 Linked issue

resolvesnuxt/nuxt#15124
#7580

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Currently, if SSR is enabled during build, the renderer tries to inline styles if process.env.NUXT_INLINE_STYLES is true.
It does not take the current request's ssrContext.noSSR into account.

This leads to an error if SSR is disabled dynamically (e.g. using the x-nuxt-no-ssr header in a server middleware):

[nuxt] [request error] [unhandled] [500] globalThis.__buildAssetsURL is not a function
at ./.output/server/chunks/app/styles.mjs:7:276
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async renderInlineStyles (./.output/server/chunks/handlers/renderer.mjs:453:20)
at async ./.output/server/chunks/handlers/renderer.mjs:386:25
at async ./.output/server/chunks/handlers/renderer.mjs:30:22
at async ./.output/server/node_modules/h3/dist/index.mjs:592:19
at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:538:7)

My change here disables style inlining if ssrContext.noSSR is true.

Resolvesnuxt/nuxt#15124 and #7580 .

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	d63bbdc
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6345f9052cf2a00009fb5dc7

[danielroe]

Ideally we would still render global inline styles with ssr: false. At the moment, the way we import asset URLs is with globalThis.__buildAssetsURL which is set here:

framework/packages/nuxt/src/core/templates.ts

Lines 243 to 244 in c404cb1

	'globalThis.__buildAssetsURL = buildAssetsURL',
	'globalThis.__publicAssetsURL = publicAssetsURL'

We could either set this manually in getSPARenderer or (better) somehow import paths.mjs in our emitted styles.mjs file.

Thoughts welcome.

[Alex--C]

Ideally we would still render global inline styles with ssr: false.

Wouldn't style inlining for SPA be a completely new feature? From what I understand, inlineSSRStyles is currently always false if the app is built without SSR enabled. This PR only addresses the issue that happens when the app is built with SSR enabled but then disabled during runtime.

[danielroe]

Oh yes, you're quite right. I do think it would be a nice feature to inline default styles with a SPA, but no changes needed in this PR 😊