---
title: "Drupal Canvas Server-Side Rendering "
date: "2026-06-26T12:17:31+00:00"
summary: "Boost page speed and SEO with Drupal Canvas SSR. Learn how server-side rendering improves Core Web Vitals and AI content indexing."
image:
type: "page"
url: "/source-cms/drupal-canvas-server-side-rendering"
id: "b5be4aa1-34c2-4e51-8556-cf4934ebffbb"
---

Drupal Canvas Server-Side Rendering (SSR) Experimental feature optimizes the delivery of Drupal Canvas components by rendering them as static HTML on the server. Content is present in the raw HTML response. This process makes the content instantly parseable by AI retrieval systems without the need to wait for JavaScript execution.

Capabilities
------------

Drupal Canvas SSR provides the following capabilities:

*   Pages load faster and improve Core Web Vitals.
*   Search engines and AI retrieval systems index content faster because the system embeds the content into the raw HTML response.
*   Server-side rendered content lands in a separate crawl queue from client-side rendered pages.
*   The system handles nested slot components recursively and keeps the Drupal Canvas authoring preview intact.

Note

Components cannot fetch server-side data during the server rendering process. The system falls back to client-side rendering for server-side data fetching. Server-side data fetching from Drupal's JSON:API is an upcoming feature.

Enable Drupal Canvas SSR
------------------------

To enable Drupal Canvas SSR:

1.  [Access your site](/source-cms/creating-and-publishing-your-first-page#access-a-site "Creating and publishing your first page").
2.  In the left sidebar, click **Configurations**.
3.  Select **Experimental features**.
4.  On the Experimental features page, locate the **Canvas SSR** section.
5.  Toggle **Enable Canvas SSR** to ON.

After you enable the feature, Drupal Canvas SSR attempts to render all components on the server. The system automatically falls back to client-side rendering if a component fails to render on the server.

Component requirements
----------------------

Categorize components into static or interactive types to ensure the correct setup. 

### Static components 

Static components render exclusively on the server and do not ship JavaScript to the browser. These components are best for content-heavy elements that do not require user interaction, such as text blocks, hero images, and static layouts. 

Components render as static if they meet the following conditions:

*   The component does not access browser-only APIs such as `window`, `document`, or `localStorage`, or `SWR/fetch`.
*   The component does not use fetch or SWR.
*   All imports can be resolved on the server.

### Interactive components 

Interactive components require JavaScript for hydration. These components are best for elements that require interactivity, such as counters, forms, and search bars. The server renders the initial HTML, and the browser then hydrates the HTML with JavaScript to enable interactivity. 

You must add the `'use client';` directive at the top of the component file if the component requires the following interactive elements:

*   Event handlers such as `onClick`, `onChange`, or `onSubmit`.
*   Client state hooks such as `useState`, `useEffect`, or `useRef`.
*   Third-party dependencies that require JavaScript interactivity, such as recharts or react-table.

Note

Event handlers and React hooks execute only on the client. The server still attempts to render the component first. Both HTML and JavaScript ship to the browser.

Automatic fallback to client-side rendering
-------------------------------------------

Drupal Canvas SSR attempts to render all components by default. The system falls back to client-side rendering (CSR) when the following conditions occur:

*   A component attempts to access a browser API during the initial render.
*   A component imports an unresolvable module.
*   A runtime error occurs during server processing.

Note

If a component accesses browser APIs during render, the system automatically falls back to client-side rendering regardless of the `'use client';` directive