Performance: Handle data-page in a <script> tag

[thomas-brx]

We have noticed that the escapeHtml function is one of the top offenders in our profiles on our inertia (SSR side).

After some poking around, it turns out that the page data, which can be substantial in size (several hundred kilobytes), is being escaped as it is contained in a data attribute in the main div rendered.

An alternative approach would be to keep the raw json data in a script tag, like this:

<script id="some-app-page-data" type="application/json">
{....}
</script>

Here is an implementation of the above for vue3, react and svelte (SSR) - vue2 ignored.

The above change has been tested, and it does work great in our case, without calling escapeHtml on the page data.

The implementation is compatible with existing adapters, as it will fall back to the data attribute if no script tag is in place and the optimization makes most sense on SSR.

I would appreciate input on the above before implementing it for the other frameworks.

[stefanocurnis]

This would be super cool to have, since Safari is crashing as soon as you open Dev Tools because of the huge data attribute.