The HTML JS/CSS references rendered on the server side are different from those on the client side when visiting lazy routes #11885

thxl2010 · 2024-08-14T01:22:43Z

thxl2010
Aug 14, 2024

I tried the react-router/examples/ssr-data-router and found an issue:

I add a lazy.module.css for the lazy page, the build output:

> build
> npm run build:client && npm run build:server


> build:client
> vite build --outDir dist/client --ssrManifest

vite v4.3.9 building for production...
✓ 32 modules transformed.
dist/client/index.html                   0.44 kB │ gzip:   0.30 kB
dist/client/ssr-manifest.json            1.59 kB │ gzip:   0.35 kB
dist/client/assets/lazy-754af4a9.css     0.03 kB │ gzip:   0.05 kB
dist/client/assets/index-2e05da30.css    0.28 kB │ gzip:   0.22 kB
dist/client/assets/lazy-17ab1330.js      0.63 kB │ gzip:   0.38 kB
dist/client/assets/index-50fa91a8.js   378.66 kB │ gzip: 118.34 kB
✓ built in 2.80s

> build:server
> vite build --ssr src/entry.server.tsx --outDir dist/server

vite v4.3.9 building SSR bundle for production...
✓ 4 modules transformed.
dist/server/assets/lazy-b6dcff78.js   1.05 kB
dist/server/entry.server.js          10.23 kB
✓ built in 285ms

When I visit the lazy page, there should be multiple files(index-xxx.js/index-xxx.css/lazy-xxxx.js/lazy-xxxx.css) for the path lazy, but the server-side rendering only returned 2 files((index-xxx.js/index-xxx.css). The complete set of files appeared only after hydration, leading to a flickering effect in the page styles.

the server side rendering html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Router - Data Router SSR Example</title>
    <script type="module" crossorigin src="/assets/index-50fa91a8.js"></script>
    <link rel="stylesheet" href="/assets/index-2e05da30.css" />
  </head>
  <body>
    <div id="app"><!-- ...... --></div>
  </body>
</html>

client side:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Router - Data Router SSR Example</title>
    <script
      type="module"
      crossorigin=""
      src="/assets/index-50fa91a8.js"
    ></script>
    <link rel="stylesheet" href="/assets/index-2e05da30.css" />
    <link
      rel="modulepreload"
      as="script"
      crossorigin=""
      href="/assets/lazy-17ab1330.js"
    />
    <link rel="stylesheet" href="/assets/lazy-754af4a9.css" />
  </head>
  <body>
    <div id="app"><!-- ...... --></div>
  </body>
</html>

The manifest(dist/client/ssr-manifest.json) contains mappings of module IDs to their associated chunks and asset files.

{
  "\u0000G:/MyWork/MyStudy/ssr-data-router/node_modules/react-dom/cjs/react-dom.development.js?commonjs-exports": [
  ],
  "\u0000G:/MyWork/MyStudy/ssr-data-router/node_modules/react-dom/index.js?commonjs-module": [
  ],
  "\u0000G:/MyWork/MyStudy/ssr-data-router/node_modules/react/cjs/react.development.js?commonjs-module": [
  ],
  "\u0000G:/MyWork/MyStudy/ssr-data-router/node_modules/react/index.js?commonjs-module": [
  ],
  "\u0000G:/MyWork/MyStudy/ssr-data-router/node_modules/scheduler/cjs/scheduler.development.js?commonjs-exports": [
  ],
  "\u0000G:/MyWork/MyStudy/ssr-data-router/node_modules/scheduler/index.js?commonjs-module": [
  ],
  "\u0000commonjsHelpers.js": [
  ],
  "\u0000vite/modulepreload-polyfill": [
  ],
  "\u0000vite/preload-helper": [
  ],
  "index.html": [
  ],
  "node_modules/@remix-run/router/dist/router.js": [
  ],
  "node_modules/react-dom/cjs/react-dom.development.js": [
  ],
  "node_modules/react-dom/client.js": [
  ],
  "node_modules/react-dom/index.js": [
  ],
  "node_modules/react-router-dom/dist/index.js": [
  ],
  "node_modules/react-router/dist/index.js": [
  ],
  "node_modules/react/cjs/react.development.js": [
  ],
  "node_modules/react/index.js": [
  ],
  "node_modules/scheduler/cjs/scheduler.development.js": [
  ],
  "node_modules/scheduler/index.js": [
  ],
  "src/App.tsx": [
  ],
  "src/entry.client.tsx": [
  ],
  "src/index.css": [
  ],
  "src/lazy.module.css?used": [
    "/assets/lazy-17ab1330.js",
    "/assets/lazy-754af4a9.css"
  ],
  "src/lazy.tsx": [
    "/assets/lazy-17ab1330.js",
    "/assets/lazy-754af4a9.css"
  ]
}

To leverage the manifest, frameworks need to provide a way to collect the module IDs of the components that were used during a server render call.

Is there a vite plugin which supports context.modules for react SSR ?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

The HTML JS/CSS references rendered on the server side are different from those on the client side when visiting lazy routes #11885

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

The HTML JS/CSS references rendered on the server side are different from those on the client side when visiting lazy routes #11885

Uh oh!

thxl2010 Aug 14, 2024

Replies: 0 comments

thxl2010
Aug 14, 2024