From 3a208537e899421218d38347b224bdb542755323 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Sat, 28 Mar 2026 11:09:21 -1000
Subject: [PATCH 1/2] Reapply "Eliminate double JSON.stringify in RSC payload
 embedding (#2835)" (#2878)

This reverts commit 395fa1f06287f9290c8a9456f0ab38306a4763d9.
---
 CHANGELOG.md                                  |  11 ++
 .../src/getReactServerComponent.client.ts     |  66 ++++++----
 .../src/injectRSCPayload.ts                   |  45 ++++++-
 .../transformRSCStreamAndReplayConsoleLogs.ts |  54 ++++----
 packages/react-on-rails-pro/src/utils.ts      |  19 +++
 .../tests/RSCRequestTracker.test.ts           |   6 +-
 .../tests/injectRSCPayload.test.ts            | 117 ++++++++++++++----
 .../registerServerComponent.client.test.jsx   |  21 ++--
 8 files changed, 247 insertions(+), 92 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b92aeec04..c5b98c4246 100644
--- a/CHANGELOG.md
+++ b/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 2835](https://github.com/shakacode/react_on_rails/pull/2835) by
+  [justin808](https://github.com/justin808).
+  Fixes [Issue 2522](https://github.com/shakacode/react_on_rails/issues/2522).
+
 ### [16.5.1] - 2026-03-27
 
 #### Fixed
diff --git a/packages/react-on-rails-pro/src/getReactServerComponent.client.ts b/packages/react-on-rails-pro/src/getReactServerComponent.client.ts
index baf07de35c..7807fc2cdf 100644
--- a/packages/react-on-rails-pro/src/getReactServerComponent.client.ts
+++ b/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,20 +98,36 @@ 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);
       };
 
       payloads.forEach(handleChunk);
       // eslint-disable-next-line no-param-reassign
-      payloads.push = (...chunks) => {
+      payloads.push = (...chunks: RSCPayloadChunk[]) => {
         chunks.forEach(handleChunk);
         return chunks.length;
       };
@@ -114,9 +137,13 @@ const createRSCStreamFromArray = (payloads: string[]) => {
 
   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();
   }
 
@@ -124,23 +151,18 @@ const createRSCStreamFromArray = (payloads: string[]) => {
 };
 
 /**
- * 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);
 };
 
diff --git a/packages/react-on-rails-pro/src/injectRSCPayload.ts b/packages/react-on-rails-pro/src/injectRSCPayload.ts
index 780a6364cf..990db3d65c 100644
--- a/packages/react-on-rails-pro/src/injectRSCPayload.ts
+++ b/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();
             }
diff --git a/packages/react-on-rails-pro/src/transformRSCStreamAndReplayConsoleLogs.ts b/packages/react-on-rails-pro/src/transformRSCStreamAndReplayConsoleLogs.ts
index 5c4173acb8..417021cdcf 100644
--- a/packages/react-on-rails-pro/src/transformRSCStreamAndReplayConsoleLogs.ts
+++ b/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);
diff --git a/packages/react-on-rails-pro/src/utils.ts b/packages/react-on-rails-pro/src/utils.ts
index 154a93fd30..cc3633c4d9 100644
--- a/packages/react-on-rails-pro/src/utils.ts
+++ b/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);
+  }
+}
diff --git a/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts b/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts
index 945a628e5f..d919a17476 100644
--- a/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts
+++ b/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts
@@ -222,10 +222,10 @@ describe('RSCRequestTracker', () => {
       expect(result).toContain('<html><body>');
       expect(result).toContain('</body></html>');
 
-      // Output must contain the RSC payload initialization and data scripts
+      // Output must contain the RSC payload initialization and data scripts.
+      // The payload JSON is embedded directly as a JS expression (not re-stringified).
       expect(result).toContain('REACT_ON_RAILS_RSC_PAYLOADS');
-      expect(result).toContain('.push(');
-      expect(result).toContain(JSON.stringify(payload));
+      expect(result).toContain(`.push(${payload})`);
     });
 
     it('does not deadlock with large multi-chunk payloads exceeding the default highWaterMark', async () => {
diff --git a/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts b/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts
index a6ca053040..6d2fd62ea6 100644
--- a/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts
+++ b/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts
@@ -48,7 +48,7 @@ const setupTest = (mockRSC: Readable) => {
 
 describe('injectRSCPayload', () => {
   it('should inject RSC payload as script tags', async () => {
-    const mockRSC = createMockStream(['{"test": "data"}']);
+    const mockRSC = createMockStream(['{"test": "data"}\n']);
     const mockHTML = createMockStream(['<html><body><div>Hello, world!</div></body></html>']);
     const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
 
@@ -56,12 +56,12 @@ describe('injectRSCPayload', () => {
     const resultStr = await collectStreamData(result);
 
     expect(resultStr).toContain(
-      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data\\"}")</script>`,
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data"})</script>`,
     );
   });
 
   it('should handle multiple RSC payloads', async () => {
-    const mockRSC = createMockStream(['{"test": "data"}', '{"test": "data2"}']);
+    const mockRSC = createMockStream(['{"test": "data"}\n', '{"test": "data2"}\n']);
     const mockHTML = createMockStream(['<html><body><div>Hello, world!</div></body></html>']);
     const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
 
@@ -69,15 +69,15 @@ describe('injectRSCPayload', () => {
     const resultStr = await collectStreamData(result);
 
     expect(resultStr).toContain(
-      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data\\"}")</script>`,
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data"})</script>`,
     );
     expect(resultStr).toContain(
-      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>`,
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data2"})</script>`,
     );
   });
 
   it('should add all ready html chunks before adding RSC payloads', async () => {
-    const mockRSC = createMockStream(['{"test": "data"}', '{"test": "data2"}']);
+    const mockRSC = createMockStream(['{"test": "data"}\n', '{"test": "data2"}\n']);
     const mockHTML = createMockStream([
       '<html><body><div>Hello, world!</div></body></html>',
       '<div>Next chunk</div>',
@@ -91,13 +91,13 @@ describe('injectRSCPayload', () => {
       '<script>(self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]</script>' +
         '<html><body><div>Hello, world!</div></body></html>' +
         '<div>Next chunk</div>' +
-        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data\\"}")</script>' +
-        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>',
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data"})</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data2"})</script>',
     );
   });
 
   it('adds delayed html chunks after RSC payloads', async () => {
-    const mockRSC = createMockStream(['{"test": "data"}', '{"test": "data2"}']);
+    const mockRSC = createMockStream(['{"test": "data"}\n', '{"test": "data2"}\n']);
     const mockHTML = createMockStream({
       0: '<html><body><div>Hello, world!</div></body></html>',
       100: '<div>Next chunk</div>',
@@ -110,16 +110,16 @@ describe('injectRSCPayload', () => {
     expect(resultStr).toEqual(
       '<script>(self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]</script>' +
         '<html><body><div>Hello, world!</div></body></html>' +
-        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data\\"}")</script>' +
-        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data"})</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data2"})</script>' +
         '<div>Next chunk</div>',
     );
   });
 
   it('handles the case when html is delayed', async () => {
     const mockRSC = createMockStream({
-      0: '{"test": "data"}',
-      150: '{"test": "data2"}',
+      0: '{"test": "data"}\n',
+      150: '{"test": "data2"}\n',
     });
     const mockHTML = createMockStream({
       100: ['<html><body><div>Hello, world!</div></body></html>', '<div>Next chunk</div>'],
@@ -134,15 +134,15 @@ describe('injectRSCPayload', () => {
       '<script>(self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]</script>' +
         '<html><body><div>Hello, world!</div></body></html>' +
         '<div>Next chunk</div>' +
-        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data\\"}")</script>' +
-        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"test\\": \\"data2\\"}")</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data"})</script>' +
+        '<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data2"})</script>' +
         '<div>Third chunk</div>',
     );
   });
 
   it('should include RSC payload that arrives after HTML stream finishes', async () => {
     const mockRSC = createMockStream({
-      300: '{"late": "rsc_data"}',
+      300: '{"late": "rsc_data"}\n',
     });
     const mockHTML = createMockStream({
       0: '<html><body>Hello</body></html>',
@@ -154,14 +154,14 @@ describe('injectRSCPayload', () => {
 
     expect(resultStr).toContain('<html><body>Hello</body></html>');
     expect(resultStr).toContain(
-      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"late\\": \\"rsc_data\\"}")</script>`,
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"late": "rsc_data"})</script>`,
     );
   });
 
   it('should include all RSC payloads arriving at different times after HTML stream finishes', async () => {
     const mockRSC = createMockStream({
-      200: '{"first": "chunk"}',
-      400: '{"second": "chunk"}',
+      200: '{"first": "chunk"}\n',
+      400: '{"second": "chunk"}\n',
     });
     const mockHTML = createMockStream({
       0: '<div>content</div>',
@@ -173,15 +173,86 @@ describe('injectRSCPayload', () => {
 
     expect(resultStr).toContain('<div>content</div>');
     expect(resultStr).toContain(
-      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"first\\": \\"chunk\\"}")</script>`,
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"first": "chunk"})</script>`,
     );
     expect(resultStr).toContain(
-      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push("{\\"second\\": \\"chunk\\"}")</script>`,
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"second": "chunk"})</script>`,
     );
   });
 
+  it('handles chunks that split across JSON object boundaries', async () => {
+    const mockRSC = createMockStream(['{"test": "data"}\n{"test": "dat', 'a2"}\n']);
+    const mockHTML = createMockStream(['<html><body>Hello</body></html>']);
+    const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, rscRequestTracker, domNodeId);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data"})</script>`,
+    );
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test": "data2"})</script>`,
+    );
+  });
+
+  it('handles chunks that split a multibyte UTF-8 character', async () => {
+    const mockRSC = createMockStream([
+      Buffer.from('{"test":"'),
+      Buffer.from([0xf0, 0x9f]),
+      Buffer.from([0x98, 0x80]),
+      Buffer.from('"}\n'),
+    ]);
+    const mockHTML = createMockStream(['<html><body>Hello</body></html>']);
+    const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, rscRequestTracker, domNodeId);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test":"😀"})</script>`,
+    );
+  });
+
+  it('normalizes CRLF on the final buffered payload chunk', async () => {
+    const mockRSC = createMockStream(['{"test":"data"}\r\n', '{"final":"chunk"}\r']);
+    const mockHTML = createMockStream(['<html><body>Hello</body></html>']);
+    const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, rscRequestTracker, domNodeId);
+    const resultStr = await collectStreamData(result);
+
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test":"data"})</script>`,
+    );
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"final":"chunk"})</script>`,
+    );
+    expect(resultStr).not.toContain('\r');
+  });
+
+  it('emits an error instead of embedding malformed NDJSON as invalid JavaScript', async () => {
+    const mockRSC = createMockStream(['{"test":"data"}\n', '{"broken": }\n']);
+    const mockHTML = createMockStream(['<html><body>Hello</body></html>']);
+    const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
+
+    const result = injectRSCPayload(mockHTML, rscRequestTracker, domNodeId);
+    const errorPromise = new Promise<Error>((resolve) => {
+      result.once('error', (error) => resolve(error as Error));
+    });
+    const resultStr = await collectStreamData(result);
+    const error = await errorPromise;
+
+    expect(resultStr).toContain('<html><body>Hello</body></html>');
+    expect(resultStr).toContain(
+      `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test":"data"})</script>`,
+    );
+    expect(resultStr).not.toContain('{"broken": }');
+    expect(error.message).toContain('Malformed NDJSON line in RSC stream');
+  });
+
   it('adds sanitized nonce attribute to injected RSC script tags', async () => {
-    const mockRSC = createMockStream(['{"test": "data"}']);
+    const mockRSC = createMockStream(['{"test": "data"}\n']);
     const mockHTML = createMockStream(['<html><body><div>Hello, world!</div></body></html>']);
     const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
 
@@ -193,7 +264,7 @@ describe('injectRSCPayload', () => {
   });
 
   it('adds valid nonce attribute to injected RSC script tags', async () => {
-    const mockRSC = createMockStream(['{"test": "data"}']);
+    const mockRSC = createMockStream(['{"test": "data"}\n']);
     const mockHTML = createMockStream(['<html><body><div>Hello, world!</div></body></html>']);
     const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
 
diff --git a/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx b/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx
index e9bad6cf8f..fec45b2be6 100644
--- a/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx
+++ b/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx
@@ -152,20 +152,21 @@ enableFetchMocks();
   });
 
   describe('preloaded RSC payloads', () => {
-    let chunk1;
-    let chunk2;
+    let chunk1Obj;
+    let chunk2Obj;
     let railsContext;
 
     beforeEach(() => {
-      // Setup test fixtures
+      // Setup test fixtures — preloaded payloads are objects (not strings)
+      // because injectRSCPayload embeds JSON directly as JS expressions
       const chunksDirectory = path.join(
         __dirname,
         'fixtures',
         'rsc-payloads',
         'simple-shell-with-async-component',
       );
-      chunk1 = JSON.stringify(JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk1.json'), 'utf8')));
-      chunk2 = JSON.stringify(JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk2.json'), 'utf8')));
+      chunk1Obj = JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk1.json'), 'utf8'));
+      chunk2Obj = JSON.parse(fs.readFileSync(path.join(chunksDirectory, 'chunk2.json'), 'utf8'));
 
       registerServerComponent('TestComponent');
       railsContext = {
@@ -182,9 +183,9 @@ enableFetchMocks();
     });
 
     it('uses preloaded RSC payloads without making a fetch request', async () => {
-      // Mock the global window.REACT_ON_RAILS_RSC_PAYLOADS
+      // Mock the global window.REACT_ON_RAILS_RSC_PAYLOADS with objects
       window.REACT_ON_RAILS_RSC_PAYLOADS = {
-        'TestComponent-{}-test-container': [`${chunk1}\n`, `${chunk2}\n`],
+        'TestComponent-{}-test-container': [chunk1Obj, chunk2Obj],
       };
 
       await act(async () => {
@@ -208,7 +209,7 @@ enableFetchMocks();
 
       // Mock the global window.REACT_ON_RAILS_RSC_PAYLOADS with only the first chunk initially
       window.REACT_ON_RAILS_RSC_PAYLOADS = {
-        'TestComponent-{}-test-container': [`${chunk1}\n`],
+        'TestComponent-{}-test-container': [chunk1Obj],
       };
 
       await act(async () => {
@@ -224,9 +225,9 @@ enableFetchMocks();
       expect(screen.getByText('Loading AsyncComponent...')).toBeInTheDocument();
       expect(screen.queryByText('AsyncComponent')).not.toBeInTheDocument();
 
-      // Now push the second chunk to the preloaded array and set document to complete
+      // Now push the second chunk object to the preloaded array and set document to complete
       await act(async () => {
-        window.REACT_ON_RAILS_RSC_PAYLOADS['TestComponent-{}-test-container'].push(`${chunk2}\n`);
+        window.REACT_ON_RAILS_RSC_PAYLOADS['TestComponent-{}-test-container'].push(chunk2Obj);
 
         // Set document.readyState to 'complete' and dispatch readystatechange event
         Object.defineProperty(document, 'readyState', { value: 'complete', writable: true });

From 50ff9494fc2b79949f0ffed5b77eb5a9e4e93166 Mon Sep 17 00:00:00 2001
From: Justin Gordon <justin@shakacode.com>
Date: Tue, 7 Apr 2026 21:36:52 -1000
Subject: [PATCH 2/2] test: stabilize merged RSC payload specs

---
 .../tests/RSCRequestTracker.test.ts           | 23 +++++++++-----
 .../tests/injectRSCPayload.test.ts            | 31 +++++++++++++++----
 .../registerServerComponent.client.test.jsx   |  6 ++--
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts b/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts
index d919a17476..b6670420fd 100644
--- a/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts
+++ b/packages/react-on-rails-pro/tests/RSCRequestTracker.test.ts
@@ -40,6 +40,17 @@ const collectStreamData = async (stream: NodeJS.ReadableStream): Promise<Buffer>
   return Buffer.concat(chunks);
 };
 
+const createNDJSONChunk = (size: number, fillChar = 'a') =>
+  `${JSON.stringify({ chunk: fillChar.repeat(size) })}\n`;
+
+const pushNDJSONChunks = (stream: PassThrough, chunkCount: number, chunkSize = 1024, fillChar = 'a') => {
+  const chunk = createNDJSONChunk(chunkSize, fillChar);
+  for (let i = 0; i < chunkCount; i++) {
+    stream.push(chunk);
+  }
+  stream.push(null);
+};
+
 // Simulates what React's renderToPipeableStream does: reads the RSC Flight stream (stream1)
 // and produces HTML output. In a real app, React uses stream1 to resolve server component
 // references and renders them to HTML. Here we just wrap the raw bytes in an HTML shell,
@@ -241,11 +252,7 @@ describe('RSCRequestTracker', () => {
       // This exceeds the default 16KB highWaterMark.
       const chunkCount = 64;
       const chunkSize = 1024;
-      const chunk = 'z'.repeat(chunkSize);
-      for (let i = 0; i < chunkCount; i++) {
-        source.push(chunk);
-      }
-      source.push(null);
+      pushNDJSONChunks(source, chunkCount, chunkSize, 'z');
 
       const result = (await collectStreamData(resultStream)).toString();
 
@@ -270,7 +277,7 @@ describe('RSCRequestTracker', () => {
       // Drip-feed 32KB over 32ms — simulates a real RSC stream producing chunks over time
       const chunkSize = 1024;
       const chunkCount = 32;
-      const chunk = 'q'.repeat(chunkSize);
+      const chunk = createNDJSONChunk(chunkSize, 'q');
       let pushed = 0;
       const pushInterval = setInterval(() => {
         if (pushed >= chunkCount) {
@@ -326,7 +333,7 @@ describe('RSCRequestTracker', () => {
       const resultStream = injectRSCPayload(htmlStream, tracker, 'blog-node');
 
       // Push 128KB as 1KB chunks
-      const totalBytes = pushChunks(source, HIGHWATER_MARK * 8);
+      pushNDJSONChunks(source, Math.ceil((HIGHWATER_MARK * 8) / 1024));
 
       const result = (await collectStreamData(resultStream)).toString();
 
@@ -350,7 +357,7 @@ describe('RSCRequestTracker', () => {
       // Drip-feed 128KB over ~128ms
       const chunkSize = 1024;
       const chunkCount = 128;
-      const chunk = 'r'.repeat(chunkSize);
+      const chunk = createNDJSONChunk(chunkSize, 'r');
       let pushed = 0;
       const pushInterval = setInterval(() => {
         if (pushed >= chunkCount) {
diff --git a/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts b/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts
index 6d2fd62ea6..ebccac1cb7 100644
--- a/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts
+++ b/packages/react-on-rails-pro/tests/injectRSCPayload.test.ts
@@ -35,6 +35,29 @@ const collectStreamData = async (stream: Readable) => {
   return chunks.join('');
 };
 
+const collectStreamDataAndError = (stream: Readable) =>
+  new Promise<{ data: string; error?: Error }>((resolve) => {
+    const chunks: string[] = [];
+    let capturedError: Error | undefined;
+    let settled = false;
+    const finish = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      resolve({ data: chunks.join(''), error: capturedError });
+    };
+
+    stream.on('data', (chunk) => {
+      chunks.push(new TextDecoder().decode(chunk as Buffer));
+    });
+    stream.once('error', (error) => {
+      capturedError = error as Error;
+    });
+    stream.once('end', finish);
+    stream.once('close', finish);
+  });
+
 // Test setup helper
 const setupTest = (mockRSC: Readable) => {
   const railsContext = {} as RailsContextWithServerStreamingCapabilities;
@@ -237,18 +260,14 @@ describe('injectRSCPayload', () => {
     const { rscRequestTracker, domNodeId } = setupTest(mockRSC);
 
     const result = injectRSCPayload(mockHTML, rscRequestTracker, domNodeId);
-    const errorPromise = new Promise<Error>((resolve) => {
-      result.once('error', (error) => resolve(error as Error));
-    });
-    const resultStr = await collectStreamData(result);
-    const error = await errorPromise;
+    const { data: resultStr, error } = await collectStreamDataAndError(result);
 
     expect(resultStr).toContain('<html><body>Hello</body></html>');
     expect(resultStr).toContain(
       `<script>((self.REACT_ON_RAILS_RSC_PAYLOADS||={})["test-{}-test-node"]||=[]).push({"test":"data"})</script>`,
     );
     expect(resultStr).not.toContain('{"broken": }');
-    expect(error.message).toContain('Malformed NDJSON line in RSC stream');
+    expect(error?.message).toContain('Malformed NDJSON line in RSC stream');
   });
 
   it('adds sanitized nonce attribute to injected RSC script tags', async () => {
diff --git a/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx b/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx
index 0a39923634..04f5014a5a 100644
--- a/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx
+++ b/packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx
@@ -221,8 +221,8 @@ enableFetchMocks();
       expect(window.fetch).not.toHaveBeenCalled();
 
       // After first chunk, StaticServerComponent should be visible but AsyncComponent should be loading
-      expect(screen.getByText('StaticServerComponent')).toBeInTheDocument();
-      expect(screen.getByText('Loading AsyncComponent...')).toBeInTheDocument();
+      expect(await screen.findByText('StaticServerComponent')).toBeInTheDocument();
+      expect(await screen.findByText('Loading AsyncComponent...')).toBeInTheDocument();
       expect(screen.queryByText('AsyncComponent')).not.toBeInTheDocument();
 
       // Now push the second chunk object to the preloaded array and set document to complete
@@ -238,7 +238,7 @@ enableFetchMocks();
       expect(window.REACT_ON_RAILS_RSC_PAYLOADS['TestComponent-{}-test-container']).toHaveLength(2);
 
       // After the second chunk, AsyncComponent should now be visible and loading indicator gone
-      expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
+      expect(await screen.findByText('AsyncComponent')).toBeInTheDocument();
       expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();
 
       // Restore original readyState