# Deployment
A server-rendered app compiles one set of component files twice: on .NET for the server, and with Fable
for the browser. This page assembles the counter from [Getting started](../view/getting-started.md)
into three projects, an ASP.NET Core server that renders the page and serves the client bundle, and a
Fable client that hydrates it.
For generated HTML and browser startup from a shared F# declaration, see [Page declarations](pages.md).
The example below shows the lower-level rendering and hydration calls.
## Projects
```text
Shared/ Shared.fsproj Counter.fs, Shared.fs
Server/ Server.fsproj ServerPage.fs, Program.fs, wwwroot/main.js (built by the client)
Client/ Client.fsproj Main.fs, main.js, vite.config.js, package.json
```
| Project | Compiled by | References | Holds |
| --- | --- | --- | --- |
| `Shared` | .NET and Fable | `Ranvier.View`, `Ranvier.Wire` | `Counter.fs` from [Getting started](../view/getting-started.md#the-component) and `Shared.fs`, the codec from [State transfer](state-transfer.md#a-codec-shared-by-both-sides). |
| `Server` | .NET, `Microsoft.NET.Sdk.Web` | `Shared` | The page function and the endpoint. |
| `Client` | Fable, then Vite | `Shared`, `Ranvier.View.Dom` | The hydration entry point. |
The `Ranvier.View` package holds `Server` and every template type; `Ranvier.View.Dom` holds
`Mounting` and `Hydration`, which run under Fable. `Shared.fs` is the state-transfer sample under
`module Shared` with `open Counter`, and exports `counterProps` and `stateId`.
```xml
net10.0
```
```xml
net10.0
```
```xml
net10.0
```
The view packages are on nuget.org; the app's `nuget.config` adds the temporary Xantham Cloudsmith feed
for their `Xantham.Fable.Core.TS` dependency, as [Installation](../guide/installation.md#views) shows.
## The page
```fsharp
module ServerPage
open Ranvier.View
open Counter
open Shared
let options = { Server.Options.defaults with Policy = Omit }
let page (props: CounterProps) : string =
let document =
{ Server.DocumentShell.defaults with
Lang = Some "en"
State = [ stateId, counterProps.Encode props ]
Scripts = [ Server.ModuleScript.Src "/main.js" ] }
Server.renderDocument options document counter props
```
`Server.renderDocument options document definition props` renders the component as `renderPage` does
and writes the whole document around it:
- the component's [head entries](../view/document-head.md) inside ``, after
``;
- the host element, `
`, holding only the body, so hydration's root marker is its first
child;
- each state element after the host, outside it;
- each script after the state elements, so the client bundle loads after the body.
| `Server.DocumentShell` field | Default | Writes |
| --- | --- | --- |
| `Lang` | `None` | The `lang` attribute of ``. |
| `HostId` | `"app"` | The id of the host element. |
| `State` | `[]` | One [`stateScript`](state-transfer.md#writing-the-state) element per id and JSON pair. |
| `Stylesheets` | `[]` | One `` per URL, after the head entries. |
| `Scripts` | `[]` | `Server.ModuleScript.Src src` writes `
```
`/main.js` hydrates the counter: the button the server wrote stays in the document and counts clicks.
## Choosing a shape
| Shape | Use it when |
| --- | --- |
| Server render and hydrate | The first paint should come from the server, and the page then runs in the browser. |
| Client mount only | The page needs no server HTML: mount with [`Mounting.mount`](../view/lifetimes.md) into an empty host. |
| Server render only | The page is static: render with `Server.renderDocument` and no `Scripts`. |
| [Blazor Server](../guide/blazor-server.md) | The UI runs on the server over a circuit, with Ranvier holding the circuit's state. |