[framework][Feature Request] Server-Side Rendering of UI5 Web Components

[ilhan007]

Background

Server-Side Rendering (SSR) is a technique in which the server generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response(https://web.dev/rendering-on-the-web/). When it comes to web components, it means generating and serving the HTML of the web components, including shadow DOM and styles, before their JavaScript implementations have loaded and executed.

SSR can be used for a variety of reasons but performance is the most obvious one - some sites can render faster if they render static HTML first without waiting for JavaScript to load, then (optionally) load the page's JavaScript and hydrate the components.

Declarative Shadow DOM

Historically, it has been difficult to use Shadow DOM in combination with Server-Side Rendering because there was no built-in way to express Shadow Roots in the server-generated HTML. There are also performance implications when attaching Shadow Roots to DOM elements that have already been rendered without them. This can cause layout shifting after the page has loaded, or temporarily show a flash of unstyled content while loading the Shadow Root's stylesheets.

Declarative Shadow DOM removes this limitation, bringing Shadow DOM to the server - it's a element with a shadowrootmode attribute:

<host-element>
  <template shadowrootmode="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

A template element with the shadowrootmode attribute is detected by the HTML parser and immediately applied as the shadow root of its parent element. Loading the pure HTML markup from the above sample results in the following DOM tree:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Declarative Shadow DOM Support

• Chrome: supported
• Safari: supported
• Firefox: not supported https://bugzilla.mozilla.org/show_bug.cgi?id=1712140

Feature Request

As an application developer I would like to server-side my app, built UI5 Web Components could support some of the popular frameworks - like Next.js as described in FR #2240 by @MarcusNotheis

Tasks

• Research requirements of Next.js for the server-side rendering functionality
• Research @lit-labs/ssr package for server-side rendering Lit templates and components
• When we import a component module in Node, it should fail. Currently it fails, when accessing DOM APIs.
• Share learning and list missing pieces in UI5 Web Components in SSR aspect to address as next steps

Additional Context

Lit already have done some progress on the topic and provides the @lit-labs/ssr package for server-side rendering Lit templates and components.
As we internally reuse lit templates, we have to look into that implementation and available integrations with server side frameworks- KOA, Astro

Related Issues

#2240
#6192

Priority

• Low
• Medium
• High
• Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: {...}
• Business impact: {...}

[cpf-hse]

@ilhan007 Any more details regarding this topic?
Would be great to use the UI5 WCs in Frameworks like Sveltekit with all the advantages they provide.

[MarcusNotheis]

The Declarative Shadow DOM proposal has now been merged into the HTML Spec and it looks like Firefox is going to implement it soon as well. Are there any plans to implement this feature in the next couple of months?