Server entry

To generate static markup, Capri expects a file called <your-entry>.server.* right next to your client side entry script. If for example your index.html points to ./src/main.tsx Capri looks for a file called ./src/main.server.tsx.

The render function

The render function receives the pathname of the page to be rendered as argument and returns the markup to be injected into the index.html file.

The markup is returned as object with CSS id or type selectors as keys. This makes it possible to inject different chunks of HTML into different locations of the template, for example head or #root.

You can find examples in the UI frameworks docs. This is what a typical render function for React looks like:

import { StrictMode } from "react";
import { RenderFunction, renderToString } from "@capri-js/react/server";
import { StaticRouter } from "react-router-dom/server.js";

import { App } from "./App";

export const render: RenderFunction = async (url: string) => {
  return {
    "#app": await renderToString(
      <StrictMode>
        <StaticRouter location={url}>
          <App />
        </StaticRouter>
      </StrictMode>
    ),
  };
};