Get StartedApp StructureHello WorldHello World ContextHello JSONRoutingURL ParamsQuery ParamsApp MiddlewareRoute MiddlewareMarkdown MiddlewareTailwind MiddlewareStatic FileHello TSXTSX ComponentFunction ComponentServer Side RenderingOAuthMySQLPostgresRedisMongoDeno KVGroupingDeploymentBenchmarks
Server Side Rendering
To create SSR (Server-Side Rendering), we have four main steps:
- Create the TSX or function component.
- Create a hydration file for the component and build it with esbuild.
- Attach the built component to the HTML layout.
- Render the final HTML layout and component from the server.
We've already streamlined these steps. All you need to prepare are the component, layout, and entry point.
Create component modules/web/hello.tsx
export const hello = () => {
return <h1>Hello</h1>;
};
Create layout modules/web/app.layout.tsx
import { LayoutProps } from "https://fastro.deno.dev/http/server/types.ts";
export function layout(
{ data, children }: LayoutProps<{ title: string }>,
) {
return (
<html>
<head>
<title>{data.title}</title>
</head>
<body id="root">
{children}
</body>
</html>
);
}
Create entry point main.ts
import fastro from "https://fastro.deno.dev/mod.ts";
import { layout } from "$fastro/modules/web/app.layout.tsx";
import hello from "$fastro/modules/web/hello.page.tsx";
const f = new fastro();
f.page("/", {
component: hello,
layout,
handler: (_req, ctx) => ctx.render({ title: "Hello world" }),
folder: "modules/web",
});
f.serve();
You can find a more complete example in the template repository.