37021044dd
* Render async SolidJS components * Add renderer-specific hydration script to allow for proper SolidJS hydration * Add support for Solid.js 1.8.x * Address documentation feedback * Rebuild pnpm lock file based on main branch * Address PR feedback from ematipico --------- Co-authored-by: Johannes Spohr <johannes.spohr@futurice.com> Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
2.2 KiB
| @astrojs/solid-js |
|---|
| major |
Render SolidJS components using renderToStringAsync.
This changes the renderer of SolidJS components from renderToString to renderToStringAsync. It also injects the actual SolidJS hydration script generated by generateHydrationScript, so that Suspense, ErrorBoundary and similar components can be hydrated correctly.
The server render phase will now wait for Suspense boundaries to resolve instead of always rendering the Suspense fallback.
If you use the APIs createResource or lazy, their functionalities will now be executed on the server side, not just the client side.
This increases the flexibility of the SolidJS integration. Server-side components can now safely fetch remote data, call async Astro server functions like getImage() or load other components dynamically. Even server-only components that do not hydrate in the browser will benefit.
It is very unlikely that a server-only component would have used the Suspense feature until now, so this should not be a breaking change for server-only components.
This could be a breaking change for components that meet the following conditions:
- The component uses Suspense APIs like
Suspense,lazyorcreateResource, and - The component is mounted using a hydrating directive:
client:loadclient:idleclient:visibleclient:media
These components will now first try to resolve the Suspense boundaries on the server side instead of the client side.
If you do not want Suspense boundaries to be resolved on the server (for example, if you are using createResource to do an HTTP fetch that relies on a browser-side cookie), you may consider:
- changing the template directive to
client:onlyto skip server side rendering completely - use APIs like isServer or
onMount()to detect server mode and render a server fallback without using Suspense.