Server rendering

Svelte compiles your component into a custom element for the browser. To render that element on a server, your component package also needs a server entry and the host app needs an adapter.

@svebcomponents/ssr connects the two builds:

1. Your component package exports a browser entry and a matching /ssr entry.
2. The host app imports both entries and installs its svebcomponents 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. Read the hydration contract.

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.

App authors install the shared SSR runtime and one host adapter, import the component package in the browser, and import its /ssr entry on the server. The /ssr import registers the renderer for that custom-element tag.

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. The maintainers have not commissioned an independent security audit of the generated HTML or shadow DOM. Sanitize untrusted content before passing it through {@html}.

Install svelte in the host app. The generated renderer calls Svelte’s server runtime even when the host app does not contain Svelte files. See Compatibility for supported versions.

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

For the renderer registry and direct rendering functions, use the @svebcomponents/ssr reference.