withastro/astro @astrojs/solid-js@4.0.0

on GitHub

Major Changes

• #6791 37021044dd4382a9b214f89b7c221bf1c93f3e7d Thanks @patdx! - 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, lazy or createResource, and
  • The component is mounted using a hydrating directive:
    • client:load
    • client:idle
    • client:visible
    • client: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:only to skip server side rendering completely
  • use APIs like isServer or onMount() to detect server mode and render a server fallback without using Suspense.