Refactor RSC handling to improve performance and error management

Author: AbanoubGhadban

node_package/src/RSCPayloadGenerator.ts

@@ -1,4 +1,4 @@
-import { PassThrough } from 'stream';
+import { PassThrough, Readable } from 'stream';
 import {
   RailsContextWithServerComponentCapabilities,
   RSCPayloadStreamInfo,
@@ -33,6 +33,15 @@ const DEFAULT_TTL = 300000;
 
 export const clearRSCPayloadStreams = (railsContext: RailsContextWithServerComponentCapabilities) => {
   const { renderRequestId } = railsContext.componentSpecificMetadata;
+  // Close any active streams before clearing
+  const streams = rscPayloadStreams.get(renderRequestId);
+  if (streams) {
+    streams.forEach(({ stream }) => {
+      if (typeof (stream as Readable).destroy === 'function') {
+        (stream as Readable).destroy();
+      }
+    });
+  }
   rscPayloadStreams.delete(renderRequestId);
   rscPayloadCallbacks.delete(renderRequestId);
 

node_package/src/ReactOnRailsRSC.ts

@@ -19,7 +19,7 @@ import {
 } from './streamServerRenderedReactComponent.ts';
 import loadJsonFile from './loadJsonFile.ts';
 
-let serverRenderer: ReturnType<typeof buildServerRenderer> | undefined;
+let serverRendererPromise: Promise<ReturnType<typeof buildServerRenderer>> | undefined;
 
 const streamRenderRSCComponent = (
   reactRenderingResult: StreamableComponentResult,
@@ -49,12 +49,13 @@ const streamRenderRSCComponent = (
   };
 
   const initializeAndRender = async () => {
-    if (!serverRenderer) {
-      const reactClientManifest = await loadJsonFile<BundleManifest>(reactClientManifestFileName);
-      serverRenderer = buildServerRenderer(reactClientManifest);
+    if (!serverRendererPromise) {
+      serverRendererPromise = loadJsonFile<BundleManifest>(reactClientManifestFileName).then(
+        (reactClientManifest) => buildServerRenderer(reactClientManifest),
+      );
     }
 
-    const { renderToPipeableStream } = serverRenderer;
+    const { renderToPipeableStream } = await serverRendererPromise;
     const rscStream = renderToPipeableStream(await reactRenderingResult, {
       onError: (err) => {
         const error = convertToError(err);

node_package/src/getReactServerComponent.client.ts

@@ -46,7 +46,8 @@ const fetchRSC = ({ componentName, componentProps, railsContext }: ClientGetReac
   const propsString = JSON.stringify(componentProps);
   const { rscPayloadGenerationUrlPath } = railsContext;
   const strippedUrlPath = rscPayloadGenerationUrlPath?.replace(/^\/|\/$/g, '');
-  return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
+  const encodedParams = new URLSearchParams({ props: propsString }).toString();
+  return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?${encodedParams}`));
 };
 
 const createRSCStreamFromArray = (payloads: string[]) => {

node_package/src/getReactServerComponent.server.ts

@@ -10,22 +10,23 @@ type GetReactServerComponentOnServerProps = {
   railsContext: RailsContext;
 };
 
-let clientRenderer: ReturnType<typeof buildClientRenderer> | undefined;
+let clientRendererPromise: Promise<ReturnType<typeof buildClientRenderer>> | undefined;
 
 const createFromReactOnRailsNodeStream = async (
   stream: NodeJS.ReadableStream,
   reactServerManifestFileName: string,
   reactClientManifestFileName: string,
 ) => {
-  if (!clientRenderer) {
-    const [reactServerManifest, reactClientManifest] = await Promise.all([
+  if (!clientRendererPromise) {
+    clientRendererPromise = Promise.all([
       loadJsonFile<BundleManifest>(reactServerManifestFileName),
       loadJsonFile<BundleManifest>(reactClientManifestFileName),
-    ]);
-    clientRenderer = buildClientRenderer(reactClientManifest, reactServerManifest);
+    ]).then(([reactServerManifest, reactClientManifest]) =>
+      buildClientRenderer(reactClientManifest, reactServerManifest),
+    );
   }
 
-  const { createFromNodeStream } = clientRenderer;
+  const { createFromNodeStream } = await clientRendererPromise;
   const transformedStream = transformRSCStream(stream);
   return createFromNodeStream<React.ReactNode>(transformedStream);
 };

node_package/src/injectRSCPayload.ts

@@ -65,6 +65,14 @@ export default function injectRSCPayload(
     try {
       const rscPromises: Promise<void>[] = [];
 
+      if (!ReactOnRails.onRSCPayloadGenerated) {
+        // This should never occur in normal operation and indicates a bug in react_on_rails that needs to be fixed.
+        // While not fatal, missing RSC payload injection will degrade performance by forcing
+        console.error(
+          'ReactOnRails Error: ReactOnRails.onRSCPayloadGenerated is not defined. RSC payloads cannot be injected.',
+        );
+      }
+
       ReactOnRails.onRSCPayloadGenerated?.(railsContext, (streamInfo) => {
         const { stream, props, componentName } = streamInfo;
         const cacheKey = createRSCPayloadKey(componentName, props, railsContext);
@@ -123,12 +131,17 @@ export default function injectRSCPayload(
       rscPromise = startRSC();
     }
     rscPromise
-      .finally(() => {
-        ReactOnRails.clearRSCPayloadStreams?.(railsContext);
-      })
       .then(() => {
         resultStream.end();
       })
+      .finally(() => {
+        if (!ReactOnRails.clearRSCPayloadStreams) {
+          console.error('ReactOnRails Error: clearRSCPayloadStreams is not a function');
+          return;
+        }
+
+        ReactOnRails.clearRSCPayloadStreams(railsContext);
+      })
       .catch((err: unknown) => resultStream.emit('error', err));
   });
 

node_package/src/types/index.ts

@@ -57,7 +57,7 @@ export type RailsContext = {
       // The react-on-rails package uses 'unknown' for these parameters to avoid direct dependency.
       // This ensures that if the communication protocol between the node renderer and the Rails server changes,
       // we don't need to update this type or introduce a breaking change.
-      serverSideRSCPayloadParameters: unknown;
+      serverSideRSCPayloadParameters?: unknown;
       reactClientManifestFileName?: string;
       reactServerClientManifestFileName?: string;
     }

node_package/tests/SuspenseHydration.test.tsx

@@ -196,7 +196,6 @@ async function renderAndHydrate() {
     await act(async () => {
       const secondChunk = await writeSecondChunk();
       expect(secondChunk).toContain('script');
-      console.log(secondChunk);
     });
     await waitFor(() => {
       expect(screen.queryByText('Loading...')).not.toBeInTheDocument();