microsoft
🚀 Dynamic DSD: A Frontend Integration Strategy with @microsoft/fast-element
🚀 Dynamic DSD: A Frontend Integration Strategy with @microsoft/fast-element
This document outlines our approach for integrating @microsoft/fast-element, with backend server architectures of any kind. Our focus is on enabling a fast First Contentful Paint (FCP) through server-rendered HTML.
Our core mechanism is called Dynamic DSD (Declarative Shadom DOM), which differentiates itself from typical Server-Side Rendering (SSR) by not dictating or providing the server-side rendering environment.
1. Core Principles
The Dynamic DSD strategy is built on two primary principles, enabled by the Web Components standard and the features of @microsoft/fast-element:
- Backend Agnosticism: The server is responsible for generating the initial, fully-formed HTML, including content within Custom Elements and utilizing DSD. The server can use any language or framework (e.g., C#, PHP, Rust, etc.) to achieve this.
-
Progressive Enhancement: The
@microsoft/fast-elementlibrary executes on the client to process the pre-rendered HTML, turning static content into a fully functional application without disrupting the initial DOM structure.
2. Integration Approach
2.1. Templating and Backend Generation
Our ultimate goal is to provide a unified, declarative templating solution.
-
Current/Planned Implementation: We are integrating the
@microsoft/fast-htmlpackage into@microsoft/fast-elementin our proposal for V3. This will provide the declarative templating solution used by our components. - Backend Leverage: This declarative template can be leveraged by any backend to generate the initial Custom Element HTML, including the necessary Declarative Shadow DOM (DSD). The backend, regardless of its language, can parse and execute this template to output the HTML.
2.2. Frontend Hydration via @microsoft/fast-element
Once the browser receives the HTML and renders the FCP, @microsoft/fast-element will perform the hydration process.
- Template Discovery: The library identifies all Custom Elements containing a DSD template.
- Template Attachment: The browser automatically attaches the DSD template to the Custom Element's Shadow Root, preserving the DOM structure.
-
Binding Application:
@microsoft/fast-element's detects the declarative templates and inspects the DSD in each custom element, resolves the template and the DSD, and attaches all necessary interactivity:- Events, Attributes, Directives, and Content Bindings.
This process effectively initializes the pre-rendered component, making it fully interactive without re-rendering the visual structure, which enables a fast FCP while deferring the application of interaction until the page has loaded.
3. Advantages and Strategic Alignment
3.1. Contrasting with Previous SSR Approach
Our previous approach relied on the @microsoft/fast-ssr package, which provided a NodeJS-based mechanism for server-side rendering. While effective, it created a deployment dependency:
-
Previous Approach: The backend needed to be, or integrate with, a NodeJS environment to execute the component rendering logic via
@microsoft/fast-ssr.
The Dynamic DSD approach eliminates this server-side language dependency, delivering the benefits of server rendering without imposing a specific technology stack.
3.2. Commitment to Web Standards
Our declarative templating approach is strategically aligned with the future of the web platform:
- W3C Participation: Various proposals currently exist within the W3C and browser vendor groups for a native DOM templating API (e.g., DOM Parts, Template Instantiation).
- Future Alignment: We are committed to participating in these discussions and, when a standard is officially shipped in browsers, aligning our template syntax and hydration mechanism to leverage the platform's native capabilities. This ensures our approach remains modern, highly performant, and directly integrated with browser-level optimizations.
The result is a highly portable frontend library that delivers the speed benefits of server rendering, today, while being prepared to transition seamlessly to tomorrow's native web platform standards.
