render()

The render() function is used for server-side rendering (SSR) of Svelte components. It takes a component and returns an object with properties for populating HTML on the server.

Import

import { render } from 'svelte/server';

Signature

function render<Props extends Record<string, any>>(
  component: Component<Props>,
  options?: {
    props?: Omit<Props, '$$slots' | '$$events'>;
    context?: Map<any, any>;
    idPrefix?: string;
    csp?: { nonce?: string; hash?: boolean };
    transformError?: (error: unknown) => unknown;
  }
): RenderOutput;

Parameters

component

Component

required

The Svelte component to render

options

object

Configuration options for rendering

options.props

object

Props to pass to the component (excluding $$slots and $$events)

options.context

Map<any, any>

Context map that will be available to the component via getContext()

options.idPrefix

string

Prefix for generated IDs to avoid conflicts when rendering multiple instances

options.csp

object

Content Security Policy configuration for inline scripts

options.csp.nonce

string

Nonce value to add to generated <script> tags

options.csp.hash

boolean

Whether to generate SHA-256 hashes for CSP script-src directive

options.transformError

(error: unknown) => unknown

Function to transform errors caught by error boundaries before rendering

Return Value

The render() function returns a RenderOutput object with the following properties:

head

string

HTML content that should be inserted into the <head> element, including component styles and meta tags

body

string

HTML content that should be inserted into the <body> element

html

string

deprecated

Alias for body. Use body instead

hashes

object

CSP hashes for generated scripts

hashes.script

string[]

Array of SHA-256 hash values (format: sha256-{hash}) for use in CSP script-src directive

The return value is also a PromiseLike, so you can await it to handle asynchronous rendering:

const result = await render(Component, { props: { name: 'world' } });

Usage

Basic Server-Side Rendering

import { render } from 'svelte/server';
import App from './App.svelte';

const result = render(App, {
  props: {
    name: 'world'
  }
});

const html = `
  <!DOCTYPE html>
  <html>
    <head>
      ${result.head}
    </head>
    <body>
      ${result.body}
    </body>
  </html>
`;

With Context

import { render } from 'svelte/server';
import App from './App.svelte';

const context = new Map();
context.set('user', { id: 1, name: 'Alice' });

const result = render(App, {
  props: { page: 'home' },
  context
});

With Content Security Policy

import { render } from 'svelte/server';
import App from './App.svelte';

// Using nonce
const result = render(App, {
  csp: {
    nonce: 'random-nonce-value'
  }
});

// Using hash
const result = render(App, {
  csp: {
    hash: true
  }
});

// Use the hashes in your CSP header
const cspHeader = `script-src 'self' ${result.hashes.script.map(h => `'${h}'`).join(' ')}`;

Asynchronous Rendering

import { render } from 'svelte/server';
import App from './App.svelte';

// Await the result for async components
const result = await render(App, {
  props: { data: fetchData() }
});

console.log(result.head); // Styles and meta tags
console.log(result.body); // Component HTML

Error Handling

import { render } from 'svelte/server';
import App from './App.svelte';

const result = render(App, {
  transformError: (error) => {
    // Log error for monitoring
    console.error('SSR Error:', error);
    
    // Return sanitized error for client
    return {
      message: 'An error occurred',
      code: error.code
    };
  }
});

Notes

The render() function is only available when compiling with the server option
Generated HTML includes hydration markers for client-side hydration
The function will throw if CSP options include both nonce and hash
Component lifecycle hooks like onMount do not run during server-side rendering
The html property is deprecated; use body instead

Core Runtime

Lifecycle

Context

Stores

Motion

Transitions

Animations

Easing

Actions

Events

Compiler

Server

Reactivity Utilities

Import

Signature

Parameters

Return Value

Usage

Basic Server-Side Rendering

With Context

With Content Security Policy

Asynchronous Rendering

Error Handling

Notes

​Import

​Signature

​Parameters

​Return Value

​Usage

​Basic Server-Side Rendering

​With Context

​With Content Security Policy

​Asynchronous Rendering

​Error Handling

​Notes

Import

Signature

Parameters

Return Value

Usage

Basic Server-Side Rendering

With Context

With Content Security Policy

Asynchronous Rendering

Error Handling

Notes