Use JSON to pass data from SSR to improve performance

[CyberAP]

What problem does this feature solve?

Using JavaScript to pass data from SSR to an app through global context is not efficient.
JSON, on the other hand, offers a much better performance and could be used instead. Explanation in v8 blog, Benchmarks (performance increase up to 2 times)
This is especially important for apps with a lot of state.

What does the proposed changes look like?

This code:

<script>window.__NUXT__ = { data: {} /* some state */ }</script>

Turns into this:

<script id="NUXT_STATE" type="application/json">
{ data: {} }
</script>

// somewhere in app init
const stateEl = document.getElementById('NUXT_STATE');
const state = JSON.parse(stateEl.textContent);
app.state = state;

_{This feature request is available on Nuxt community (#c9586)}

[Timkor]

What about circulair references? Or types which are not supported by JSON?

[CyberAP]

For circular references we have: https://github.com/WebReflection/circular-json
This could be enabled in a nuxt config for those who really need that.

For unsupported JSON types could you elaborate a little bit more? What's the usecase?

[manniL]

Thanks for the information! We read that article as well but things are a bit more complicated here. For Nuxt 2, we decided to go with devalue (our fork) instead of pure JSON.stringify for a couple for reasons. This won't change in Nuxt 2 to avoid breaking changes.

[CyberAP]

@manniL could you unveil these reasons if possible? I'm really curious when JSON is not appropriate as a DTO.

[aldarund]

circular-json seems to be replaced by flatted. I tested flatted and devalue on 120kb payload. Without circular.
devalue -> 1600 ops
flatted -> 630 ops
json.strigify -> 4900 ops
Reasons for devalue instead of json listed on the devalue page itself.

repeated references ([value, value])
undefined, Infinity, NaN, -0
regular expressions
dates
Map and Set

For example undefined values just got stripped by json.stringify

[404-NF]

@aldarund how about use json.strigify(value, function(key,value){ xxxx }) instead devalue;
use strigify replacer can support special types;
in my test, most of develop scene devalue takes 60%-70% more time than common json.stringify. it takes several times than render.
it's not only effct the time per request but also request per second. it looks like devalue become the most performance problem for me.

[JBustin]

Just for information, I notice the same type of performance issue with, for example, the script injection in vue-renderer :

    if (shouldInjectScripts || shouldHashCspScriptSrc) {
      serializedSession = `window.${this.serverContext.globals.context}=${devalue(renderContext.nuxt)};`;
    }

In my case, with devalue, ~10ms, with JSON.stringify, ~1ms.
I experiment some quickly event loop saturation and this kind of synchonous long and frequent tasks is painful.
At least, an async stringify operator for huge object should keep event loop safe.

[danielroe]

This is now implemented in Nuxt 3.