Skip to content

[template-renderer] Make it possible to not automatically render used async scripts #9847

Open
@maoberlehner

Description

@maoberlehner

What problem does this feature solve?

In oder to make https://github.com/maoberlehner/vue-lazy-hydration more useful it would be great if we could prevent the template renderer from automatically injecting async scripts. The way vue-lazy-hydration works is, that it behaves differently on the server than it does on the client. On the server the script (of an async component) is loaded immediately so the template renderer correctly detects that it is used. But on the client the script might not be needed at all but because the template renderer has already injected it it is immediately loaded on page load.

There is currently kind of a backlash against loading huge amounts of JavaScript. vue-lazy-hydration can help with removing a lot of unnecessary JavaScript on server side rendered, mostly static sites like blogs and documentation. But currently it can't completely prevent loading all of the unnecessary JavaScript because of the way how template renderer works.

Here is the relevant line in the code: https://github.com/vuejs/vue/blob/dev/src/server/template-renderer/index.js#L226

What does the proposed API look like?

I propose to make this configurable:

const renderer = createBundleRenderer(serverBundle, {
  template,
  renderUsedAsyncScripts: false,
});

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions