fix: hydration for null body http status response (#13985)

* fix: hydration for 204 response

* Added null status body http codes

* add test

* simplify

* prettier

---------

Co-authored-by: Rich Harris <[email protected]>

Author: shoaibakhtar9611

packages/kit/src/runtime/server/constants.js

@@ -0,0 +1 @@
+export const NULL_BODY_STATUS = [101, 103, 204, 205, 304];

packages/kit/src/runtime/server/page/load_data.js

@@ -6,6 +6,7 @@ import { with_request_store, merge_tracing } from '@sveltejs/kit/internal/server
 import { record_span } from '../../telemetry/record_span.js';
 import { clarify_devalue_error, get_node_type } from '../utils.js';
 import { base64_encode, text_decoder } from '../../utils.js';
+import { NULL_BODY_STATUS } from '../constants.js';
 
 /**
  * Calls the user's server `load` function.
@@ -345,7 +346,7 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 		const proxy = new Proxy(response, {
 			get(response, key, _receiver) {
 				/**
-				 * @param {string} body
+				 * @param {string | undefined} body
 				 * @param {boolean} is_b64
 				 */
 				async function push_fetched(body, is_b64) {
@@ -427,6 +428,11 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 				async function text() {
 					const body = await response.text();
 
+					if (body === '' && NULL_BODY_STATUS.includes(response.status)) {
+						await push_fetched(undefined, false);
+						return undefined;
+					}
+
 					if (!body || typeof body === 'string') {
 						await push_fetched(body, false);
 					}
@@ -444,7 +450,8 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 
 				if (key === 'json') {
 					return async () => {
-						return JSON.parse(await text());
+						const body = await text();
+						return body ? JSON.parse(body) : undefined;
 					};
 				}
 

packages/kit/src/runtime/server/page/types.d.ts

@@ -6,7 +6,7 @@ export interface Fetched {
 	method: string;
 	request_body?: string | ArrayBufferView | null;
 	request_headers?: HeadersInit | undefined;
-	response_body: string;
+	response_body: string | undefined;
 	response: Response;
 	is_b64?: boolean;
 }

packages/kit/test/apps/basics/src/routes/load/+page.svelte

@@ -9,6 +9,7 @@
 <a href="/load/fetch-relative">fetch relative</a>
 <a href="/load/fetch-credentialed">fetch credentialed</a>
 <a href="/load/fetch-request-headers">fetch headers</a>
+<a href="/load/fetch-no-body">fetch no body</a>
 <a href="/load/large-response">large response</a>
 <a href="/load/raw-body">raw body</a>
 <a href="/load/server-fetch-request">server fetch request</a>

packages/kit/test/apps/basics/src/routes/load/fetch-no-body/+page.js

@@ -0,0 +1,8 @@
+export async function load({ fetch }) {
+	const response = await fetch('/load/fetch-no-body/endpoint');
+
+	return {
+		ok: response.ok,
+		body: await response.text()
+	};
+}

packages/kit/test/apps/basics/src/routes/load/fetch-no-body/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { data } = $props();
+</script>
+
+<h1>ok: {data.ok}</h1>

packages/kit/test/apps/basics/src/routes/load/fetch-no-body/endpoint/+server.js

@@ -0,0 +1,5 @@
+export function GET() {
+	return new Response(undefined, {
+		status: 204
+	});
+}

packages/kit/test/apps/basics/test/test.js

@@ -599,6 +599,11 @@ test.describe('Load', () => {
 		expect(await page.textContent('.aborted-during-request')).toBe('Aborted during request: true');
 		expect(await page.textContent('.successful-data')).toContain('"message":"success"');
 	});
+
+	test('event.fetch handles response without body', async ({ page }) => {
+		await page.goto('/load/fetch-no-body');
+		expect(await page.textContent('h1')).toBe('ok: true');
+	});
 });
 
 test.describe('Nested layouts', () => {