Server Side Rendering

Purpose of SSR

When a webpage is loaded custom tags are upgraded, this means to have content on initial load that matches the final styling you will need to use an SSR solution.

Without SSR you will see a flash of unstyled content when the UI component is upgraded to its final rendered shadow DOM.

Rendering on the Server

Semantic components are built using Lit HTML as a rendering engine. This means any SSR library available for Lit can be used to render semantic components on the server.

Learn more about SSR with Lit in their official guide

Building Components for SSR

Components provide an isClient and isServer boolean to callbacks to allow you to have separate code paths for the server and client.

When a component is rendered on the server it is rendered in isolation so its not possible to directly access window or other parts of the DOM from your component.

Client Only Code

Some common values that might be useful in a component but should be prevented from running on the server

• Accessing navigator.userAgent to determine browser type
• Accessing window or document or other DOM elements
• Acessing localStorage