[MANUAL INJECTION] renderState in script of type application/json #12276

andoniabedul · 2021-09-13T20:03:52Z

What problem does this feature solve?

Right now when we use the functionality of renderState of createRenderer or createBundleRenderer it saves the data that you send in a window.INITIAL_STATE or the variable that you defined in the options, changing for example the name of the window variable.

As defined in the docs: https://ssr.vuejs.org/guide/build-config.html#client-config

This require that the browser process the data that will be storing it in the window variable. This take time with large objects.

PROPOSAL: Add a new option, for example plainStorage with the ID of the script that will save the data in a script of type application/json, by giving the JSON data a non-standard type in the <script> tag, the browser won't try to parse it as JavaScript. With this we can save some ms on the server side rendering.

Obviusly, this will be moving the operational cost of process the data when you hydrate the app on client doing a JSON.parse.

What does the proposed API look like?

context.renderState({
  plainStorage: '__STATE__'
})
// -> <script id="__STATE__" type="application/json">{ vue: { awesome: true } }</script>

andoniabedul · 2021-09-13T20:22:16Z

Code proposal, on https://github.com/vuejs/vue/blob/dev/src/server/template-renderer/index.js

 renderState (context: Object, options?: Object): string {
    const {
      plainStorage = null,
      contextKey = 'state',
      windowKey = '__INITIAL_STATE__'
    } = options || {}
    const state = this.serialize(context[contextKey])
    const autoRemove = process.env.NODE_ENV === 'production'
      ? ';(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());'
      : ''
    const nonceAttr = context.nonce ? ` nonce="${context.nonce}"` : ''
    if(plainStorage) {
      return context[contextKey]
      ? `<script${nonceAttr} id="${plainStorage}" type="application/json">${state}${autoRemove}</script>`
      : ''
    }
    return context[contextKey]
      ? `<script${nonceAttr}>window.${windowKey}=${state}${autoRemove}</script>`
      : ''
  }

andoniabedul added a commit to andoniabedul/vue that referenced this issue Sep 14, 2021

feat(compiler): vuejs#12276 Add plainStorage to options for renderState

e341a44

vuejs / vue Public

[MANUAL INJECTION] renderState in script of type application/json #12276

[MANUAL INJECTION] renderState in script of type application/json #12276

andoniabedul commented Sep 13, 2021

andoniabedul commented Sep 13, 2021 •

edited

vuejs / vue Public

Sponsor vuejs/vue

[MANUAL INJECTION] renderState in script of type application/json #12276

[MANUAL INJECTION] renderState in script of type application/json #12276

Comments

andoniabedul commented Sep 13, 2021

What problem does this feature solve?

What does the proposed API look like?

andoniabedul commented Sep 13, 2021 • edited

andoniabedul commented Sep 13, 2021 •

edited