Skip to main content
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