Refactor RSC payload key generation to include domNodeId

Author: AbanoubGhadban

node_package/src/getReactServerComponent.client.ts

@@ -165,9 +165,7 @@ const createFromPreloadedPayloads = (payloads: string[]) => {
 const getReactServerComponent =
   (domNodeId: string, railsContext: RailsContext) =>
   ({ componentName, componentProps, enforceRefetch = false }: ClientGetReactServerComponentProps) => {
-    const componentCacheKey = createRSCPayloadKey(componentName, componentProps);
-
-    const rscPayloadKey = `${componentCacheKey}-${domNodeId}`;
+    const rscPayloadKey = createRSCPayloadKey(componentName, componentProps, domNodeId);
     const payloads = window.REACT_ON_RAILS_RSC_PAYLOADS?.[rscPayloadKey];
     if (!enforceRefetch && payloads) {
       return createFromPreloadedPayloads(payloads);

node_package/src/injectRSCPayload.ts

@@ -210,8 +210,7 @@ export default function injectRSCPayload(
 
       rscRequestTracker.onRSCPayloadGenerated((streamInfo) => {
         const { stream, props, componentName } = streamInfo;
-        const cacheKey = createRSCPayloadKey(componentName, props);
-        const rscPayloadKey = `${cacheKey}-${domNodeId}`;
+        const rscPayloadKey = createRSCPayloadKey(componentName, props, domNodeId);
 
         // CRITICAL TIMING: Initialize global array IMMEDIATELY when component requests RSC
         // This ensures the array exists before the component's HTML is rendered and sent.

node_package/src/utils.ts

@@ -21,8 +21,8 @@ export { customFetch as fetch };
  * @param componentProps - Props passed to the component (serialized to JSON)
  * @returns A unique cache key string
  */
-export const createRSCPayloadKey = (componentName: string, componentProps: unknown) => {
-  return `${componentName}-${JSON.stringify(componentProps)}`;
+export const createRSCPayloadKey = (componentName: string, componentProps: unknown, domNodeId?: string) => {
+  return `${componentName}-${JSON.stringify(componentProps)}${domNodeId ? `-${domNodeId}` : ''}`;
 };
 
 /**