Merge pull request #299 from inertiajs/render-data-in-script-tag

Ability to use `<script>` element for initial page data

Author: bknoles

.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.