Inline critical CSS on server

[raukaute]

@raukaute sure, the problem is that in SSR the styles can't be rendered using the link tag for example <link ref="example.css" ... />. it should be rendered in inline CSS using the style tag, this is because we need more information about this. because maybe vue has a webpack plugin or loader for that to avoid doing this manually

Originally posted by @glopezep in https://github.com/vuejs/docs-next/issues/533#issuecomment-763261113

[raukaute]

the problem is that in SSR the styles can't be rendered using the link tag for example <link ref="example.css" ... />

Why not?

it should be rendered in inline CSS using the style tag, />

Ideally, this would be the way to go and in fact there is/ should be a mechanism for that. In fact, the bundle-renderer theoretically supports this feature over a getter exposed by vue-style-loader (ssrContext.styles). By the time I wrote up the HN, vue-style-loader did not work well/ at all with Vue3.

this is because we need more information about this. />

Not sure what information you mean :)

In general, loading critical css via preload should be fine as long as those files stay in moderate size-limits.

[MingxiangFeng]

now! how to solve this problem? have anyway?

it should be rendered in inline CSS using the style tag, />