Describe the bug
During development, when using vite in middleware mode like the ssr-react example, CSS source files imported by the entrypoint aren't sourced via a <link/> tag in the transformed HTML. This results in a flash of unstyled content because the server rendered response doesn't include the CSS, but during hydration, the client renders and imports the style.
I believe that in normal, vite is the server serving the HTML mode, these static imports get parsed out and written into the HTML file served to the user.
Reproduction
You can try out the branch at main...airhorns:ssr-static-assets, which just adds a static import for a CSS file to the App.tsx entrypoint in the ssr-react playground.
The server rendered HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"><nav><ul><li><a href="/about">About</a></li><li><a href="/">Home</a></li></ul></nav><h1>Home</h1></div>
<script type="module" src="/src/entry-client.jsx"></script>
</body>
</html>The DOM tree after rendering client side:
<html lang="en"><head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<style type="text/css">body {
background-color: red;
}
</style></head>
<body>
<div id="app"><nav><ul><li><a href="/about">About</a></li><li><a href="/">Home</a></li></ul></nav><h1>Home</h1></div>
<script type="module" src="/src/entry-client.jsx"></script>
</body></html>Note the added inline script tag with the background-color: red;
It'd be great for vite to support this same transform when doing transformIndexHtml, but also, if there was a way to get the list of imports necessary for sticking into the HTML when doing ssrLoadModule, that'd be awesome too! If you build you can use manifest: true or ssrManifest: true to get enough information out of vite to create the right HTML file, but, that's only after building, so if we wanted to support people doing this during development, it'd be great to have an API for getting the list of static imports that an ssrLoadModule should demand.
Thanks for an awesome piece of software!
System Info
vite version: 2a6109a- Operating System:
Darwin inspector 20.2.0 Darwin Kernel Version 20.2.0: Wed Dec 2 20:39:59 PST 2020; root:xnu-7195.60.75~1/RELEASE_X86_64 x86_64
- Node version:
v15.7.0
- Package manager (npm/yarn/pnpm) and version:
yarn 1.22.10
Describe the bug
During development, when using vite in middleware mode like the
ssr-reactexample, CSS source files imported by the entrypoint aren't sourced via a<link/>tag in the transformed HTML. This results in a flash of unstyled content because the server rendered response doesn't include the CSS, but during hydration, the client renders and imports the style.I believe that in normal, vite is the server serving the HTML mode, these static imports get parsed out and written into the HTML file served to the user.
Reproduction
You can try out the branch at main...airhorns:ssr-static-assets, which just adds a static import for a CSS file to the
App.tsxentrypoint in thessr-reactplayground.The server rendered HTML:
The DOM tree after rendering client side:
Note the added inline script tag with the
background-color: red;It'd be great for vite to support this same transform when doing
transformIndexHtml, but also, if there was a way to get the list of imports necessary for sticking into the HTML when doingssrLoadModule, that'd be awesome too! If you build you can usemanifest: trueorssrManifest: trueto get enough information out of vite to create the right HTML file, but, that's only after building, so if we wanted to support people doing this during development, it'd be great to have an API for getting the list of static imports that anssrLoadModuleshould demand.Thanks for an awesome piece of software!
System Info
viteversion: 2a6109aDarwin inspector 20.2.0 Darwin Kernel Version 20.2.0: Wed Dec 2 20:39:59 PST 2020; root:xnu-7195.60.75~1/RELEASE_X86_64 x86_64v15.7.0yarn 1.22.10