pass props to RSC generator and avoid state reset on hydration

Author: AbanoubGhadban

jest.config.js

@@ -6,11 +6,12 @@ module.exports = {
   setupFiles: ['<rootDir>/node_package/tests/jest.setup.js'],
   // React Server Components tests are not compatible with Experimental React 18 and React 19
   // That only run with node version 18 and above
-  moduleNameMapper: nodeVersion < 18
-    ? {
-        'react-server-dom-webpack/client': '<rootDir>/node_package/tests/emptyForTesting.js',
-        '^@testing-library/dom$': '<rootDir>/node_package/tests/emptyForTesting.js',
-        '^@testing-library/react$': '<rootDir>/node_package/tests/emptyForTesting.js',
-      }
-    : {},
+  moduleNameMapper:
+    nodeVersion < 18
+      ? {
+          'react-server-dom-webpack/client': '<rootDir>/node_package/tests/emptyForTesting.js',
+          '^@testing-library/dom$': '<rootDir>/node_package/tests/emptyForTesting.js',
+          '^@testing-library/react$': '<rootDir>/node_package/tests/emptyForTesting.js',
+        }
+      : {},
 };

node_package/src/RSCClientRoot.ts

@@ -1,24 +1,22 @@
 "use client";
 
 import * as React from 'react';
+import ReactDOMClient from 'react-dom/client';
 import RSDWClient from 'react-server-dom-webpack/client';
 import { fetch } from './utils';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs';
+import { RailsContext, RenderFunction } from './types';
 
 const { use } = React;
 
 if (typeof use !== 'function') {
   throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
 }
 
-let renderCache: Record<string, Promise<React.ReactNode>> = {};
-export const resetRenderCache = () => {
-  renderCache = {};
-}
-
 export type RSCClientRootProps = {
   componentName: string;
   rscPayloadGenerationUrlPath: string;
+  componentProps?: unknown;
 }
 
 const createFromFetch = async (fetchPromise: Promise<Response>) => {
@@ -31,12 +29,10 @@ const createFromFetch = async (fetchPromise: Promise<Response>) => {
   return RSDWClient.createFromReadableStream(transformedStream);
 }
 
-const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath }: RSCClientRootProps) => {
-  if (!renderCache[componentName]) {
-    const strippedUrlPath = rscPayloadGenerationUrlPath.replace(/^\/|\/$/g, '');
-    renderCache[componentName] = createFromFetch(fetch(`/${strippedUrlPath}/${componentName}`)) as Promise<React.ReactNode>;
-  }
-  return renderCache[componentName];
+const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath, componentProps }: RSCClientRootProps) => {
+  const propsString = JSON.stringify(componentProps);
+  const strippedUrlPath = rscPayloadGenerationUrlPath.replace(/^\/|\/$/g, '');
+  return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`)) as Promise<React.ReactNode>;
 }
 
 /**
@@ -52,9 +48,28 @@ const fetchRSC = ({ componentName, rscPayloadGenerationUrlPath }: RSCClientRootP
  * @requires React 18+ with experimental features or React 19+
  * @requires react-server-dom-webpack/client
  */
-const RSCClientRoot = ({
+const RSCClientRoot: RenderFunction = async ({
   componentName,
   rscPayloadGenerationUrlPath,
-}: RSCClientRootProps) => use(fetchRSC({ componentName, rscPayloadGenerationUrlPath }));
+  componentProps,
+}: RSCClientRootProps, _railsContext?: RailsContext, domNodeId?: string) => {
+  const root = await fetchRSC({ componentName, rscPayloadGenerationUrlPath, componentProps })
+  if (!domNodeId) {
+    throw new Error('RSCClientRoot: No domNodeId provided');
+  }
+  const domNode = document.getElementById(domNodeId);
+  if (!domNode) {
+    throw new Error(`RSCClientRoot: No DOM node found for id: ${domNodeId}`);
+  }
+  if (domNode.innerHTML) {
+    ReactDOMClient.hydrateRoot(domNode, root);
+  } else {
+    ReactDOMClient.createRoot(domNode).render(root);
+  }
+  // Added only to satisfy the return type of RenderFunction
+  // However, the returned value of renderFunction is not used in ReactOnRails
+  // TODO: fix this behavior
+  return '';
+}
 
 export default RSCClientRoot;

node_package/src/registerServerComponent.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import ReactOnRails from './ReactOnRails';
 import RSCClientRoot from './RSCClientRoot';
-import { RegisterServerComponentOptions } from './types';
+import { RegisterServerComponentOptions, RailsContext, ReactComponentOrRenderFunction } from './types';
 
 /**
  * Registers React Server Components (RSC) with React on Rails.
@@ -36,12 +35,13 @@ import { RegisterServerComponentOptions } from './types';
  * ```
  */
 const registerServerComponent = (options: RegisterServerComponentOptions, ...componentNames: string[]) => {
-  const componentsWrappedInRSCClientRoot: Record<string, () => React.ReactElement> = {};
+  const componentsWrappedInRSCClientRoot: Record<string, ReactComponentOrRenderFunction> = {};
   for (const name of componentNames) {
-    componentsWrappedInRSCClientRoot[name] = () => React.createElement(RSCClientRoot, {
+    componentsWrappedInRSCClientRoot[name] = (componentProps?: unknown, _railsContext?: RailsContext, domNodeId?: string) => RSCClientRoot({
       componentName: name,
-      rscPayloadGenerationUrlPath: options.rscPayloadGenerationUrlPath
-    });
+      rscPayloadGenerationUrlPath: options.rscPayloadGenerationUrlPath,
+      componentProps,
+    }, _railsContext, domNodeId);
   }
   ReactOnRails.register(componentsWrappedInRSCClientRoot);
 };

node_package/tests/RSCClientRoot.test.jsx

@@ -8,26 +8,35 @@
 window.__webpack_require__ = jest.fn();
 window.__webpack_chunk_load__ = jest.fn();
 
-import * as React from 'react';
 import { enableFetchMocks } from 'jest-fetch-mock';
-import { render, screen, act } from '@testing-library/react';
+import { screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import path from 'path';
 import fs from 'fs';
 import { createNodeReadableStream, getNodeVersion } from './testUtils';
 
-import RSCClientRoot, { resetRenderCache } from '../src/RSCClientRoot';
+import RSCClientRoot from '../src/RSCClientRoot';
 
 enableFetchMocks();
 
 // React Server Components tests are not compatible with Experimental React 18 and React 19
 // That only run with node version 18 and above
 (getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
+  let container;
+  const mockDomNodeId = 'test-container';
+
   beforeEach(() => {
+    // Setup DOM element
+    container = document.createElement('div');
+    container.id = mockDomNodeId;
+    document.body.appendChild(container);
     jest.clearAllMocks();
 
     jest.resetModules();
-    resetRenderCache();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
   });
 
   it('throws error when React.use is not defined', () => {
@@ -60,27 +69,32 @@ enableFetchMocks();
       rscPayloadGenerationUrlPath,
     };
 
-    const { rerender } = await act(async () => render(<RSCClientRoot {...props} />));
+    // Execute the render
+    const render = () =>
+      act(async () => {
+        await RSCClientRoot(props, undefined, mockDomNodeId);
+      });
 
     return {
-      rerender: () => rerender(<RSCClientRoot {...props} />),
+      render,
       pushFirstChunk: () => push(`${JSON.stringify(chunk1)}\n`),
       pushSecondChunk: () => push(`${JSON.stringify(chunk2)}\n`),
       pushCustomChunk: (chunk) => push(`${chunk}\n`),
       endStream: () => push(null),
     };
   };
 
-  it('fetches and caches component data', async () => {
-    const { rerender, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
+  it('renders component progressively', async () => {
+    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
 
-    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent');
-    expect(window.fetch).toHaveBeenCalledTimes(1);
     expect(screen.queryByText('StaticServerComponent')).not.toBeInTheDocument();
 
     await act(async () => {
       pushFirstChunk();
+      render();
     });
+    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props=undefined');
+    expect(window.fetch).toHaveBeenCalledTimes(1);
     expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
     expect(screen.getByText('Loading AsyncComponent...')).toBeInTheDocument();
     expect(screen.queryByText('AsyncComponent')).not.toBeInTheDocument();
@@ -91,24 +105,21 @@ enableFetchMocks();
     });
     expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
     expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();
-
-    // Second render - should use cache
-    rerender();
-
-    expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
-    expect(window.fetch).toHaveBeenCalledTimes(1);
   });
 
   it('replays console logs', async () => {
     const consoleSpy = jest.spyOn(console, 'log');
-    const { rerender, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
+    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
 
     await act(async () => {
+      render();
       pushFirstChunk();
     });
     expect(consoleSpy).toHaveBeenCalledWith(
       expect.stringContaining('Console log at first chunk'),
-      expect.anything(), expect.anything(), expect.anything()
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
     );
     expect(consoleSpy).toHaveBeenCalledTimes(1);
 
@@ -117,28 +128,27 @@ enableFetchMocks();
     });
     expect(consoleSpy).toHaveBeenCalledWith(
       expect.stringContaining('Console log at second chunk'),
-      expect.anything(), expect.anything(), expect.anything()
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
     );
     await act(async () => {
       endStream();
     });
     expect(consoleSpy).toHaveBeenCalledTimes(2);
-
-    // On rerender, console logs should not be replayed again
-    rerender();
-    expect(consoleSpy).toHaveBeenCalledTimes(2);
   });
 
   it('strips leading and trailing slashes from rscPayloadGenerationUrlPath', async () => {
-    const { pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest('/rsc-render/');
+    const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest('/rsc-render/');
 
     await act(async () => {
+      render();
       pushFirstChunk();
       pushSecondChunk();
       endStream();
     });
 
-    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent');
+    expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props=undefined');
     expect(window.fetch).toHaveBeenCalledTimes(1);
 
     expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();