Merge branch 'master' into once-prop

Author: pascalbaljet

.github/workflows/playwright-chromium.yml

@@ -42,3 +42,45 @@ jobs:
         with:
           name: playwright-failure-screenshots-${{ matrix.adapter }}-chromium
           path: test-results
+
+  test-chromium-ssr:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository
+    name: Chromium SSR (${{ matrix.adapter }})
+    timeout-minutes: 15
+    runs-on: ubuntu-24.04
+    strategy:
+      matrix:
+        adapter: ['vue', 'react', 'svelte']
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.14
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build Inertia
+        run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build
+
+      - name: Install Playwright Browsers
+        run: pnpm playwright install chromium
+
+      - name: Run Playwright SSR Tests
+        run: pnpm test:ssr:${{ matrix.adapter }} --project=chromium
+
+      - name: Upload failure screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-failure-screenshots-${{ matrix.adapter }}-chromium-ssr
+          path: test-results

package.json

@@ -25,6 +25,9 @@
     "test:react": "PACKAGE=react node playwright.js",
     "test:svelte": "PACKAGE=svelte node playwright.js",
     "test:vue": "PACKAGE=vue3 node playwright.js",
+    "test:ssr:react": "PACKAGE=react SSR=true npx playwright test",
+    "test:ssr:svelte": "PACKAGE=svelte SSR=true npx playwright test",
+    "test:ssr:vue": "PACKAGE=vue3 SSR=true npx playwright test",
     "playground:react": "cd playgrounds/react && ./init.sh && composer run dev",
     "playground:svelte4": "cd playgrounds/svelte4 && ./init.sh && composer run dev",
     "playground:svelte5": "cd playgrounds/svelte5 && ./init.sh && composer run dev",

packages/core/src/config.ts

@@ -79,6 +79,7 @@ export const config = new Config<InertiaAppConfig>({
     preserveEqualProps: false,
     useDataInertiaHeadAttribute: false,
     useDialogForErrorModal: false,
+    useScriptElementForInitialPage: false,
   },
   prefetch: {
     cacheFor: 30_000,

packages/core/src/requestParams.ts

@@ -55,6 +55,10 @@ export class RequestParams {
     return this.params.only.length > 0 || this.params.except.length > 0 || this.params.reset.length > 0
   }
 
+  public isDeferredPropsRequest() {
+    return this.params.deferredProps === true
+  }
+
   public onCancelToken(cb: VoidFunction) {
     this.params.onCancelToken({
       cancel: cb,

packages/core/src/response.ts

@@ -333,6 +333,15 @@ export class Response {
 
     pageResponse.props = { ...currentPage.get().props, ...pageResponse.props }
 
+    if (this.requestParams.isDeferredPropsRequest()) {
+      const currentErrors = currentPage.get().props.errors
+
+      if (currentErrors && Object.keys(currentErrors).length > 0) {
+        // Preserve existing errors during deferred props requests
+        pageResponse.props.errors = currentErrors
+      }
+    }
+
     // Preserve the existing scrollProps
     if (currentPage.get().scrollProps) {
       pageResponse.scrollProps = {

packages/core/src/router.ts

@@ -115,6 +115,14 @@ export class Router {
   }
 
   public reload<T extends RequestPayload = RequestPayload>(options: ReloadOptions<T> = {}): void {
+    return this.doReload(options)
+  }
+
+  protected doReload<T extends RequestPayload = RequestPayload>(
+    options: ReloadOptions<T> & {
+      deferredProps?: boolean
+    } = {},
+  ): void {
     if (typeof window === 'undefined') {
       return
     }
@@ -521,7 +529,7 @@ export class Router {
   protected loadDeferredProps(deferred: Page['deferredProps']): void {
     if (deferred) {
       Object.entries(deferred).forEach(([_, group]) => {
-        this.reload({ only: group })
+        this.doReload({ only: group, deferredProps: true })
       })
     }
   }

packages/core/src/types.ts

@@ -431,6 +431,7 @@ export type ActiveVisit<T extends RequestPayload = RequestPayload> = PendingVisi
 export type InternalActiveVisit = ActiveVisit & {
   onPrefetchResponse?: (response: Response) => void
   onPrefetchError?: (error: Error) => void
+  deferredProps?: boolean
 }
 
 export type VisitId = unknown
@@ -518,6 +519,7 @@ export type InertiaAppConfig = {
     preserveEqualProps: boolean
     useDataInertiaHeadAttribute: boolean
     useDialogForErrorModal: boolean
+    useScriptElementForInitialPage: boolean
   }
   prefetch: {
     cacheFor: CacheForOption | CacheForOption[]

packages/react/src/createInertiaApp.ts

@@ -7,7 +7,7 @@ import {
   router,
   setupProgress,
 } from '@inertiajs/core'
-import { ReactElement, createElement } from 'react'
+import { Fragment, ReactElement, createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import App, { InertiaAppProps, type InertiaApp } from './App'
 import { config } from './index'
@@ -61,8 +61,13 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   config.replace(defaults)
 
   const isServer = typeof window === 'undefined'
+  const useScriptElementForInitialPage = config.get('future.useScriptElementForInitialPage')
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el?.dataset.page || '{}')
+  const elPage =
+    isServer || !useScriptElementForInitialPage
+      ? null
+      : document.querySelector(`script[data-page="${id}"][type="application/json"]`)
+  const initialPage = page || JSON.parse(elPage?.textContent || el?.dataset.page || '{}')
 
   // @ts-expect-error - This can be improved once we remove the 'unknown' type from the resolver...
   const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
@@ -104,16 +109,31 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   }
 
   if (isServer && render) {
-    const body = await render(
-      createElement(
-        'div',
-        {
-          id,
-          'data-page': JSON.stringify(initialPage),
-        },
-        reactApp as ReactElement,
-      ),
-    )
+    const element = () => {
+      if (!useScriptElementForInitialPage) {
+        return createElement(
+          'div',
+          {
+            id,
+            'data-page': JSON.stringify(initialPage),
+          },
+          reactApp as ReactElement,
+        )
+      }
+
+      return createElement(
+        Fragment,
+        null,
+        createElement('script', {
+          'data-page': id,
+          type: 'application/json',
+          dangerouslySetInnerHTML: { __html: JSON.stringify(initialPage) },
+        }),
+        createElement('div', { id }, reactApp as ReactElement),
+      )
+    }
+
+    const body = await render(element())
 
     return { head, body }
   }

packages/react/test-app/Pages/DeferredProps/WithErrors.tsx

@@ -0,0 +1,33 @@
+import { Deferred, useForm, usePage } from '@inertiajs/react'
+
+const Foo = () => {
+  const { foo } = usePage<{ foo?: { text: string } }>().props
+
+  return <div id="foo">{foo?.text}</div>
+}
+
+export default () => {
+  const { errors } = usePage<{ errors: { name?: string } }>().props
+  const form = useForm({
+    name: '',
+  })
+
+  const submit = () => {
+    form.post('/deferred-props/with-errors')
+  }
+
+  return (
+    <>
+      <Deferred data="foo" fallback={<div>Loading foo...</div>}>
+        <Foo />
+      </Deferred>
+
+      {errors?.name && <p id="page-error">{errors.name}</p>}
+      {form.errors.name && <p id="form-error">{form.errors.name}</p>}
+
+      <button type="button" onClick={submit}>
+        Submit
+      </button>
+    </>
+  )
+}

packages/react/test-app/Pages/SSR/Page1.tsx

@@ -0,0 +1,26 @@
+import { Link } from '@inertiajs/react'
+
+export default ({ user, items, count }: { user: { name: string; email: string }; items: string[]; count: number }) => (
+  <div>
+    <h1 data-testid="ssr-title">SSR Page 1</h1>
+
+    <div data-testid="user-info">
+      <p data-testid="user-name">Name: {user.name}</p>
+      <p data-testid="user-email">Email: {user.email}</p>
+    </div>
+
+    <ul data-testid="items-list">
+      {items.map((item) => (
+        <li key={item} data-testid="item">
+          {item}
+        </li>
+      ))}
+    </ul>
+
+    <p data-testid="count">Count: {count}</p>
+
+    <Link href="/ssr/page2" data-testid="navigate-link">
+      Navigate to another page
+    </Link>
+  </div>
+)