Using a script tag instead of data attribute to pass initial data.

[rafalkrawiec]

I think it could be worth to change a default mechanism of passing initial data to inertia. For now page data is sent as data-page attribute to app element, and since it's JSON placed within HTML attribute it requires all " characters to be encoded into entities which radically increases the amount of data that must be sent in response.

Just for example know you have something like this sent in the response (notice all " entities):

<div id="app" data-page="{&quot;component&quot;:&quot;index&quot;,&quot;props&quot;:{&quot;errors&quot;:{}},&quot;url&quot;:&quot;\/&quot;,&quot;version&quot;:&quot;1fc4c136cf63ed1506f5be3394cb920f&quot;}"></div>

JSON length is 179 characters.

Instead this mechanism could be replaced with something like this:

<script id="__INERTIAJS__" type="application/json">{"component":"index","props":{"errors":{}},"url":"/","version":"1fc4c136cf63ed1506f5be3394cb920f"}</script>

Here JSON length is 98 characters.

Above ones didn't contain any extra props sent, so let's send a standard Laravel's user data in props:

<div id="app" data-page="{&quot;component&quot;:&quot;index&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;user&quot;:{&quot;id&quot;:1,&quot;name&quot;:&quot;Test User&quot;,&quot;email&quot;:&quot;[email protected]&quot;,&quot;email_verified_at&quot;:&quot;2023-01-16T20:58:01.000000Z&quot;,&quot;created_at&quot;:&quot;2023-01-16T20:58:01.000000Z&quot;,&quot;updated_at&quot;:&quot;2023-01-16T20:58:01.000000Z&quot;}},&quot;url&quot;:&quot;\/&quot;,&quot;version&quot;:&quot;1fc4c136cf63ed1506f5be3394cb920f&quot;}"></div>

Now JSON length is 497 characters, where using the script tag:

<script id="__INERTIAJS__" type="application/json">{"component":"index","props":{"errors":{},"user":{"id":1,"name":"Test User","email":"[email protected]","email_verified_at":"2023-01-16T20:58:01.000000Z","created_at":"2023-01-16T20:58:01.000000Z","updated_at":"2023-01-16T20:58:01.000000Z"}},"url":"/","version":"1fc4c136cf63ed1506f5be3394cb920f"}</script>

The length is 296 characters.

As you can see a difference is quite significant between the two, and it's just for one model sent in props. For larger projects with big amount of data being sent from backend this could be a nice improvement, especially on slow networks.

Let me know what you think and if it's worth making a PR for it? 😉

[reinink]

Hey thanks for this suggestion, but I think we're going to just keep this the way it is for now. What you're suggesting is actually how Inertia used to work, but we switched it to the attribute approach. I wish I could remember off hand why we did that, but I don't recall at this moment.

[kafaa-dev]

You can provide Inertia page object when call createInertiaApp.

So the HTML would look like this :

<div id="app"></div>
<script id="__INERTIAJS__" type="application/json">{"component":"Home","props":{},"url":"/","version":null}</script>

and in client-side :

createInertiaApp({
  page: JSON.parse(document.getElementById('__INERTIAJS__')!.innerHTML),
  ...otherOptions,
});

Hope this helps.

[aguingand]

With gzipping enabled in your server, this doesn't make a difference.