feat(nuxt): add experimentalNoScripts route rule (#19805)

docs/2.guide/1.concepts/3.rendering.md

@@ -100,6 +100,7 @@ Nuxt 3 includes route rules and hybrid rendering support. Using route rules you
 - `swr` - Add cache headers to the server response and cache it in the server or reverse proxy for a configurable TTL. The `node-server` preset of Nitro is able to cache the full response. For Netlify and Vercel, the response is also added to the CDN layer.
 - `static` - The behavior is the same as `swr` except that there is no TTL; the response is cached until the next deployment. On Netlify and Vercel, it enables full incremental static generation.
 - `prerender` - Prerenders routes at build time and includes them in your build as static assets
+- `experimentalNoScripts` - Disables rendering of Nuxt scripts and JS resource hints for sections of your site.
 
 **Examples:**
 

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -276,6 +276,8 @@ export default defineRenderHandler(async (event) => {
     ? await renderInlineStyles(ssrContext.modules ?? ssrContext._registeredComponents ?? [])
     : ''
 
+  const NO_SCRIPTS = process.env.NUXT_NO_SCRIPTS || routeOptions.experimentalNoScripts
+
   // Create render context
   const htmlContext: NuxtRenderHTMLContext = {
     island: Boolean(islandContext),
@@ -285,7 +287,7 @@ export default defineRenderHandler(async (event) => {
       process.env.NUXT_JSON_PAYLOADS
         ? _PAYLOAD_EXTRACTION ? `<link rel="modulepreload" href="${payloadURL}">` : null
         : _PAYLOAD_EXTRACTION ? `<link rel="preload" as="fetch" crossorigin="anonymous" href="${payloadURL}">` : null,
-      _rendered.renderResourceHints(),
+      NO_SCRIPTS ? null : _rendered.renderResourceHints(),
       _rendered.renderStyles(),
       inlinedStyles,
       ssrContext.styles
@@ -297,7 +299,7 @@ export default defineRenderHandler(async (event) => {
     ]),
     body: [_rendered.html],
     bodyAppend: normalizeChunks([
-      process.env.NUXT_NO_SCRIPTS
+      NO_SCRIPTS
         ? undefined
         : (_PAYLOAD_EXTRACTION
             ? process.env.NUXT_JSON_PAYLOADS
@@ -307,7 +309,7 @@ export default defineRenderHandler(async (event) => {
               ? renderPayloadJsonScript({ id: '__NUXT_DATA__', ssrContext, data: ssrContext.payload })
               : renderPayloadScript({ ssrContext, data: ssrContext.payload })
           ),
-      _rendered.renderScripts(),
+      routeOptions.experimentalNoScripts ? undefined : _rendered.renderScripts(),
       // Note: bodyScripts may contain tags other than <script>
       renderedMeta.bodyScripts
     ])

packages/nuxt/types.d.ts

@@ -11,8 +11,10 @@ declare global {
 declare module 'nitropack' {
   interface NitroRouteConfig {
     ssr?: boolean
+    experimentalNoScripts?: boolean
   }
   interface NitroRouteRules {
     ssr?: boolean
+    experimentalNoScripts?: boolean
   }
 }

packages/schema/src/config/experimental.ts

@@ -95,6 +95,7 @@ export default defineUntypedSchema({
 
     /**
      * Turn off rendering of Nuxt scripts and JS resource hints.
+     * You can also disable scripts more granularly within `routeRules`.
      */
     noScripts: false,
 

test/basic.test.ts

@@ -47,6 +47,11 @@ describe('route rules', () => {
     expect(script.serverRendered).toEqual(false)
     expect(attrs['data-ssr']).toEqual('false')
   })
+
+  it('test noScript routeRules', async () => {
+    const page = await createPage('/no-scripts')
+    expect(await page.locator('script').all()).toHaveLength(0)
+  })
 })
 
 describe('modules', () => {

test/fixtures/basic/nuxt.config.ts

@@ -51,7 +51,8 @@ export default defineNuxtConfig({
   ],
   nitro: {
     routeRules: {
-      '/route-rules/spa': { ssr: false }
+      '/route-rules/spa': { ssr: false },
+      '/no-scripts': { experimentalNoScripts: true }
     },
     output: { dir: process.env.NITRO_OUTPUT_DIR },
     prerender: {

test/fixtures/basic/pages/index.vue

@@ -21,6 +21,9 @@
     <button @click="someValue++">
       Increment state
     </button>
+    <NuxtLink to="/no-scripts">
+      to no script
+    </NuxtLink>
     <NestedSugarCounter :multiplier="2" />
     <CustomComponent />
     <Spin>Test</Spin>

test/fixtures/basic/pages/no-scripts.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    {{ count }}
+    <button @click="count++">
+      ++
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+</script>