11 Server-side rendering
This chapter covers
- Understanding server-side rendering (SSR)
- Using Declarative Shadow DOM (DSD) in vanilla web components
- Using SSR with web component libraries
Rendering web components in the browser can negatively affect performance and search engine optimization (SEO). Both issues can be improved by rendering them on the server, known as server-side rendering (SSR).
When SSR is used to return HTML that contains custom elements, they’re populated with initial content. As a result, their initial render is faster. This is most noticeable on older mobile devices and computers. Without SSR, that content is added by web component code that runs in the browser after the initial render.
The key to implementing SSR for web components is to use Declarative Shadow DOM (DSD). Cross-browser support for this was completed in early 2024, when Firefox implemented DSD.
We start by sharing things to consider when deciding whether to use SSR. Then we demonstrate how to implement SSR with vanilla web components. Finally, we explore implementing SSR with the web component libraries Lit, Stencil, FAST, and wrec.
Note
Vanilla web components can implement SSR using DSD. The web component libraries Lit, Stencil, FAST and wrec all have support for SSR.