{"record":{"id":"253b540bd0f03572","repo":"sveltejs/kit","slug":"avoid-calling-fetch-eagerly-during-server-side-r","errorCode":null,"errorMessage":"Avoid calling `fetch` eagerly during server-side rendering — put your `fetch` calls inside `onMount` or a `load` function instead","messagePattern":"Avoid calling `fetch` eagerly during server-side rendering — put your `fetch` calls inside `onMount` or a `load` function instead","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/kit/src/runtime/server/page/render.js","lineNumber":235,"sourceCode":"\t\t\t\t\t\tprops.page.status = status = error.status;\n\n\t\t\t\t\t\treturn error;\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t};\n\n\t\tconst fetch = globalThis.fetch;\n\n\t\ttry {\n\t\t\tif (DEV) {\n\t\t\t\tlet warned = false;\n\t\t\t\tglobalThis.fetch = (info, init) => {\n\t\t\t\t\tif (typeof info === 'string' && !SCHEME.test(info)) {\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t`Cannot call \\`fetch\\` eagerly during server-side rendering with relative URL (${info}) — put your \\`fetch\\` calls inside \\`onMount\\` or a \\`load\\` function instead`\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if (!warned && !try_get_request_store()?.state.is_in_remote_function) {\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t'Avoid calling `fetch` eagerly during server-side rendering — put your `fetch` calls inside `onMount` or a `load` function instead'\n\t\t\t\t\t\t);\n\t\t\t\t\t\twarned = true;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn fetch(info, init);\n\t\t\t\t};\n\t\t\t}\n\n\t\t\trendered = await with_request_store({ event, state: render_state }, async () => {\n\t\t\t\treturn render(Root, { ...render_opts, props });\n\t\t\t});\n\n\t\t\tif (rendered.hashes) {\n\t\t\t\tcsp.add_script_hashes(rendered.hashes.script);\n\t\t\t}\n\t\t} finally {\n\t\t\tif (DEV) {","sourceCodeStart":217,"sourceCodeEnd":253,"githubUrl":"https://github.com/sveltejs/kit/blob/03f1687fe612ce3d2d9131139b5b188d9cf90c64/packages/kit/src/runtime/server/page/render.js#L217-L253","documentation":"During SSR, SvelteKit temporarily replaces globalThis.fetch so it can intercept relative-URL requests made while rendering a component (which has no proper base URL on the server). If component-level code calls fetch with a relative URL during SSR, or an absolute-URL call happens outside a load function/remote function context, SvelteKit warns that the call must be moved into onMount or a load function. It is a console warning, not a thrown error, unless the URL is relative, in which case it throws an Error.","triggerScenarios":"Calling fetch('relative/path') at the top level of a +page.svelte/+layout.svelte during SSR (throws); calling fetch eagerly in module scope or component init with any URL while not inside a load function or remote function (warns once); after a SvelteKit upgrade, globalThis.fetch is wrapped only during render_response so eager calls are detected.","commonSituations":"Porting client-only components to SSR without guards; data fetching written directly in a component body instead of +page.js/+page.server.js load; code shared between browser and server that fetches relative endpoints like '/api/x'; using fetch in a context where try_get_request_store() is undefined so the interceptor cannot resolve relative URLs.","solutions":["Move the fetch call into a load function (+page.js or +page.server.js) and return the data","Wrap the call in onMount (or equivalent browser-only lifecycle) so it only runs on the client","Use an absolute URL (including scheme) if the fetch must run during SSR outside load","Guard with `if (browser)` from '$app/environment' before calling fetch"],"exampleFix":"<!-- before: +page.svelte -->\n<script>\n  const data = await fetch('/api/items').then((r) => r.json());\n</script>\n\n<!-- after: +page.js -->\nexport async function load({ fetch }) {\n  return { items: await fetch('/api/items').then((r) => r.json()) };\n}","handlingStrategy":"validation","validationCode":"import { browser } from '$app/environment';\nif (!browser && !inLoadContext()) {\n  throw new Error('move this fetch into a load function or onMount');\n}","typeGuard":"function canFetchDuringSSR(url) {\n  return typeof url === 'string' ? /^[a-zA-Z][a-zA-Z\\d+\\-.]*:/.test(url) : true;\n}","tryCatchPattern":null,"preventionTips":["Always fetch data in load functions and use the provided `fetch` argument","Wrap client-only fetches in `if (browser)` or onMount","Never call fetch at module top level in components","Use absolute URLs when a non-load SSR fetch is unavoidable"],"tags":["ssr","fetch","hydration"],"backgroundTag":"fetch-during-ssr","analyzedSha":"03f1687fe612ce3d2d9131139b5b188d9cf90c64","analyzedAt":"2026-09-02T02:01:50.504Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}