Server rendering

A template component renders to HTML on the server and becomes interactive in the browser without being rebuilt:

1. Render. Server.render runs the component's setup in a new graph, writes its template as HTML, and disposes the graph. It runs on .NET and under Fable.
2. Transfer. The page carries the props the client needs, encoded as JSON in a <script type="application/json"> element.
3. Hydrate. In the browser, Hydration.hydrate runs the same component over the server's nodes: setup runs again, each binding writes its first value only where it differs from the server's node, and the mount keeps the server's elements.

// Server
let html = Server.render { Server.Options.defaults with Policy = Omit } counter { Start = 0; Label = "Clicks" }
// <!--[r--><div class="counter"><span class="label">Clicks</span><button type="button">0</button></div><!--]-->

// Client
let mounted = Hydration.hydrate graph None report Hydration.HydrationOptions.defaults host counter props

Pages

• Rendering: Server.render, renderTo, renderPage and renderDocument, the HTML they write, escaping, browser-only parts and pending reads.
• Hydration: what the client adopts, mismatches and Strict, ids, boundaries and the document head.
• State transfer: Server.stateScript, Hydration.readState and Ranvier.Wire codecs.
• Deployment: one component project compiled for the server and the client, and the document Server.renderDocument writes around it.
• Performance: what the server and hydration benchmarks measure, and the figures.

Server rendering and other hosts

• Blazor Server keeps one graph per circuit and renders through Blazor's components. See Blazor Server. Server.render is independent of it: each call owns a graph for one request.
• Elmish components render on the server like any other component. See Elmish components.