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.
On the Experimental features page, locate the Canvas SSR section.
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
Drupal Canvas Server-Side Rendering
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.
On the Experimental features page, locate the Canvas SSR section.
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
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Source CMS