Update client side

Author: skryukov

docs/guide/client-side-setup.md

@@ -295,3 +295,23 @@ 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

@@ -175,7 +175,7 @@ end
 **Default**: `false`
 **ENV**: `INERTIA_USE_SCRIPT_ELEMENT_FOR_INITIAL_PAGE`
 
-@available_since rails=master core=master
+@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:
@@ -206,4 +206,4 @@ When enabled, the HTML output looks like:
 
 > [!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 [protocol documentation](/guide/the-protocol#html-responses) for more details.
+> See the [client side setup](/guide/client-side-setup#script-element-for-page-data) for more details.

lib/generators/inertia/install/templates/react/inertia.jsx

@@ -44,6 +44,7 @@ createInertiaApp({
       forceIndicesArrayFormatInFormData: false,
     },
     future: {
+      useScriptElementForInitialPage: true,
       useDataInertiaHeadAttribute: true,
       useDialogForErrorModal: true,
       preserveEqualProps: true,

lib/generators/inertia/install/templates/react/inertia.tsx

@@ -44,6 +44,7 @@ void createInertiaApp({
       forceIndicesArrayFormatInFormData: false,
     },
     future: {
+      useScriptElementForInitialPage: true,
       useDataInertiaHeadAttribute: true,
       useDialogForErrorModal: true,
       preserveEqualProps: true,

lib/generators/inertia/install/templates/svelte/inertia.ts

@@ -42,6 +42,7 @@ createInertiaApp({
       forceIndicesArrayFormatInFormData: false,
     },
     future: {
+      useScriptElementForInitialPage: true,
       useDataInertiaHeadAttribute: true,
       useDialogForErrorModal: true,
       preserveEqualProps: true,

lib/generators/inertia/install/templates/vue/inertia.ts

@@ -41,6 +41,7 @@ createInertiaApp({
       forceIndicesArrayFormatInFormData: false,
     },
     future: {
+      useScriptElementForInitialPage: true,
       useDataInertiaHeadAttribute: true,
       useDialogForErrorModal: true,
       preserveEqualProps: true,