{"record":{"id":"f73f21d02bf5c21a","repo":"facebook/react","slug":"server-functions-cannot-be-called-during-initial-r-f73f21","errorCode":null,"errorMessage":"Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.","messagePattern":"Server Functions cannot be called during initial render\\. This would create a fetch waterfall\\. Try to use a Server Component to pass data to Client Components instead\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js","lineNumber":55,"sourceCode":"  processBinaryChunk,\n  close,\n} from 'react-client/src/ReactFlightClient';\n\nimport {\n  processReply,\n  createServerReference as createServerReferenceImpl,\n} from 'react-client/src/ReactFlightReplyClient';\n\nexport {registerServerReference} from 'react-client/src/ReactFlightReplyClient';\n\nimport type {TemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';\n\nexport {createTemporaryReferenceSet} from 'react-client/src/ReactFlightTemporaryReferences';\n\nexport type {TemporaryReferenceSet};\n\nfunction noServerCall() {\n  throw new Error(\n    'Server Functions cannot be called during initial render. ' +\n      'This would create a fetch waterfall. Try to use a Server Component ' +\n      'to pass data to Client Components instead.',\n  );\n}\n\nexport function createServerReference<A: Iterable<any>, T>(\n  id: any,\n  callServer: any,\n): (...A) => Promise<T> {\n  return createServerReferenceImpl(id, noServerCall);\n}\n\ntype EncodeFormActionCallback = <A>(\n  id: any,\n  args: Promise<A>,\n) => ReactCustomFormAction;\n","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js#L37-L73","documentation":"In the edge SSR runtime (react-server-dom-webpack/client.edge), server references are created with a noServerCall callback: while server-rendering the initial HTML you may hold or forward a Server Action, but calling it would require a server round-trip in the middle of rendering — a fetch waterfall. React blocks the call and points you at fetching data in Server Components instead.","triggerScenarios":"A component rendered during SSR (via renderToReadableStream on the edge runtime) invokes a Server Action: calling getItems() (a 'use server' function) in the component body, in a render-time promise chain, or in module-init code; awaiting an action reference during the initial render.","commonSituations":"Client components that self-fetch by calling actions at render time instead of receiving props; porting REST-fetch components to actions while keeping the call in the render path; effects that fire during SSR in third-party libraries.","solutions":["Fetch the data in a server component and pass it down as props","Call the action only from an event handler (onClick/onSubmit) or a useEffect that runs after hydration","If data is needed during SSR, read it directly (db call, fetch) inside the server component rather than invoking an action"],"exampleFix":"// before ('use client')\nexport default function Items() {\n  const [items, setItems] = useState(null);\n  getItems().then(setItems); // Server Action called during render/SSR -> throws\n  return <ul>{items ?? '...'}</ul>;\n}\n\n// after: page.jsx (server component)\nexport default async function Page() {\n  const items = await db.items(); // direct server-side read\n  return <Items initialItems={items} />; // client component gets props\n}","handlingStrategy":"try-catch","validationCode":"// Structural guard: only invoke actions after hydration, never during render.\nexport function useAfterHydration(fn) {\n  const [ready, setReady] = useState(false);\n  useEffect(() => setReady(true), []);\n  return ready ? fn : () => {};\n}\n// const get = useAfterHydration(getItems); // called in handlers/effects only","typeGuard":null,"tryCatchPattern":"try {\n  setItems(await getItems()); // Server Action\n} catch (e) {\n  if (String(e.message).includes('Server Functions cannot be called during initial render')) {\n    // Defer the call to an event handler or post-hydration effect.\n    return;\n  }\n  throw e;\n}","preventionTips":["Fetch data in server components and pass it as props — actions belong in event handlers and effects","Never call 'use server' functions in component bodies or render helpers","Review components that self-fetch; they are the usual source of SSR waterfall errors"],"tags":["server-actions","ssr","edge-runtime","fetch-waterfall","react-server-components"],"backgroundTag":"server-action-called-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}