Skip to content

Commit 16f464f

Browse files
brophdawg11brophdawg11
committed
Delay turbo-stream serialization of .data redirects
1 parent c208585 commit 16f464f

File tree

4 files changed

+107
-100
lines changed

4 files changed

+107
-100
lines changed

‎.changeset/quiet-cows-build.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router": patch
3+
---
4+
5+
[UNSTABLE] Delay serialization of `.data` redirects to 202 responses until after middleware chain

‎integration/middleware-test.ts‎

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import type {
33
Response as PlaywrightResponse,
44
} from "@playwright/test";
55
import { test, expect } from "@playwright/test";
6-
import { UNSAFE_ErrorResponseImpl, UNSAFE_ServerMode } from "react-router";
6+
import {
7+
UNSAFE_ErrorResponseImpl,
8+
UNSAFE_ServerMode,
9+
UNSAFE_SingleFetchRedirectSymbol,
10+
} from "react-router";
711

812
import {
913
createAppFixture,
@@ -1876,8 +1880,12 @@ test.describe("Middleware", () => {
18761880
},
18771881
});
18781882

1879-
let appFixture = await createAppFixture(fixture);
1883+
let res = await fixture.requestDocument("/redirect");
1884+
expect(res.status).toBe(302);
1885+
expect(res.headers.get("location")).toBe("/target");
1886+
expect(res.body).toBeNull();
18801887

1888+
let appFixture = await createAppFixture(fixture);
18811889
let app = new PlaywrightFixture(appFixture, page);
18821890
await app.goto("/");
18831891
await page.waitForSelector('a:has-text("Link")');
@@ -1933,8 +1941,12 @@ test.describe("Middleware", () => {
19331941
},
19341942
});
19351943

1936-
let appFixture = await createAppFixture(fixture);
1944+
let res = await fixture.requestDocument("/redirect");
1945+
expect(res.status).toBe(302);
1946+
expect(res.headers.get("location")).toBe("/target");
1947+
expect(res.body).toBeNull();
19371948

1949+
let appFixture = await createAppFixture(fixture);
19381950
let app = new PlaywrightFixture(appFixture, page);
19391951
await app.goto("/");
19401952
await page.waitForSelector('a:has-text("Link")');
@@ -1945,6 +1957,66 @@ test.describe("Middleware", () => {
19451957
appFixture.close();
19461958
});
19471959

1960+
test("doesn't serialize single fetch redirects until after the middleware chain", async ({
1961+
page,
1962+
}) => {
1963+
let fixture = await createFixture({
1964+
files: {
1965+
"react-router.config.ts": reactRouterConfig({
1966+
middleware: true,
1967+
}),
1968+
"vite.config.ts": js`
1969+
import { defineConfig } from "vite";
1970+
import { reactRouter } from "@react-router/dev/vite";
1971+
1972+
export default defineConfig({
1973+
build: { manifest: true },
1974+
plugins: [reactRouter()],
1975+
});
1976+
`,
1977+
"app/routes/redirect.tsx": js`
1978+
import { Link, redirect } from 'react-router'
1979+
export const unstable_middleware = [
1980+
async ({ request, context }, next) => {
1981+
let res = await next();
1982+
// Should still be a normal redirect here, not yet encoded into
1983+
// a single fetch redirect
1984+
res.headers.set("X-Status", res.status);
1985+
res.headers.set("X-Location", res.headers.get('Location'));
1986+
return res;
1987+
}
1988+
]
1989+
export function loader() {
1990+
throw redirect('/target');
1991+
}
1992+
export default function Component() {
1993+
return <h1>Redirect</h1>
1994+
}
1995+
`,
1996+
"app/routes/target.tsx": js`
1997+
export default function Component() {
1998+
return <h1>Target</h1>
1999+
}
2000+
`,
2001+
},
2002+
});
2003+
2004+
let res = await fixture.requestSingleFetchData("/redirect.data");
2005+
expect(res.status).toBe(202);
2006+
expect(res.headers.get("location")).toBe(null);
2007+
expect(res.headers.get("x-status")).toBe("302");
2008+
expect(res.headers.get("x-location")).toBe("/target");
2009+
expect(res.data).toEqual({
2010+
[UNSAFE_SingleFetchRedirectSymbol]: {
2011+
redirect: "/target",
2012+
reload: false,
2013+
replace: false,
2014+
revalidate: false,
2015+
status: 302,
2016+
},
2017+
});
2018+
});
2019+
19482020
test("handles errors thrown on the way down (document)", async ({
19492021
page,
19502022
}) => {

‎packages/react-router/lib/server-runtime/server.ts‎

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,10 @@ import {
3131
singleFetchAction,
3232
singleFetchLoaders,
3333
SERVER_NO_BODY_STATUS_CODES,
34+
generateSingleFetchResponse,
3435
} from "./single-fetch";
3536
import { getDocumentHeaders } from "./headers";
3637
import type { EntryRoute } from "../dom/ssr/routes";
37-
import type {
38-
SingleFetchResult,
39-
SingleFetchResults,
40-
} from "../dom/ssr/single-fetch";
4138
import {
4239
SINGLE_FETCH_REDIRECT_STATUS,
4340
SingleFetchRedirectSymbol,
@@ -275,36 +272,27 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
275272
params: singleFetchMatches ? singleFetchMatches[0].params : {},
276273
request,
277274
});
275+
}
278276

279-
if (isRedirectResponse(response)) {
280-
let result: SingleFetchResult | SingleFetchResults =
281-
getSingleFetchRedirect(
282-
response.status,
283-
response.headers,
284-
_build.basename,
285-
);
286-
287-
if (request.method === "GET") {
288-
result = {
289-
[SingleFetchRedirectSymbol]: result,
290-
};
291-
}
292-
let headers = new Headers(response.headers);
293-
headers.set("Content-Type", "text/x-script");
294-
295-
return new Response(
296-
encodeViaTurboStream(
297-
result,
298-
request.signal,
299-
_build.entry.module.streamTimeout,
300-
serverMode,
301-
),
302-
{
303-
status: SINGLE_FETCH_REDIRECT_STATUS,
304-
headers,
305-
},
306-
);
307-
}
277+
if (isRedirectResponse(response)) {
278+
let redirect = getSingleFetchRedirect(
279+
response.status,
280+
response.headers,
281+
_build.basename,
282+
);
283+
284+
let headers = new Headers(response.headers);
285+
headers.delete("Location");
286+
headers.set("Content-Type", "text/x-script");
287+
288+
response = generateSingleFetchResponse(request, _build, serverMode, {
289+
result:
290+
request.method === "GET"
291+
? { [SingleFetchRedirectSymbol]: redirect }
292+
: redirect,
293+
headers,
294+
status: SINGLE_FETCH_REDIRECT_STATUS,
295+
});
308296
}
309297
} else if (
310298
!isSpaMode &&

‎packages/react-router/lib/server-runtime/single-fetch.ts‎

Lines changed: 6 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { encode } from "../../vendor/turbo-stream-v2/turbo-stream";
22
import type { StaticHandler, StaticHandlerContext } from "../router/router";
3-
import {
4-
isRedirectResponse,
5-
isRedirectStatusCode,
6-
isResponse,
7-
} from "../router/router";
3+
import { isRedirectStatusCode, isResponse } from "../router/router";
84
import type { unstable_RouterContextProvider } from "../router/utils";
95
import {
106
isRouteErrorResponse,
@@ -19,7 +15,6 @@ import type {
1915
} from "../dom/ssr/single-fetch";
2016
import {
2117
NO_BODY_STATUS_CODES,
22-
SINGLE_FETCH_REDIRECT_STATUS,
2318
SingleFetchRedirectSymbol,
2419
} from "../dom/ssr/single-fetch";
2520
import type { AppLoadContext } from "./data";
@@ -78,25 +73,7 @@ export async function singleFetchAction(
7873
function handleQueryResult(
7974
result: Awaited<ReturnType<StaticHandler["query"]>>,
8075
) {
81-
if (!isResponse(result)) {
82-
result = staticContextToResponse(result);
83-
}
84-
85-
// Unlike `handleDataRequest`, when singleFetch is enabled, query does
86-
// let non-Response return values through
87-
if (isRedirectResponse(result)) {
88-
return generateSingleFetchResponse(request, build, serverMode, {
89-
result: getSingleFetchRedirect(
90-
result.status,
91-
result.headers,
92-
build.basename,
93-
),
94-
headers: result.headers,
95-
status: SINGLE_FETCH_REDIRECT_STATUS,
96-
});
97-
}
98-
99-
return result;
76+
return isResponse(result) ? result : staticContextToResponse(result);
10077
}
10178

10279
function handleQueryError(error: unknown) {
@@ -113,15 +90,7 @@ export async function singleFetchAction(
11390
let headers = getDocumentHeaders(context, build);
11491

11592
if (isRedirectStatusCode(context.statusCode) && headers.has("Location")) {
116-
return generateSingleFetchResponse(request, build, serverMode, {
117-
result: getSingleFetchRedirect(
118-
context.statusCode,
119-
headers,
120-
build.basename,
121-
),
122-
headers,
123-
status: SINGLE_FETCH_REDIRECT_STATUS,
124-
});
93+
return new Response(null, { status: context.statusCode, headers });
12594
}
12695

12796
// Sanitize errors outside of development environments
@@ -194,24 +163,7 @@ export async function singleFetchLoaders(
194163
// Handle the query() result - either inside stream() with middleware enabled
195164
// or after query() without
196165
function handleQueryResult(result: StaticHandlerContext | Response) {
197-
let response = isResponse(result)
198-
? result
199-
: staticContextToResponse(result);
200-
if (isRedirectResponse(response)) {
201-
return generateSingleFetchResponse(request, build, serverMode, {
202-
result: {
203-
[SingleFetchRedirectSymbol]: getSingleFetchRedirect(
204-
response.status,
205-
response.headers,
206-
build.basename,
207-
),
208-
},
209-
headers: response.headers,
210-
status: SINGLE_FETCH_REDIRECT_STATUS,
211-
});
212-
}
213-
214-
return response;
166+
return isResponse(result) ? result : staticContextToResponse(result);
215167
}
216168

217169
// Handle any thrown errors from query() result - either inside stream() with
@@ -230,17 +182,7 @@ export async function singleFetchLoaders(
230182
let headers = getDocumentHeaders(context, build);
231183

232184
if (isRedirectStatusCode(context.statusCode) && headers.has("Location")) {
233-
return generateSingleFetchResponse(request, build, serverMode, {
234-
result: {
235-
[SingleFetchRedirectSymbol]: getSingleFetchRedirect(
236-
context.statusCode,
237-
headers,
238-
build.basename,
239-
),
240-
},
241-
headers,
242-
status: SINGLE_FETCH_REDIRECT_STATUS,
243-
});
185+
return new Response(null, { status: context.statusCode, headers });
244186
}
245187

246188
// Sanitize errors outside of development environments
@@ -284,7 +226,7 @@ export async function singleFetchLoaders(
284226
}
285227
}
286228

287-
function generateSingleFetchResponse(
229+
export function generateSingleFetchResponse(
288230
request: Request,
289231
build: ServerBuild,
290232
serverMode: ServerMode,

0 commit comments

Comments
 (0)