Server rendering

To render custom elements on the server, your package needs to declare a server entry and the host app needs an adapter.

1. Your component package exports both a browser entry and a matching /ssr entry.
2. The host app imports both entries and installs its framework-specific adapter.
3. The adapter calls the registered renderer and emits declarative shadow DOM.
4. The browser creates the shadow root while it parses the HTML. The generated custom-element extension calls Svelte’s hydrate() with that root.

Package and app setup

Package authors add matching browser and server exports, then build both from the same Svelte source. Start with Configure package outputs.

First, users need to install and import the correct adapter for their framework. This sets up the ElementRendererRegistry and a mechanism for intercepting custom-element tags during server-side rendering. Then use the component package in the browser as you always would, in addition to importing its /ssr entry on the server. This /ssr import registers an ElementRenderer for that custom-element tag with the ElementRendererRegistry.

Host	Setup
SvelteKit	Use the SvelteKit adapter
React	Use the React adapter
Vue	Use the Vue adapter
Astro	Use the Astro adapter

Beta

SSR APIs and generated output may change before 1.0. Sanitize untrusted content before passing it through {@html}.

Components that await during rendering or prepare data on the server need an async-capable host path. See Async components and server data.

To learn about the renderer registry and direct rendering functions, use the @svebcomponents/ssr reference.