NO MERGE: Replacement for #2835 (reapply RSC payload embedding optimization)

CHANGELOG.md

@@ -24,6 +24,17 @@ After a release, run `/update-changelog` in Claude Code to analyze commits, writ
 
 ### [Unreleased]
 
+#### Performance
+
+- **[Pro]** **Reduce RSC payload overhead by eliminating double JSON.stringify**: RSC Flight data embedded in
+  HTML stream script tags was being JSON.stringified twice — once when wrapping in the result object envelope,
+  and again when embedding in the `<script>` tag's `.push()` call. The second stringify is now eliminated by
+  embedding JSON directly as a JavaScript expression (JSON is a strict subset of JS). This saves ~38KB (~24%
+  of raw Flight data) on a typical product search page with 36 results.
+  [PR 2879](https://github.com/shakacode/react_on_rails/pull/2879) by
+  [justin808](https://github.com/justin808).
+  Fixes [Issue 2522](https://github.com/shakacode/react_on_rails/issues/2522).
+
 #### Removed
 
 - **Removed `immediate_hydration` configuration and parameter**: The `immediate_hydration` config option, helper parameter, `data-immediate-hydration` HTML attribute, and `redux_store` `immediate_hydration:` keyword argument have been completely removed. Immediate hydration is now always enabled for React on Rails Pro users and disabled for non-Pro users, with no per-component override. Remove any `immediate_hydration` references from your initializer and helper calls. Passing `immediate_hydration:` to `react_component` / `react_component_hash` is now ignored, and passing it to `stream_react_component` logs a warning. This change also fixes HTML attribute escaping for redux store names to prevent attribute injection from unsafe store keys. Closes [Issue 2142](https://github.com/shakacode/react_on_rails/issues/2142).

packages/react-on-rails-pro/src/getReactServerComponent.client.ts

@@ -14,13 +14,20 @@
 
 import * as React from 'react';
 import { createFromReadableStream } from 'react-on-rails-rsc/client.browser';
-import { RailsContext } from 'react-on-rails/types';
-import { createRSCPayloadKey, fetch, wrapInNewPromise, extractErrorMessage } from './utils.ts';
+import { RailsContext, RSCPayloadChunk } from 'react-on-rails/types';
+import {
+  createRSCPayloadKey,
+  fetch,
+  wrapInNewPromise,
+  extractErrorMessage,
+  sanitizeNonce,
+  replayConsoleLog,
+} from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
 
 declare global {
   interface Window {
-    REACT_ON_RAILS_RSC_PAYLOADS?: Record<string, string[]>;
+    REACT_ON_RAILS_RSC_PAYLOADS?: Record<string, RSCPayloadChunk[]>;
   }
 }
 
@@ -91,56 +98,73 @@ const fetchRSC = ({
   }
 };
 
-const createRSCStreamFromArray = (payloads: string[]) => {
-  let streamController: ReadableStreamController<string> | undefined;
-  const stream = new ReadableStream<string>({
+/**
+ * Creates a ReadableStream of raw Flight data from preloaded RSC payload objects.
+ *
+ * The payloads are objects (not strings) because injectRSCPayload embeds JSON
+ * directly as JavaScript expressions, avoiding the double JSON.stringify overhead.
+ * This function extracts the html field and replays console logs from each chunk.
+ */
+const createRSCStreamFromPreloadedPayloads = (payloads: RSCPayloadChunk[], cspNonce?: string) => {
+  const encoder = new TextEncoder();
+  const sanitizedNonceValue = sanitizeNonce(cspNonce);
+  let streamController: ReadableStreamController<Uint8Array> | undefined;
+  let closed = false;
+  const stream = new ReadableStream<Uint8Array>({
     start(controller) {
+      // Browser-only by design (callers read from window.REACT_ON_RAILS_RSC_PAYLOADS).
+      // If called outside the browser, close immediately to avoid hanging streams.
       if (typeof window === 'undefined') {
+        closed = true;
+        controller.close();
         return;
       }
-      const handleChunk = (chunk: string) => {
-        controller.enqueue(chunk);
+      const handleChunk = (chunk: RSCPayloadChunk) => {
+        if (closed) return;
+        controller.enqueue(encoder.encode(chunk.html ?? ''));
+        replayConsoleLog(chunk.consoleReplayScript, sanitizedNonceValue);
       };
 
+      const previousPush = payloads.push.bind(payloads);
       payloads.forEach(handleChunk);
       // eslint-disable-next-line no-param-reassign
-      payloads.push = (...chunks) => {
+      payloads.push = (...chunks: RSCPayloadChunk[]) => {
+        const newLength = previousPush(...chunks);
         chunks.forEach(handleChunk);
-        return chunks.length;
+        return newLength;
       };
       streamController = controller;
     },
   });
 
   if (typeof document !== 'undefined' && document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', () => {
+      closed = true;
       streamController?.close();
     });
   } else {
+    // Once parsing is past "loading", all inline <script> tags that push into this array
+    // have already executed, so the preloaded payload list is complete and can be closed now.
+    closed = true;
     streamController?.close();
   }
 
   return stream;
 };
 
 /**
- * Creates React elements from preloaded RSC payloads in the page.
+ * Creates React elements from preloaded RSC payloads embedded in the page.
  *
- * This function:
- * 1. Creates a ReadableStream from the array of payload chunks
- * 2. Transforms the stream to handle console logs and other processing
- * 3. Uses React's createFromReadableStream to process the payload
+ * The payloads are RSCPayloadChunk objects pushed to the global array by
+ * injectRSCPayload's script tags. This processes them directly without
+ * JSON.parse overhead (the objects are already parsed by the JS engine).
  *
- * This is used during hydration to avoid making HTTP requests when
- * the payload is already embedded in the page.
- *
- * @param payloads - Array of RSC payload chunks from the global array
+ * @param payloads - Array of RSC payload chunk objects from the global array
  * @returns A Promise resolving to the rendered React element
  */
-const createFromPreloadedPayloads = (payloads: string[], cspNonce?: string) => {
-  const stream = createRSCStreamFromArray(payloads);
-  const transformedStream = transformRSCStreamAndReplayConsoleLogs(stream, cspNonce);
-  const renderPromise = createFromReadableStream<React.ReactNode>(transformedStream);
+const createFromPreloadedPayloads = (payloads: RSCPayloadChunk[], cspNonce?: string) => {
+  const stream = createRSCStreamFromPreloadedPayloads(payloads, cspNonce);
+  const renderPromise = createFromReadableStream<React.ReactNode>(stream);
   return wrapInNewPromise(renderPromise);
 };
 

packages/react-on-rails-pro/src/injectRSCPayload.ts

@@ -46,8 +46,17 @@ function createRSCPayloadInitializationScript(cacheKey: string, sanitizedNonce?:
   return createScriptTag(cacheKeyJSArray(cacheKey), sanitizedNonce);
 }
 
-function createRSCPayloadChunk(chunk: string, cacheKey: string, sanitizedNonce?: string) {
-  return createScriptTag(`(${cacheKeyJSArray(cacheKey)}).push(${JSON.stringify(chunk)})`, sanitizedNonce);
+function createRSCPayloadChunk(jsonLine: string, cacheKey: string, sanitizedNonce?: string) {
+  // Embed the JSON line directly as a JavaScript expression instead of re-stringifying it.
+  // Valid JSON is a strict subset of JavaScript expressions, so parseable JSON is safe to embed.
+  // createScriptTag's escapeScript() handles HTML-unsafe sequences (</script>, <!--)
+  // using JS-compatible escape sequences that preserve the parsed value.
+  try {
+    JSON.parse(jsonLine);
+  } catch {
+    throw new Error(`Malformed NDJSON line in RSC stream: ${jsonLine.slice(0, 100)}`);
+  }
+  return createScriptTag(`(${cacheKeyJSArray(cacheKey)}).push(${jsonLine})`, sanitizedNonce);
 }
 
 /**
@@ -88,7 +97,6 @@ export default function injectRSCPayload(
   safePipe(pipeableHtmlStream, htmlStream, (err) => {
     resultStream.emit('error', err);
   });
-  const decoder = new TextDecoder();
   let rscPromise: Promise<void> | null = null;
 
   // ========================================
@@ -251,12 +259,37 @@ export default function injectRSCPayload(
         const initializationScript = createRSCPayloadInitializationScript(rscPayloadKey, sanitizedNonce);
         rscInitializationBuffers.push(Buffer.from(initializationScript));
 
-        // Process RSC payload stream asynchronously
+        // Process RSC payload stream asynchronously.
+        // Chunks may not align with JSON object boundaries, so we buffer
+        // incomplete lines (same approach as transformRSCStream).
         rscPromises.push(
           (async () => {
+            let lastIncompleteLine = '';
+            const decoder = new TextDecoder();
             for await (const chunk of stream ?? []) {
-              const decodedChunk = typeof chunk === 'string' ? chunk : decoder.decode(chunk);
-              const payloadScript = createRSCPayloadChunk(decodedChunk, rscPayloadKey, sanitizedNonce);
+              const decodedChunk =
+                lastIncompleteLine +
+                (typeof chunk === 'string' ? chunk : decoder.decode(chunk, { stream: true }));
+              const lines = decodedChunk.split('\n');
+              lastIncompleteLine = lines.pop() ?? '';
+
+              // Contract: upstream stream emits NDJSON (one payload object per line).
+              let bufferedPayloadInThisChunk = false;
+              for (const line of lines) {
+                const normalizedLine = line.trim();
+                if (normalizedLine !== '') {
+                  const payloadScript = createRSCPayloadChunk(normalizedLine, rscPayloadKey, sanitizedNonce);
+                  rscPayloadBuffers.push(Buffer.from(payloadScript));
+                  bufferedPayloadInThisChunk = true;
+                }
+              }
+              if (bufferedPayloadInThisChunk) {
+                scheduleFlush();
+              }
+            }
+            const finalChunk = (lastIncompleteLine + decoder.decode()).trim();
+            if (finalChunk !== '') {
+              const payloadScript = createRSCPayloadChunk(finalChunk, rscPayloadKey, sanitizedNonce);
               rscPayloadBuffers.push(Buffer.from(payloadScript));
               scheduleFlush();
             }

packages/react-on-rails-pro/src/tanstack-router/index.ts

@@ -100,7 +100,7 @@ export function createTanStackRouterRenderFunction(
       return serverRenderTanStackAppAsync(
         options,
         props,
-        railsContext as RailsContext & { serverSide: true },
+        railsContext,
         RouterProvider,
         createMemoryHistory,
       ).then(({ appElement, dehydratedState }) => ({
@@ -127,7 +127,7 @@ export function createTanStackRouterRenderFunction(
       return clientHydrateTanStackApp(
         options,
         clientProps,
-        railsContext as RailsContext & { serverSide: false },
+        railsContext,
         RouterProvider,
         createBrowserHistory,
       );

packages/react-on-rails-pro/src/tanstack-router/serverRender.ts

@@ -102,7 +102,7 @@ export async function serverRenderTanStackAppAsync(
   createMemoryHistory: (opts: { initialEntries: string[] }) => TanStackHistory,
 ): Promise<TanStackServerRenderResult> {
   const router = options.createRouter();
-  const url = railsContext.pathname + normalizeSearch(railsContext.search);
+  const url = `${railsContext.pathname}${normalizeSearch(railsContext.search as string | null | undefined)}`;
 
   const memoryHistory = createMemoryHistory({ initialEntries: [url] });
   router.update({ history: memoryHistory });

packages/react-on-rails-pro/src/transformRSCStreamAndReplayConsoleLogs.ts

@@ -13,7 +13,7 @@
  */
 
 import { RSCPayloadChunk } from 'react-on-rails/types';
-import { sanitizeNonce } from './utils.ts';
+import { sanitizeNonce, replayConsoleLog } from './utils.ts';
 
 /**
  * Transforms an RSC stream and replays console logs on the client.
@@ -45,48 +45,46 @@ export default function transformRSCStreamAndReplayConsoleLogs(
       let { value, done } = await reader.read();
 
       const handleJsonChunk = (chunk: RSCPayloadChunk) => {
-        const { html, consoleReplayScript = '' } = chunk;
+        const { html, consoleReplayScript } = chunk;
         controller.enqueue(encoder.encode(html ?? ''));
+        replayConsoleLog(consoleReplayScript, sanitizedNonce);
+      };
+
+      const parseAndHandleLines = (lines: string[]) => {
+        const jsonChunks = lines
+          .filter((line) => line.trim() !== '')
+          .map((line) => {
+            try {
+              return JSON.parse(line) as RSCPayloadChunk;
+            } catch (error) {
+              console.error('Error parsing JSON:', line, error);
+              throw error;
+            }
+          });
 
-        const replayConsoleCode = consoleReplayScript
-          .trim()
-          .replace(/^<script[^>]*>/i, '')
-          .replace(/<\/script>$/i, '');
-        if (replayConsoleCode?.trim() !== '') {
-          const scriptElement = document.createElement('script');
-          if (sanitizedNonce) {
-            scriptElement.nonce = sanitizedNonce;
-          }
-          scriptElement.textContent = replayConsoleCode;
-          document.body.appendChild(scriptElement);
+        for (const jsonChunk of jsonChunks) {
+          handleJsonChunk(jsonChunk);
         }
       };
 
       try {
         while (!done) {
-          const decodedValue = typeof value === 'string' ? value : decoder.decode(value);
+          const decodedValue = typeof value === 'string' ? value : decoder.decode(value, { stream: true });
           const decodedChunks = lastIncompleteChunk + decodedValue;
           const chunks = decodedChunks.split('\n');
           lastIncompleteChunk = chunks.pop() ?? '';
 
-          const jsonChunks = chunks
-            .filter((line) => line.trim() !== '')
-            .map((line) => {
-              try {
-                return JSON.parse(line) as RSCPayloadChunk;
-              } catch (error) {
-                console.error('Error parsing JSON:', line, error);
-                throw error;
-              }
-            });
-
-          for (const jsonChunk of jsonChunks) {
-            handleJsonChunk(jsonChunk);
-          }
+          parseAndHandleLines(chunks);
 
           // eslint-disable-next-line no-await-in-loop
           ({ value, done } = await reader.read());
         }
+
+        const finalDecodedValue = lastIncompleteChunk + decoder.decode();
+        if (finalDecodedValue.trim() !== '') {
+          parseAndHandleLines(finalDecodedValue.split('\n'));
+        }
+
         controller.close();
       } catch (error) {
         console.error('Error transforming RSC stream:', error);

packages/react-on-rails-pro/src/utils.ts

@@ -49,3 +49,22 @@ export const sanitizeNonce = (nonce?: string) => {
   const nonceWithAllowedCharsOnly = nonce?.replace(/[^a-zA-Z0-9+/=_-]/g, '');
   return nonceWithAllowedCharsOnly?.match(/^[a-zA-Z0-9+/_-]+={0,2}$/)?.[0];
 };
+
+export function replayConsoleLog(consoleReplayScript: string | undefined, sanitizedNonce?: string) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const replayConsoleCode = (consoleReplayScript ?? '')
+    .trim()
+    .replace(/^<script[^>]*>/i, '')
+    .replace(/<\/script>$/i, '');
+  if (replayConsoleCode?.trim() !== '') {
+    const scriptElement = document.createElement('script');
+    if (sanitizedNonce) {
+      scriptElement.nonce = sanitizedNonce;
+    }
+    scriptElement.textContent = replayConsoleCode;
+    document.body.appendChild(scriptElement);
+  }
+}