feat(rsc): add ability to access client entry URL from ssr environment and deprecate loadBootstrapScriptContent

packages/plugin-rsc/README.md

@@ -186,20 +186,19 @@ if (import.meta.hot) {
 - [`entry.ssr.tsx`](./examples/starter/src/framework/entry.ssr.tsx)
 
 ```tsx
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import { renderToReadableStream } from 'react-dom/server.edge'
 
 export async function handleSsr(rscStream: ReadableStream) {
   // deserialize RSC stream back to React VDOM
   const root = await createFromReadableStream(rscStream)
 
-  // helper API to allow referencing browser entry content from SSR environment
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
-
   // render html (traditional SSR)
   const htmlStream = renderToReadableStream(root, {
-    bootstrapScriptContent,
+    bootstrapModules: [getClientEntryUrl()],
   })
 
   return htmlStream
@@ -334,20 +333,21 @@ export function UserApp() {
 
 ### Available on `ssr` environment
 
-#### `import.meta.viteRsc.loadBootstrapScriptContent("index")`
+#### `getClientEntryUrl()`
 
-This provides a raw js code to execute a browser entry file specified by `environments.client.build.rollupOptions.input.index`. This is intended to be used with React DOM SSR API, such as [`renderToReadableStream`](https://react.dev/reference/react-dom/server/renderToReadableStream)
+This returns the URL used to load the client entry specified by `environments.client.build.rollupOptions.input.index`. This can be used with React DOM SSR APIs such as [`renderToReadableStream`](https://react.dev/reference/react-dom/server/renderToReadableStream).
 
 ```js
+import { getClientEntryUrl } from '@vitejs/plugin-rsc/ssr'
 import { renderToReadableStream } from 'react-dom/server.edge'
 
-const bootstrapScriptContent =
-  await import.meta.viteRsc.loadBootstrapScriptContent('index')
 const htmlStream = await renderToReadableStream(reactNode, {
-  bootstrapScriptContent,
+  bootstrapModules: [getClientEntryUrl()],
 })
 ```
 
+`getClientEntryUrl()` cannot be used when the `customClientEntry` plugin option is enabled.
+
 ### Available on `client` environment
 
 #### `rsc:update` event

packages/plugin-rsc/e2e/client-entry-url.test.ts

@@ -0,0 +1,90 @@
+import { expect, test } from '@playwright/test'
+import { setupInlineFixture, useFixture } from './fixture'
+
+test.describe('getClientEntryUrl', () => {
+  const root = 'examples/e2e/temp/client-entry-url'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter-extra',
+      dest: root,
+      files: {
+        'src/framework/entry.ssr.tsx': /* tsx */ `
+          import { getClientEntryUrl } from '@vitejs/plugin-rsc/ssr'
+
+          export async function renderHTML() {
+            const clientEntryUrl = getClientEntryUrl()
+            const legacyBootstrapScriptContent =
+              await import.meta.viteRsc.loadBootstrapScriptContent('index')
+            const content = JSON.stringify({
+              clientEntryUrl,
+              legacyBootstrapScriptContent,
+            })
+            return { stream: new Response(content).body! }
+          }
+        `,
+      },
+    })
+  })
+
+  function defineTest(mode: 'dev' | 'build') {
+    const f = useFixture({ root, mode })
+
+    test('returns the client entry URL', async ({ request }) => {
+      const response = await request.get(f.url())
+      const result = await response.json()
+      expect(result.legacyBootstrapScriptContent).toBe(
+        `import(${JSON.stringify(result.clientEntryUrl)})`,
+      )
+      if (mode === 'dev') {
+        expect(result.clientEntryUrl).toContain(
+          '/@id/__x00__virtual:vite-rsc/entry-browser',
+        )
+      } else {
+        expect(result.clientEntryUrl).toMatch(/\/assets\/index-[\w-]+\.js$/)
+      }
+    })
+  }
+
+  test.describe('dev', () => defineTest('dev'))
+  test.describe('build', () => defineTest('build'))
+})
+
+test.describe('getClientEntryUrl with customClientEntry', () => {
+  const root = 'examples/e2e/temp/client-entry-url-custom'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter-extra',
+      dest: root,
+      files: {
+        'vite.config.ts': {
+          edit: (source) =>
+            source.replace('rsc()', 'rsc({ customClientEntry: true })'),
+        },
+        'src/framework/entry.ssr.tsx': /* tsx */ `
+          import { getClientEntryUrl } from '@vitejs/plugin-rsc/ssr'
+
+          export async function renderHTML() {
+            let content = 'unexpected success'
+            try {
+              getClientEntryUrl()
+            } catch (error) {
+              content = String(error)
+            }
+            return { stream: new Response(content).body! }
+          }
+        `,
+      },
+    })
+  })
+
+  const f = useFixture({ root, mode: 'build' })
+
+  test('throws with customClientEntry', async ({ request }) => {
+    const response = await request.get(f.url())
+    await expect(response.text()).resolves.toContain(
+      `[vite-rsc] getClientEntryUrl() cannot be used with the 'customClientEntry' option`,
+    )
+  })
+})

packages/plugin-rsc/e2e/render-built-url.test.ts

@@ -111,6 +111,9 @@ test.describe(() => {
       expect(manifestFileContent).toContain(
         `__dynamicBase + "assets/entry.rsc-`,
       )
+      expect(manifestFileContent).toMatch(
+        /"clientEntryUrl": __dynamicBase \+ "assets\/index-[\w-]+\.js"/,
+      )
     })
   })
 })

packages/plugin-rsc/examples/action-reachability/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -21,8 +24,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {

packages/plugin-rsc/examples/basic/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -21,8 +24,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {

packages/plugin-rsc/examples/cache-replay/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -21,8 +24,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {

packages/plugin-rsc/examples/client-first/src/framework/entry.ssr.tsx

@@ -1,11 +1,13 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import { renderToReadableStream } from 'react-dom/server.edge'
 import { Root } from '../root'
 import { setRscFnCaller, type RscFnCaller } from './runtime'
 
 export async function renderHtml() {
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   return renderToReadableStream(<Root />, { bootstrapScriptContent })
 }
 

packages/plugin-rsc/examples/custom-server-function/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -21,8 +24,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {

packages/plugin-rsc/examples/performance-track/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import { renderToReadableStream } from 'react-dom/server.edge'
 import { injectRSCPayload } from 'rsc-html-stream/server'
@@ -15,8 +18,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   const htmlStream = await renderToReadableStream(<SsrRoot />, {
     bootstrapScriptContent,
   })

packages/plugin-rsc/examples/ppr/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import { resume } from 'react-dom/server.edge'
 import type { PrerenderResult } from 'react-dom/static'
@@ -11,8 +14,7 @@ export async function prerenderHtml(
   rscStream: ReadableStream<Uint8Array>,
 ): Promise<PrerenderResult> {
   const ssrRoot = createSsrRoot(preventStreamClose(rscStream))
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   const controller = new AbortController()
   const pendingResult = prerender(ssrRoot, {
     bootstrapScriptContent,

packages/plugin-rsc/examples/react-router/react-router-vite/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import { renderToReadableStream as renderHTMLToReadableStream } from 'react-dom/server.edge'
 import {
   unstable_routeRSCServerRequest as routeRSCServerRequest,
@@ -9,8 +12,7 @@ export default async function handler(
   request: Request,
   serverResponse: Response,
 ): Promise<Response> {
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
 
   return await routeRSCServerRequest({
     request,

packages/plugin-rsc/examples/ssg/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import { renderToReadableStream } from 'react-dom/server.edge'
 import { prerender } from 'react-dom/static.edge'
@@ -19,8 +22,7 @@ export async function renderHtml(
     const root = React.use(payload).root
     return root
   }
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
 
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined

packages/plugin-rsc/examples/starter-extra/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -21,8 +24,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {

packages/plugin-rsc/examples/starter/README.md

@@ -24,7 +24,7 @@ See [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main
   - `import.meta.viteRsc.loadModule`
 - [`./src/framework/entry.ssr.tsx`](./src/framework/entry.ssr.tsx)
   - `@vitejs/plugin-rsc/ssr`
-  - `import.meta.viteRsc.loadBootstrapScriptContent`
+  - `getClientEntryUrl`
   - `rsc-html-stream/server`
 - [`./src/framework/entry.browser.tsx`](./src/framework/entry.browser.tsx)
   - `@vitejs/plugin-rsc/browser`

packages/plugin-rsc/examples/starter/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -28,8 +31,7 @@ export async function renderHTML(
   }
 
   // render html (traditional SSR)
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {

packages/plugin-rsc/examples/use-cache-callable/src/framework/entry.ssr.tsx

@@ -1,4 +1,7 @@
-import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import {
+  createFromReadableStream,
+  getClientEntryUrl,
+} from '@vitejs/plugin-rsc/ssr'
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import { renderToReadableStream } from 'react-dom/server.edge'
@@ -21,8 +24,7 @@ export async function renderHTML(
     return React.use(payload).root
   }
 
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const bootstrapScriptContent = `import(${JSON.stringify(getClientEntryUrl())})`
   let htmlStream: ReadableStream<Uint8Array>
   let status: number | undefined
   try {