{"record":{"id":"ed6fbccdef369ffa","repo":"facebook/react","slug":"server-functions-cannot-be-called-during-initial-r-ed6fbc","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-parcel/src/client/ReactFlightDOMClientNode.js","lineNumber":38,"sourceCode":"  processBinaryChunk,\n  close,\n} from 'react-client/src/ReactFlightClient';\n\nexport * from './ReactFlightDOMClientEdge';\n\nfunction findSourceMapURL(filename: string, environmentName: string) {\n  const devServer = parcelRequire.meta.devServer;\n  if (devServer != null) {\n    const qs = new URLSearchParams();\n    qs.set('filename', filename);\n    qs.set('env', environmentName);\n    return devServer + '/__parcel_source_map?' + qs.toString();\n  }\n  return null;\n}\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\ntype EncodeFormActionCallback = <A>(\n  id: any,\n  args: Promise<A>,\n) => ReactCustomFormAction;\n\nexport type Options = {\n  nonce?: string,\n  encodeFormAction?: EncodeFormActionCallback,\n  unstable_allowPartialStream?: boolean,\n  replayConsoleLogs?: boolean,\n  environmentName?: string,\n  startTime?: number,","sourceCodeStart":20,"sourceCodeEnd":56,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js#L20-L56","documentation":"The Node build of the Parcel client creates Server References whose callServer always throws (noServerCall). This build consumes Flight payloads (for example during SSR in Node) without a call-back transport, and React deliberately blocks Server Function invocation during initial render to prevent a fetch waterfall, so the first render-time invocation throws.","triggerScenarios":"Invoking a server function during render in the Node client: component body, module-eval time, or the SSR pass of a Flight payload — every reference created via createServerReference gets noServerCall.","commonSituations":"SSR in Node of client components that call passed-down actions during render; porting components that fetched inside render; tests rendering and immediately invoking actions.","solutions":["Move the call into an event handler or useEffect","Pass data from a Server Component as props instead of fetching during render","Do render-time work in the react-server layer and stream the result down"],"exampleFix":"// before — fetching during SSR render\n'use client';\nexport default function User({id}) {\n  const [user, setUser] = useState(null);\n  getUser(id).then(setUser); // server reference during render -> throws\n  return <div>{user?.name}</div>;\n}\n\n// after — Server Component fetches and passes props\n// UserPage.server.js: const user = await getUser(id); return <User user={user}/>;\n'use client';\nexport default function User({user}) {\n  return <div>{user.name}</div>;\n}","handlingStrategy":"type-guard","validationCode":"const SERVER_REFERENCE = Symbol.for('react.server.reference');\nexport function assertNotServerReferenceCall(fn, phase) {\n  if (phase === 'render' && typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE) {\n    throw new Error('Refusing to call a Server Function during render');\n  }\n}","typeGuard":"const SERVER_REFERENCE = Symbol.for('react.server.reference');\nexport function isServerReference(fn) {\n  return typeof fn === 'function' && fn.$$typeof === SERVER_REFERENCE;\n}\n// during SSR: if (isServerReference(fn)) fetch the data in the server layer instead","tryCatchPattern":"try {\n  const root = createFromNodeStream(stream, manifest);\n} catch (e) {\n  if (/fetch waterfall/.test(e.message)) {\n    // a component invoked an action during render — restructure to props from a Server Component\n  }\n  throw e;\n}","preventionTips":["Invoke Server Functions only from event handlers or effects","Fetch during SSR in the react-server layer, then pass props","Lint against calling imported action modules inside component bodies"],"tags":["react-server-components","server-actions","ssr","render","fetch-waterfall"],"backgroundTag":"server-function-called-during-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}