Open
Description
This was discussed on a recent live stream (24:36).
I see a significant delay from when the HTML is sent to the client, and when the CSS arrives (when artificially throttling the network with Chrome tools at least).
The render is blocked until the CSS arrives, which undoes a big portion of the super performance gains of SSR.
Is there a way, to determine the CSS needed to render, and push it in with the HTML in a style tag?
It might look something like:
<html>
<head>
<title>My App</title>
<style>body { ... }, nav.header { ... }</style>
</head>
<body>
<link rel="stylesheet" href="/dist/bundles/app/app.styles.css">
</body>
</html>- The critical styles here are inlined.
- The rest of the main bundles styles are put into a
<link>tag and added to the browser. Some browsers won't block rendering for link tags inside of the body.