Stop inserting null placeholders for non-executed loaders in staticHandler.query

.changeset/smart-ads-doubt.md

@@ -0,0 +1,9 @@
+---
+"react-router": patch
+---
+
+Do not automatically add `null` to `staticHandler.query()` `context.loaderData` if routes do not have loaders
+
+- This was a Remix v2 implementation detail inadvertently left in for React Router v7
+- Now that we allow returning `undefined` from loaders, our prior check of `loaderData[routeId] !== undefined` was no longer sufficient and was changed to a `routeId in loaderData` check - these `null` values can cause issues for this new check
+- ⚠️ This could be a "breaking bug fix" for you if you are doing manual SSR with `createStaticHandler()`/`<StaticRouterProvider>`, and using `context.loaderData` to control `<RouterProvider>` hydration behavior on the client

packages/react-router/__tests__/dom/data-static-router-test.tsx

@@ -901,10 +901,7 @@ describe("A <StaticRouterProvider>", () => {
 
     let expectedJsonString = JSON.stringify(
       JSON.stringify({
-        loaderData: {
-          0: null,
-          "0-0": null,
-        },
+        loaderData: {},
         actionData: null,
         errors: null,
       })

packages/react-router/__tests__/router/lazy-test.ts

@@ -2930,9 +2930,7 @@ describe("lazily loaded route modules", () => {
         !(context instanceof Response),
         "Expected a StaticContext instance"
       );
-      expect(context.loaderData).toEqual({
-        root: null,
-      });
+      expect(context.loaderData).toEqual({});
       expect(context.errors).toEqual({
         lazy: new Error("LAZY LOADER ERROR"),
       });
@@ -2969,9 +2967,7 @@ describe("lazily loaded route modules", () => {
         !(context instanceof Response),
         "Expected a StaticContext instance"
       );
-      expect(context.loaderData).toEqual({
-        root: null,
-      });
+      expect(context.loaderData).toEqual({});
       expect(context.errors).toEqual({
         lazy: new Error("LAZY LOADER ERROR"),
       });
@@ -3006,9 +3002,7 @@ describe("lazily loaded route modules", () => {
         !(context instanceof Response),
         "Expected a StaticContext instance"
       );
-      expect(context.loaderData).toEqual({
-        root: null,
-      });
+      expect(context.loaderData).toEqual({});
       expect(context.errors).toEqual({
         root: new Error("LAZY LOADER ERROR"),
       });
@@ -3045,9 +3039,7 @@ describe("lazily loaded route modules", () => {
         !(context instanceof Response),
         "Expected a StaticContext instance"
       );
-      expect(context.loaderData).toEqual({
-        root: null,
-      });
+      expect(context.loaderData).toEqual({});
       expect(context.errors).toEqual({
         root: new Error("LAZY LOADER ERROR"),
       });
@@ -3084,9 +3076,7 @@ describe("lazily loaded route modules", () => {
         !(context instanceof Response),
         "Expected a StaticContext instance"
       );
-      expect(context.loaderData).toEqual({
-        root: null,
-      });
+      expect(context.loaderData).toEqual({});
       expect(context.errors).toEqual({
         root: new Error("LAZY LOADER ERROR"),
       });

packages/react-router/__tests__/router/ssr-test.ts

@@ -186,7 +186,7 @@ describe("ssr", () => {
       });
     });
 
-    it("should fill in null loaderData values for routes without loaders", async () => {
+    it("should not fill in null loaderData values for routes without loaders", async () => {
       let { query } = createStaticHandler([
         {
           id: "root",
@@ -215,10 +215,7 @@ describe("ssr", () => {
       let context = await query(createRequest("/none"));
       expect(context).toMatchObject({
         actionData: null,
-        loaderData: {
-          root: null,
-          none: null,
-        },
+        loaderData: {},
         errors: null,
         location: { pathname: "/none" },
       });
@@ -228,9 +225,7 @@ describe("ssr", () => {
       expect(context).toMatchObject({
         actionData: null,
         loaderData: {
-          root: null,
           a: "A",
-          b: null,
         },
         errors: null,
         location: { pathname: "/a/b" },

packages/react-router/__tests__/server-runtime/server-test.ts

@@ -1339,10 +1339,7 @@ describe("shared server runtime", () => {
       let context = calls[0][3].staticHandlerContext as StaticHandlerContext;
       expect(context.errors).toBeTruthy();
       expect(context.errors!.root.status).toBe(400);
-      expect(context.loaderData).toEqual({
-        root: null,
-        "routes/test": null,
-      });
+      expect(context.loaderData).toEqual({});
     });
 
     test("thrown action responses bubble up for index routes", async () => {
@@ -1386,10 +1383,7 @@ describe("shared server runtime", () => {
       let context = calls[0][3].staticHandlerContext as StaticHandlerContext;
       expect(context.errors).toBeTruthy();
       expect(context.errors!.root.status).toBe(400);
-      expect(context.loaderData).toEqual({
-        root: null,
-        "routes/_index": null,
-      });
+      expect(context.loaderData).toEqual({});
     });
 
     test("thrown action responses catch deep", async () => {
@@ -1435,7 +1429,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/test"].status).toBe(400);
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/test": null,
       });
     });
 
@@ -1482,7 +1475,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/_index"].status).toBe(400);
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/_index": null,
       });
     });
 
@@ -1537,8 +1529,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/__layout"].data).toBe("action");
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/__layout": null,
-        "routes/__layout/test": null,
       });
     });
 
@@ -1593,8 +1583,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/__layout"].data).toBe("action");
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/__layout": null,
-        "routes/__layout/index": null,
       });
     });
 
@@ -1728,10 +1716,7 @@ describe("shared server runtime", () => {
       expect(context.errors!.root).toBeInstanceOf(Error);
       expect(context.errors!.root.message).toBe("Unexpected Server Error");
       expect(context.errors!.root.stack).toBeUndefined();
-      expect(context.loaderData).toEqual({
-        root: null,
-        "routes/test": null,
-      });
+      expect(context.loaderData).toEqual({});
     });
 
     test("action errors bubble up for index routes", async () => {
@@ -1777,10 +1762,7 @@ describe("shared server runtime", () => {
       expect(context.errors!.root).toBeInstanceOf(Error);
       expect(context.errors!.root.message).toBe("Unexpected Server Error");
       expect(context.errors!.root.stack).toBeUndefined();
-      expect(context.loaderData).toEqual({
-        root: null,
-        "routes/_index": null,
-      });
+      expect(context.loaderData).toEqual({});
     });
 
     test("action errors catch deep", async () => {
@@ -1830,7 +1812,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/test"].stack).toBeUndefined();
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/test": null,
       });
     });
 
@@ -1881,7 +1862,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/_index"].stack).toBeUndefined();
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/_index": null,
       });
     });
 
@@ -1940,8 +1920,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/__layout"].stack).toBeUndefined();
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/__layout": null,
-        "routes/__layout/test": null,
       });
     });
 
@@ -2000,8 +1978,6 @@ describe("shared server runtime", () => {
       expect(context.errors!["routes/__layout"].stack).toBeUndefined();
       expect(context.loaderData).toEqual({
         root: "root",
-        "routes/__layout": null,
-        "routes/__layout/index": null,
       });
     });
 

packages/react-router/lib/router/router.ts

@@ -4165,11 +4165,7 @@ export function createStaticHandler(
     if (!dataStrategy && !dsMatches.some((m) => m.shouldLoad)) {
       return {
         matches,
-        // Add a null for all matched routes for proper revalidation on the client
-        loaderData: matches.reduce(
-          (acc, m) => Object.assign(acc, { [m.route.id]: null }),
-          {}
-        ),
+        loaderData: {},
         errors:
           pendingActionResult && isErrorResult(pendingActionResult[1])
             ? {
@@ -4202,16 +4198,6 @@ export function createStaticHandler(
       skipLoaderErrorBubbling
     );
 
-    // Add a null for any non-loader matches for proper revalidation on the client
-    let executedLoaders = new Set<string>(
-      dsMatches.filter((m) => m.shouldLoad).map((match) => match.route.id)
-    );
-    matches.forEach((match) => {
-      if (!executedLoaders.has(match.route.id)) {
-        handlerContext.loaderData[match.route.id] = null;
-      }
-    });
-
     return {
       ...handlerContext,
       matches,