How to get context.modules for vite react ssr-manifest.json #356

thxl2010 · 2024-08-13T02:14:31Z

thxl2010
Aug 13, 2024

when using lazy loading with react-router, multiple js/css files are expected; however, server-side rendering only returns two files.

There should be multiple files(index-xxx.js/index-xxx.css/create-xxxx.js/create-xxxx.css) for the path home(page create), 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.

server side:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/webp" href="/logo.webp" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title data-rh="true">XXX</title>
    <meta data-rh="true" name="description" content="xxxxxxxxx" />
    <link rel="stylesheet" href="/antd.min.css" />
    <script type="module" crossorigin src="/assets/index-Jh4ZtsPF.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BKNhL8mt.css" />
  </head>
  <body>
    <div id="root">xxxxxxxxxx</div>
  </body>
</html>

client side:

<!DOCTYPE html>
<html lang="en">
  <head>
    <head>
      <style data-rc-order="prepend" rc-util-key="@ant-design-icons">
        /* xxxxxxxxxxxxx */
      </style>
      <style
        data-rc-order="prependQueue"
        data-rc-priority="-999"
        data-css-hash="_effect-antFadeIn"
      >
        /* xxxxxxxxxxxxxxxx */
      </style>
      <style
        data-rc-order="prependQueue"
        data-rc-priority="-999"
        data-css-hash="_effect-antFadeOut"
      >
        /* xxxxxx */
      </style>
      <style
        data-rc-order="prependQueue"
        data-rc-priority="-999"
        data-css-hash="_effect-antZoomIn"
      >
        /* xxxxxx */
      </style>
      <style
        data-rc-order="prependQueue"
        data-rc-priority="-999"
        data-css-hash="_effect-antZoomOut"
      >
        /* xxxxxx */
      </style>
      <style type="text/css">
        /* xxxxxx */
      </style>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/webp" href="/logo.webp" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>XXX</title>
      <meta data-rh="true" name="description" content="xxxxxxxxx" />
      <link rel="stylesheet" href="/antd.min.css" />
      <script
        type="module"
        crossorigin=""
        src="/assets/index-Jh4ZtsPF.js"
      ></script>
      <link rel="stylesheet" crossorigin="" href="/assets/index-BKNhL8mt.css" />
      <link
        rel="modulepreload"
        as="script"
        crossorigin=""
        href="/assets/create-Cgw3MXE6.js"
      />
      <link
        rel="modulepreload"
        as="script"
        crossorigin=""
        href="/assets/list-2sH0oQBZ.js"
      />
      <link rel="stylesheet" href="/assets/list-B_lNajUB.css" />
      <link
        rel="modulepreload"
        as="script"
        crossorigin=""
        href="/assets/index-BNVOIkMu.js"
      />
      <link rel="stylesheet" href="/assets/create-CgBOejMp.css" />
    </head>
  </head>
  <body>
    <div id="root">xxxxxxxxxx</div>
  </body>
</html>

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

{
  // ...

  "src/pages/create/create.jsx": [
    "/assets/create-Cgw3MXE6.js",
    "/assets/create-CgBOejMp.css"
  ],
  "src/pages/create/create.module.scss": [
    "/assets/create-Cgw3MXE6.js",
    "/assets/create-CgBOejMp.css"
  ],
  "src/pages/create/image/image.jsx": [
    "/assets/create-Cgw3MXE6.js",
    "/assets/create-CgBOejMp.css"
  ],
  "src/pages/create/image/image.module.scss": [
    "/assets/create-Cgw3MXE6.js",
    "/assets/create-CgBOejMp.css"
  ],
  "src/pages/create/list/component/EstimateProgress/index.jsx": [
    "/assets/list-2sH0oQBZ.js",
    "/assets/list-B_lNajUB.css"
  ],
  "src/pages/create/list/component/EstimateProgress/style.module.scss": [
    "/assets/list-2sH0oQBZ.js",
    "/assets/list-B_lNajUB.css"
  ],
  "src/pages/create/list/list.jsx": [
    "/assets/list-2sH0oQBZ.js",
    "/assets/list-B_lNajUB.css"
  ],
  "src/pages/create/list/list.module.scss": [
    "/assets/list-2sH0oQBZ.js",
    "/assets/list-B_lNajUB.css"
  ],
  "src/pages/create/list/loader.js": [
    "/assets/logo-1-BMj5yrfT.webp",
    "/assets/IconFont-CJLVgteh.woff",
    "/assets/IconFont-CuNgQxzX.ttf"
  ],

  // ...
}

I did't find context.modules for vite react ssr. The @vitejs/plugin-vue supports it for vue. What about the @vitejs/plugin-react?

server with Express.js:

// ...

// Cached production assets
const templateHtml = isProduction
  ? await fs.readFile('./dist/client/index.html', 'utf-8')
  : '';
const ssrManifest = isProduction
  ? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8')
  : undefined;

// Serve HTML
app.use('*', async (req, res) => {
  try {
    const url = req.originalUrl.replace(base, '');

    let template;
    let render;
    if (!isProduction) {
      // Always read fresh template in development
      template = await fs.readFile('./index.html', 'utf-8');
      template = await vite.transformIndexHtml(url, template);
      render = (await vite.ssrLoadModule('/src/entry-server.jsx')).render;
    } else {
      template = templateHtml;
      render = (await import('../dist/server/entry-server.js')).render;
    }

    try {
    
     // TODO: How to get context.modules for vite react ssr-manifest.json
     // [Generating Preload Directives](https://vitejs.dev/guide/ssr.html#generating-preload-directives)
     // [demo for vue](https://github.com/vitejs/vite-plugin-vue/blob/37c9073fb15cf932ee138b0b919c4265cca5fa40/playground/ssr-vue/src/entry-server.js#L22)
      const rendered = await render(req, res, ssrManifest);

      const html = template
        .replace(
          `<!--app-head-title-->`,
          rendered.helmet.title.toString() ?? '',
        )
        .replace(`<!--app-head-meta-->`, rendered.helmet.meta.toString() ?? '')
        .replace(`<!--initialState-->`, rendered.initialState)
        .replace(`<!--app-html-->`, rendered.html ?? '');

      res.status(200).set({ 'Content-Type': 'text/html' }).send(html);
    } catch (e) {
      if (e instanceof Response && e.status >= 300 && e.status <= 399) {
        return res.redirect(e.status, e.headers.get('Location'));
      }
      throw e;
    }
  } catch (err) {
    vite?.ssrFixStacktrace(err);
    console.log(err.stack);
    res.status(500).end(err.stack);
  }
});

// ...

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

hi-ogawa · 2024-08-13T03:10:20Z

hi-ogawa
Aug 13, 2024
Collaborator

I did't find context.modules for vite react ssr. The @vitejs/plugin-vue supports it for vue. What about the @vitejs/plugin-react?

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

The short answer is no. What Vue does seems to rely on tighter runtime integration, but React doesn't have such opinionated mechanism yet. So if you want to imitate that, then you'll probably need to build on your own (though I'm guessing it wouldn't be possible for react either way since Vue plugin probably also relies on SFC (single file component) giving easier matching between "render" and "module").

Btw, I'm not sure if that's actually the right question to ask considering your use cases:

when using lazy loading with react-router, ...

If you're using ReactDOMServer.renderToString instead of renderTo...Stream variant, then this doesn't suspend on ssr, so Suspense + lazy would always fallback if I remember correctly. If that's the case, then it's not meaningful to ask "what's rendered on ssr and give me css for it".

Also, regarding lazy component styling, this issue might be prevalent in Vite SSR framework in general (I remembered the one discussed on solid start solidjs/solid-start#1458 (comment) and I expect Remix also does FOUC for lazy component since they only crawl chunk.imports and not chunk.dynamicImports for their route manifest https://github.com/remix-run/remix/blob/05bb290b3cc87034bb661d0b303d3679d57632dd/packages/remix-dev/vite/plugin.ts#L391-L395).

Since you are only concerned with your own ssr app, I think the solution would be to process .vite/manifest.json on your own similar to Remix but include chunk.dynamicImports though this means that it'll eagerly load css on page load before actually lazy component is rendered.

0 replies

thxl2010 · 2024-08-15T06:43:41Z

thxl2010
Aug 15, 2024
Author

@hi-ogawa I added a plugin to obtain module dependencies

rollup-plugin-visualizer

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to get context.modules for vite react ssr-manifest.json #356

{{title}}

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to get context.modules for vite react ssr-manifest.json #356

thxl2010 Aug 13, 2024

Replies: 2 comments

hi-ogawa Aug 13, 2024 Collaborator

thxl2010 Aug 15, 2024 Author

thxl2010
Aug 13, 2024

hi-ogawa
Aug 13, 2024
Collaborator

thxl2010
Aug 15, 2024
Author