diff --git a/src/content/docs/en/guides/framework-components.mdx b/src/content/docs/en/guides/framework-components.mdx index a4c4f43424495..6d5f6d5c1260b 100644 --- a/src/content/docs/en/guides/framework-components.mdx +++ b/src/content/docs/en/guides/framework-components.mdx @@ -121,13 +121,16 @@ import Counter from '../components/Counter.svelte'; ``` -:::caution[Passing functions as props] -You can pass a function as a prop to a framework component, but it only works during server rendering. If you try to use the function in a hydrated component (for example, as an event handler), an error will occur. -This is because functions can't be _serialized_ (transferred from the server to the client) by Astro. -::: +Props that are passed to interactive framework components [using a `client:*` directive](/en/reference/directives-reference/#client-directives) must be [serialized](https://developer.mozilla.org/en-US/docs/Glossary/Serialization): translated into a format suitable for transfer over a network, or storage. However, Astro does not serialize every type of data structure. Therefore, there are some limitations on what can be passed as props to hydrated components. + +The following prop types are supported: +plain object, `number`, `string`, `Array`, `Map`, `Set`, `RegExp`, `Date`, `BigInt`, `URL`, `Uint8Array`, `Uint16Array`, `Uint32Array`, and `Infinity` + +Non-supported data structures passed to components, such as functions, can only be used during the component's server rendering and cannot be used to provide interactivity. For example, passing functions to hydrated components is not supported because Astro cannot pass functions from the server in a way that makes them executable on the client. + ## Passing children to framework components Inside of an Astro component, you **can** pass children to framework components. Each framework has its own patterns for how to reference these children: React, Preact, and Solid all use a special prop named `children`, while Svelte and Vue use the `` element. diff --git a/src/content/docs/en/guides/server-islands.mdx b/src/content/docs/en/guides/server-islands.mdx index f366d3ac598fb..e3c14c1bed536 100644 --- a/src/content/docs/en/guides/server-islands.mdx +++ b/src/content/docs/en/guides/server-islands.mdx @@ -34,6 +34,15 @@ const avatarURL = await getUserAvatar(userSession); User avatar ``` +### Passing props to server islands + +Props provided to server island components must be [serializable](https://developer.mozilla.org/en-US/docs/Glossary/Serialization): able to be translated into a format suitable for transfer over a network, or storage. Additionally, Astro does not serialize every type of serializable data structure. Therefore, there are some limitations on what can be passed as props to a server island. + +Notably, functions cannot be passed to components marked with `server:defer` as they cannot be serialized. Objects with circular references are also not serializable. + +The following prop types are supported: +plain object, `number`, `string`, `Array`, `Map`, `Set`, `RegExp`, `Date`, `BigInt`, `URL`, `Uint8Array`, `Uint16Array`, `Uint32Array`, and `Infinity` + ## Server island fallback content When using the `server:defer` attribute on a component to delay its rendering, you can "slot" in default loading content using the included named `"fallback"` slot.