{"record":{"id":"cf760cf1832ba038","repo":"withastro/astro","slug":"you-are-attempting-to-render-displayname-pro","errorCode":null,"errorMessage":"You are attempting to render <${displayName} ${prop} />, but ${displayName} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.","messagePattern":"You are attempting to render <(.+?) (.+?) />, but (.+?) is an Astro component\\. Astro components do not render in the client and should not have a hydration directive\\. Please use a framework component for client rendering\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/astro/src/runtime/server/render/astro/instance.ts","lineNumber":106,"sourceCode":"\t\tif (isHeadAndContent(returnValue)) {\n\t\t\treturn returnValue.content.render(destination);\n\t\t} else {\n\t\t\treturn renderChild(destination, returnValue);\n\t\t}\n\t}\n}\n\n// Issue warnings for invalid props for Astro components\nfunction validateComponentProps(\n\tprops: ComponentProps,\n\tclientDirectives: SSRResult['clientDirectives'],\n\tdisplayName: string,\n) {\n\tif (props != null) {\n\t\tconst directives = [...clientDirectives.keys()].map((directive) => `client:${directive}`);\n\t\tfor (const prop of Object.keys(props)) {\n\t\t\tif (directives.includes(prop)) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`You are attempting to render <${displayName} ${prop} />, but ${displayName} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.`,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n}\n\nexport function createAstroComponentInstance(\n\tresult: SSRResult,\n\tdisplayName: string,\n\tfactory: AstroComponentFactory,\n\tprops: ComponentProps,\n\tslots: any = {},\n) {\n\tvalidateComponentProps(props, result.clientDirectives, displayName);\n\tconst instance = new AstroComponentInstance(result, props, slots, factory);\n\tregisterIfPropagating(result, factory, instance);\n\treturn instance;","sourceCodeStart":88,"sourceCodeEnd":124,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro/src/runtime/server/render/astro/instance.ts#L88-L124","documentation":"Before rendering an .astro component instance, validateComponentProps checks whether any prop name equals a known client:* directive (built from the resolved clientDirectives map). Astro components are server-rendered only — they produce HTML with no client runtime — so a hydration directive on them can never work, and Astro warns at render time while ignoring the prop.","triggerScenarios":"Rendering an Astro component with a client:load / client:idle / client:visible / client:only / client:media prop — most often via a spread like <Card {...commonProps} /> where the shared props object contains a client directive, or a dynamic component that resolves to a .astro factory at runtime.","commonSituations":"UI kits where one wrapper spreads the same props into both framework and Astro components; converting a React component to .astro while stale client: attributes remain at call sites; copy-pasting hydration directives from framework usage.","solutions":["Remove the client:* prop from the .astro component call site","Split shared props so hydration directives only reach framework (React/Vue/Svelte/Solid) components","If the component needs interactivity, move the interactive part into a framework component and put the client:* directive on that"],"exampleFix":"// before\n<Card client:load heading=\"Hello\" />\n\n// after\n<Card heading=\"Hello\" />\n<LikeButton client:load />  <!-- framework component carries the directive -->","handlingStrategy":"type-guard","validationCode":"// Attach hydration directives only to framework components\nconst extra = isAstroFactory(Component) ? {} : { 'client:load': true };\nreturn <Component {...props} {...extra} />;","typeGuard":"// Mirrors Astro's own marker (packages/astro/src/runtime/server/astro-component.ts sets isAstroComponentFactory = true)\nconst isAstroFactory = (c: unknown): c is () => any =>\n  typeof c === 'function' && (c as { isAstroComponentFactory?: boolean }).isAstroComponentFactory === true;","tryCatchPattern":null,"preventionTips":["Write hydration directives literally in templates instead of passing them through props","Strip client:* keys from props forwarded into .astro components","Grep CI build logs for 'should not have a hydration directive' to catch regressions"],"tags":["astro","hydration","client-directive","astro-components"],"backgroundTag":"hydration-directive-on-server-component","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}