Render Valyrian.js views on the server
Compile a server TSX component and serialize it to HTML in Node.
The example declares a functional component in server.tsx, compiles it through inline and prints the string returned by render.
Table of contents
Main APIs
- render
- Serializes Valyrian.js views on the server.
- inline
- Bundles build input for server-side tooling.
1. Create server.tsx
Import render from valyrian.js/node and pass it a functional component declared with TSX.
tsximport { render } from "valyrian.js/node";
function App({ path }: { path: string }) {
return (
<main>
<h1>Hello SSR at {path}</h1>
</main>
);
}
const html = render(<App path="/users/42" />);
console.log(html);2. Create tsconfig.json
Configure the automatic TSX runtime documented by Valyrian.js.
json{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "valyrian.js",
"skipLibCheck": true,
"types": ["node"]
}
}3. Create build-server.mjs
Compile server.tsx through inline as a Node ESM module while keeping installed packages external.
jsimport fs from "node:fs";
import { inline } from "valyrian.js/node";
const result = await inline("./server.tsx", {
esbuild: {
format: "esm",
packages: "external",
platform: "node",
},
});
fs.mkdirSync("./dist", { recursive: true });
fs.writeFileSync("./dist/server.mjs", result.raw);4. Build and render
Install Valyrian.js, compile the TSX entry and execute the generated module with Node.
bashnpm install valyrian.js@9.1.13
npm install --save-dev @types/node@22.15.3
node build-server.mjs
node dist/server.mjsResult
render returns this HTML string.
html<main><h1>Hello SSR at /users/42</h1></main>