refactor: update react-on-rails-rsc dependency to use SSR support and streamline imports for server components

Author: AbanoubGhadban

node_package/src/ReactOnRailsRSC.ts

@@ -1,4 +1,5 @@
-import { renderToPipeableStream } from 'react-on-rails-rsc/server.node';
+import { BundleManifest } from 'react-on-rails-rsc';
+import { buildServerRenderer } from 'react-on-rails-rsc/server.node';
 import { PassThrough, Readable } from 'stream';
 
 import {
@@ -26,6 +27,8 @@ const stringToStream = (str: string) => {
   return stream;
 };
 
+let serverRenderer: ReturnType<typeof buildServerRenderer> | undefined;
+
 const streamRenderRSCComponent = (
   reactRenderingResult: StreamableComponentResult,
   options: RSCRenderParams,
@@ -44,9 +47,15 @@ const streamRenderRSCComponent = (
 
   const { pipeToTransform, readableStream, emitError } =
     transformRenderStreamChunksToResultObject(renderState);
-  Promise.all([loadJsonFile(reactClientManifestFileName), reactRenderingResult])
-    .then(([reactClientManifest, reactElement]) => {
-      const rscStream = renderToPipeableStream(reactElement, reactClientManifest, {
+  Promise.resolve(reactRenderingResult)
+    .then(async (reactElement) => {
+      if (!serverRenderer) {
+        const reactClientManifest = await loadJsonFile<BundleManifest>(reactClientManifestFileName);
+        serverRenderer = buildServerRenderer(reactClientManifest);
+      }
+
+      const { renderToPipeableStream } = serverRenderer;
+      const rscStream = renderToPipeableStream(reactElement, {
         onError: (err) => {
           const error = convertToError(err);
           console.error('Error in RSC stream', error);

node_package/src/getReactServerComponent.client.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createFromReadableStream } from 'react-on-rails-rsc/client';
+import { createFromReadableStream } from 'react-on-rails-rsc/client.browser';
 import { fetch } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
 import { RailsContext } from './types/index.ts';

node_package/src/getReactServerComponent.server.ts

@@ -1,4 +1,5 @@
-import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
+import { BundleManifest } from 'react-on-rails-rsc';
+import { buildClientRenderer } from 'react-on-rails-rsc/client.node';
 import transformRSCStream from './transformRSCNodeStream.ts';
 import loadJsonFile from './loadJsonFile.ts';
 import { RailsContext } from './types/index.ts';
@@ -9,63 +10,24 @@ type RSCServerRootProps = {
   railsContext: RailsContext;
 };
 
-const createFromReactOnRailsNodeStream = (
-  stream: NodeJS.ReadableStream,
-  ssrManifest: Record<string, unknown>,
-) => {
-  const transformedStream = transformRSCStream(stream);
-  return createFromNodeStream(transformedStream, ssrManifest);
-};
+let clientRenderer: ReturnType<typeof buildClientRenderer> | undefined;
 
-/**
- * Creates an SSR manifest for React's server components runtime.
- *
- * This function:
- * 1. Loads the server and client component manifests
- * 2. Creates a mapping between client and server module IDs
- * 3. Builds a moduleMap structure required by React's SSR runtime
- *
- * The manifest allows React to correctly associate server components
- * with their client counterparts during hydration.
- *
- * @param reactServerManifestFileName - Path to the server manifest file
- * @param reactClientManifestFileName - Path to the client manifest file
- * @returns A Promise resolving to the SSR manifest object
- */
-const createSSRManifest = async (
+const createFromReactOnRailsNodeStream = async (
+  stream: NodeJS.ReadableStream,
   reactServerManifestFileName: string,
   reactClientManifestFileName: string,
 ) => {
-  const [reactServerManifest, reactClientManifest] = await Promise.all([
-    loadJsonFile<Record<string, { id: string; chunks: string[] }>>(reactServerManifestFileName),
-    loadJsonFile<Record<string, { id: string }>>(reactClientManifestFileName),
-  ]);
-
-  const moduleMap: Record<string, unknown> = {};
-  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
-    const { id, chunks } = reactServerManifest[aboluteFileUrl];
-    moduleMap[clientFileBundlingInfo.id] = {
-      '*': {
-        id,
-        chunks,
-        name: '*',
-      },
-    };
-  });
-
-  const ssrManifest = {
-    // The `moduleLoading` property is utilized by the React runtime to load JavaScript modules.
-    // It can accept options such as `prefix` and `crossOrigin` to specify the path and crossorigin attribute for the modules.
-    // In our case, since the server code is bundled into a single bundle, there is no need to load additional JavaScript modules.
-    // As a result, we set this property to an empty object because it will not be used.
-    moduleLoading: {
-      prefix: `/webpack/${process.env.NODE_ENV}/`,
-      crossOrigin: null,
-    },
-    moduleMap,
-  };
+  if (!clientRenderer) {
+    const [reactServerManifest, reactClientManifest] = await Promise.all([
+      loadJsonFile<BundleManifest>(reactServerManifestFileName),
+      loadJsonFile<BundleManifest>(reactClientManifestFileName),
+    ]);
+    clientRenderer = buildClientRenderer(reactClientManifest, reactServerManifest);
+  }
 
-  return ssrManifest;
+  const { createFromNodeStream } = clientRenderer;
+  const transformedStream = transformRSCStream(stream);
+  return createFromNodeStream<React.ReactNode>(transformedStream);
 };
 
 /**
@@ -115,17 +77,17 @@ const getReactServerComponent = async ({
     );
   }
 
-  const ssrManifest = await createSSRManifest(
-    railsContext.reactServerClientManifestFileName,
-    railsContext.reactClientManifestFileName,
-  );
   const rscPayloadStream = await ReactOnRails.getRSCPayloadStream(
     componentName,
     componentProps,
     railsContext,
   );
 
-  return createFromReactOnRailsNodeStream(rscPayloadStream, ssrManifest);
+  return createFromReactOnRailsNodeStream(
+    rscPayloadStream,
+    railsContext.reactServerClientManifestFileName,
+    railsContext.reactClientManifestFileName,
+  );
 };
 
 export default getReactServerComponent;

package.json

@@ -64,7 +64,7 @@
     "publint": "^0.3.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-on-rails-rsc": "git+https://github.com/shakacode/react_on_rails_rsc.git#add-support-for-generating-client-components-manifest-for-server-bundle",
+    "react-on-rails-rsc": "git+https://github.com/shakacode/react_on_rails_rsc.git#ssr-support",
     "redux": "^4.2.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.8.3",
@@ -73,7 +73,7 @@
   "peerDependencies": {
     "react": ">= 16",
     "react-dom": ">= 16",
-    "react-on-rails-rsc": "git+https://github.com/shakacode/react_on_rails_rsc.git#add-support-for-generating-client-components-manifest-for-server-bundle"
+    "react-on-rails-rsc": "git+https://github.com/shakacode/react_on_rails_rsc.git#ssr-support"
   },
   "files": [
     "node_package/lib"

yarn.lock

@@ -5215,9 +5215,9 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-"react-on-rails-rsc@git+https://github.com/shakacode/react_on_rails_rsc.git#add-support-for-generating-client-components-manifest-for-server-bundle":
-  version "19.0.0-rc.2"
-  resolved "git+https://github.com/shakacode/react_on_rails_rsc.git#f49dc3fd94629ff23c1c6a397b19b6feff437b2f"
+"react-on-rails-rsc@git+https://github.com/shakacode/react_on_rails_rsc.git#ssr-support":
+  version "19.0.0"
+  resolved "git+https://github.com/shakacode/react_on_rails_rsc.git#f71fabc8eb62b08cb4d590da85d2b519d9f8d451"
   dependencies:
     acorn-loose "^8.3.0"
     neo-async "^2.6.1"