[RFC] Support for server-side rendering #2221

9aoy · 2024-04-28T03:48:10Z

9aoy
Apr 28, 2024
Maintainer

We plan to provide some APIs in rsbuild to make it easier for users to use server-side rendering.

Background

Currently, users can implement the ssr capability in rsbuild by themselves, but according to the practice of rsbuild-ssr-example, there are some problems:

The build artifacts need to be written to disk. When the artifact is written to memory (writeToDisk is false), the user cannot get them thought real file system, but rsbuild saves the build artifacts in the memory of the dev server by default.
Missing manifest information. This feature has been in the planning of Rsbuild 1.0. [Feature]: Support output.manifest config #989
SSR liveReload. Avoid server-side caching of old bundle content, and make SSR liveReload.

Configuring SSR

Rsbuild will provide some SSR related APIs for users to use.

rsbuildServer.ssrLoadModule. Used to load and execute ssr module.
rsbuildServer.getTransformedHtml. used to get the compiled HTML template.

Type

type RsbuildDevServer = {
  /**
   * @param entryName - relate to rsbuild source.entry
   * @returns the return of server-entry.
   */
   ssrLoadModule: <T>(entryName: string) => Promise<T>;
   getTransformedHtml: (entryName: string) => Promise<string>;
   // ...
};

Example

Therefore, users can use ssr in rsbuild like this:

import { createRsbuild } from '@rsbuild/core';
import express from 'express';

 export const serverRender = (rsbuild, entryName) => async (req, res, next) => {
+  const { render } = await rsbuild.ssrLoadModule(entryName);
+
+  const markup = render();
+
+  const template = await rsbuild.getTransformedHtml(entryName);
+
+  const html = template.replace(`<!--app-content-->`, markup)
+
+  res.status(200).set({ 'Content-Type': 'text/html' }).send(html)
};

export async function startDevServer() {
  const rsbuild = await createRsbuild({});

  const app = express();

  const rsbuildServer = await rsbuild.createDevServer();

+ app.get('/', serverRender(rsbuild, 'index'))

  app.use(rsbuildServer.middlewares);
  
  ....
}

and the user's server-entry and template might look like this：

template.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rsbuild + React + TS</title>
  </head>
  <body>
    <div id="root"><!--app-content--></div>
  </body>
</html>

index.server.tsx:

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { App } from './App'

export function render() {
  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
}

9aoy · 2024-07-04T02:59:32Z

9aoy
Jul 4, 2024
Maintainer Author

resolved by #2528

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] Support for server-side rendering #2221

{{title}}

Replies: 1 comment

{{title}}

Select a reply

[RFC] Support for server-side rendering #2221

9aoy Apr 28, 2024 Maintainer

Background

Configuring SSR

Type

Example

Replies: 1 comment

9aoy Jul 4, 2024 Maintainer Author

9aoy
Apr 28, 2024
Maintainer

9aoy
Jul 4, 2024
Maintainer Author