Capri

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 selectors as keys. This makes it possible to inject different chunks of HTML into different locations of the template, for example head and #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>
    ),
  };
};
Note

This example uses Capri's async renderToString function instead of the synchronous ReactDOMServer.renderToStaticMarkup to support data fetching via suspense.

MIT Licensed | Copyright © 2022 | Impressum