Ability to use <script> element for initial page data

.github/workflows/docs.yml

@@ -23,10 +23,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '22'
           cache: 'npm'

.github/workflows/generators.yml

@@ -30,7 +30,7 @@ jobs:
     name: ${{ matrix.framework }} (TS:${{ matrix.typescript }}, TW:${{ matrix.tailwind }}, Inertia:${{ matrix.inertia_version }})
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -42,7 +42,7 @@ jobs:
         run: bundle exec rspec --tag type:generator
 
       - name: Set up Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node }}
 
@@ -69,7 +69,7 @@ jobs:
 
       - name: Upload test artifacts
         if: failure()
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: test-output-${{ matrix.framework }}-ts${{ matrix.typescript }}-tw${{ matrix.tailwind }}-v${{ matrix.inertia_version }}
           path: |

.github/workflows/push.yml

@@ -19,11 +19,11 @@ jobs:
     runs-on: ubuntu-latest
     name: Linter
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: "3.3"
+          ruby-version: "3.4"
           bundler: latest
           bundler-cache: true
       - name: Run RuboCop
@@ -53,21 +53,21 @@ jobs:
     name: Test against Ruby ${{ matrix.ruby }} / Rails ${{ matrix.rails }}
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup System
         run: sudo apt-get install libsqlite3-dev
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 22.x
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
-          rubygems: latest
+          rubygems: 'latest'
           bundler-cache: true
         env:
           RAILS_VERSION:  ${{ matrix.rails }}

Gemfile

@@ -8,7 +8,6 @@ gemspec
 version = ENV.fetch('RAILS_VERSION', '8.1')
 gem 'rails', "~> #{version}.0"
 
-gem 'bundler', '~> 2.0'
 gem 'debug'
 gem 'generator_spec', '~> 0.10'
 gem 'rails-controller-testing'

app/views/inertia.html.erb

@@ -1 +1 @@
-<div id="app" data-page="<%= page.to_json %>"></div>
+<%= inertia_root(page: page) %>

docs/.vitepress/config.mts

@@ -136,6 +136,7 @@ export default defineConfig({
             { text: 'Prefetching', link: '/guide/prefetching' },
             { text: 'Load when visible', link: '/guide/load-when-visible' },
             { text: 'Merging props', link: '/guide/merging-props' },
+            { text: 'Once props', link: '/guide/once-props' },
             { text: 'Infinite scroll', link: '/guide/infinite-scroll' },
             { text: 'Remembering state', link: '/guide/remembering-state' },
           ],

docs/cookbook/handling-validation-error-types.md

@@ -26,8 +26,10 @@ import type { InertiaFormProps as OriginalProps } from '@inertiajs/vue3'
 type FormDataType = Record<string, FormDataConvertible>
 
 declare module '@inertiajs/vue3' {
-  interface InertiaFormProps<TForm extends FormDataType>
-    extends Omit<OriginalProps<TForm>, 'errors' | 'setError'> {
+  interface InertiaFormProps<TForm extends FormDataType> extends Omit<
+    OriginalProps<TForm>,
+    'errors' | 'setError'
+  > {
     errors: Partial<Record<FormDataKeys<TForm>, string[]>>
 
     setError(field: FormDataKeys<TForm>, value: string[]): this
@@ -60,8 +62,10 @@ import type { InertiaFormProps as OriginalProps } from '@inertiajs/react'
 type FormDataType = Record<string, FormDataConvertible>
 
 declare module '@inertiajs/react' {
-  interface InertiaFormProps<TForm extends FormDataType>
-    extends Omit<OriginalProps<TForm>, 'errors' | 'setError'> {
+  interface InertiaFormProps<TForm extends FormDataType> extends Omit<
+    OriginalProps<TForm>,
+    'errors' | 'setError'
+  > {
     errors: Partial<Record<FormDataKeys<TForm>, string[]>>
 
     setError(field: FormDataKeys<TForm>, value: string[]): void
@@ -92,8 +96,10 @@ import type { Writable } from 'svelte/store'
 type FormDataType = Record<string, FormDataConvertible>
 
 declare module '@inertiajs/svelte' {
-  interface InertiaFormProps<TForm extends FormDataType>
-    extends Omit<OriginalProps<TForm>, 'errors' | 'setError'> {
+  interface InertiaFormProps<TForm extends FormDataType> extends Omit<
+    OriginalProps<TForm>,
+    'errors' | 'setError'
+  > {
     errors: Partial<Record<FormDataKeys<TForm>, string[]>>
 
     setError(field: FormDataKeys<TForm>, value: string[]): this

docs/guide/client-side-setup.md

@@ -292,3 +292,26 @@ createInertiaApp({
   // ...
 })
 ```
+
+> [!NOTE]
+> Make sure the [`root_dom_id`](/guide/configuration#root_dom_id) configuration option matches the `id` property in your client-side setup.
+
+## Script Element for Page Data
+
+By default, Inertia stores the initial page data in a `data-page` attribute on the root element. You may configure Inertia to use a `<script type="application/json">` element instead, which is slightly faster and easier to inspect in your browser's dev tools.
+
+```js
+createInertiaApp({
+  // ...
+  defaults: {
+    future: {
+      useScriptElementForInitialPage: true,
+    },
+  },
+})
+```
+
+You should also set the [`use_script_element_for_initial_page`](/guide/configuration#use_script_element_for_initial_page) config option to `true`.
+
+> [!NOTE]
+> Be sure to also update your [SSR entry point](/guide/server-side-rendering#add-server-entry-point) if you're using server-side rendering.

docs/guide/configuration.md

@@ -151,3 +151,59 @@ The default value will be changed to `true` in the next major version.
 Specifies the base controller class for the internal `StaticController` used to render [Shorthand routes](/guide/routing#shorthand-routes).
 
 By default, Inertia Rails creates a `StaticController` that inherits from `ApplicationController`. You can use this option to specify a different base controller (for example, to include custom authentication, layout, or before actions).
+
+### `root_dom_id`
+
+**Default**: `'app'`
+**ENV**: `INERTIA_ROOT_DOM_ID`
+
+@available_since rails=master
+
+Specifies the DOM element ID used for the root Inertia.js element.
+
+```ruby
+InertiaRails.configure do |config|
+  config.root_dom_id = 'inertia-app'
+end
+```
+
+> [!NOTE]
+> Make sure your client-side Inertia setup uses the same ID when calling `createInertiaApp`.
+
+### `use_script_element_for_initial_page`
+
+**Default**: `false`
+**ENV**: `INERTIA_USE_SCRIPT_ELEMENT_FOR_INITIAL_PAGE`
+
+@available_since rails=master core=2.2.20
+
+When enabled the initial page data is rendered in a `<script type="application/json">` element instead of the `data-page` attribute on the root `<div>`.
+This provides two main benefits:
+
+1. **Smaller page size**: JSON data doesn't require HTML entity encoding, reducing the overall HTML payload size.
+2. **Faster parsing**: The browser can parse raw JSON directly from the script element, which is more efficient than parsing HTML-encoded JSON from an attribute.
+
+```ruby
+InertiaRails.configure do |config|
+  config.use_script_element_for_initial_page = true
+end
+```
+
+When disabled (default), the HTML output looks like:
+
+```html
+<div id="app" data-page='{"component":"Users/Index",...}'></div>
+```
+
+When enabled, the HTML output looks like:
+
+```html
+<script data-page="app" type="application/json">
+  {"component":"Users/Index",...}
+</script>
+<div id="app"></div>
+```
+
+> [!NOTE]
+> When using this option make sure your client-side Inertia setup is configured to read the page data from the `<script>` element.
+> See the [client side setup](/guide/client-side-setup#script-element-for-page-data) for more details.

docs/guide/deferred-props.md

@@ -121,6 +121,8 @@ export default () => (
 
 :::
 
+## Multiple Deferred Props
+
 If you need to wait for multiple deferred props to become available, you can specify an array to the `data` prop.
 
 :::tabs key:frameworks
@@ -189,3 +191,21 @@ export default () => (
 ```
 
 :::
+
+## Combining with Once Props
+
+@available_since rails=master core=2.2.20
+
+You may pass the `once: true` argument to a deferred prop to ensure the data is resolved only once and remembered by the client across subsequent navigations.
+
+```ruby
+class DashboardController < ApplicationController
+  def index
+    render inertia: {
+      stats: InertiaRails.defer(once: true) { Stats.generate },
+    }
+  end
+end
+```
+
+For more information on once props, see the [once props](/guide/once-props) documentation.

docs/guide/merging-props.md

@@ -130,7 +130,7 @@ You can also merge props directly on the client side without making a server req
 
 ## Combining with deferred props
 
-You can also combine [deferred props](/guide/deferred-props) with mergeable props to defer the loading of the prop and ultimately mark it as mergeable once it's loaded.
+You may combine [deferred props](/guide/deferred-props) with mergeable props to defer the loading of the prop and ultimately mark it as mergeable once it's loaded.
 
 ```ruby
 class UsersController < ApplicationController
@@ -146,6 +146,24 @@ class UsersController < ApplicationController
 end
 ```
 
+## Combining with Once Props
+
+@available_since rails=master core=2.2.20
+
+You may pass the `once: true` argument to a deferred prop to ensure the data is resolved only once and remembered by the client across subsequent navigations.
+
+```ruby
+class UsersController < ApplicationController
+  def index
+    render inertia: {
+      activity: InertiaRails.merge(once: true) { @user.recent_activity },
+    }
+  end
+end
+```
+
+For more information on once props, see the [once props](/guide/once-props) documentation.
+
 ## Resetting props
 
 On the client side, you can indicate to the server that you would like to reset the prop. This is useful when you want to clear the prop value before merging new data, such as when the user enters a new search query on a paginated list.