Server-Side Rendering with Preact

If you’ve built apps with React and Vite, you already understand client-side rendering. The browser downloads a JavaScript bundle, executes it, and builds the DOM. It works, but users on slow connections stare at a blank screen while that bundle loads. Server-Side Rendering with Preact solves this by sending ready-to-display HTML from the server. Preact’s small runtime footprint makes that tradeoff especially appealing for performance-focused applications.

This article explains how Preact SSR works, what tooling is involved, and how hydration connects the server-rendered HTML to a live interactive app.

What Is Preact SSR and Why Does It Matter?

With SSR, your component tree renders to an HTML string on the server before the browser receives anything. The user sees content immediately. JavaScript loads in the background and attaches interactivity afterward.

The practical benefits are real:

• Faster perceived load times — visible content arrives with the initial HTTP response.
• Better SEO — crawlers read fully-formed HTML without executing JavaScript.
• Resilience — pages remain readable even if client-side JS fails or is slow.

Preact is particularly well-suited for SSR because its small runtime adds minimal overhead.

The Core Tool: preact-render-to-string

Preact SSR depends on preact-render-to-string, a separate package that handles server-side rendering.

npm install preact-render-to-string

Synchronous Rendering

For components with no async dependencies, renderToString converts your component tree to HTML in one pass:

import { renderToString } from 'preact-render-to-string';

const App = () => <h1>Hello from the server</h1>;
const html = renderToString(<App />);
// → <h1>Hello from the server</h1>

Async Rendering

When components fetch data or use Suspense with lazy-loaded chunks, use renderToStringAsync instead. It waits for promises and async rendering work to complete before returning the final HTML string.

import { renderToStringAsync } from 'preact-render-to-string';

const html = await renderToStringAsync(<App />);

Streaming

For larger pages, streaming APIs let you send HTML to the browser in chunks as each section renders. renderToPipeableStream targets Node.js streams, while renderToReadableStream targets environments using the Web Streams API, including platforms like Cloudflare Workers, Deno, and Bun. Streaming improves Time to First Byte (TTFB) without waiting for the full render to complete.

Preact Hydration: Connecting HTML to Interactivity

Sending static HTML is only half the job. To make the page interactive, Preact needs to hydrate the existing DOM — attaching event listeners and state without re-rendering from scratch.

import { hydrate } from 'preact';
import { App } from './app.js';

hydrate(<App />, document.getElementById('root'));

Use hydrate instead of render when the DOM was already produced by the server. Using render would discard the server HTML and rebuild it, defeating the purpose.

Hydration mismatches happen when the server-rendered HTML doesn’t match what the client would render. Common causes include rendering timestamps, random IDs, or reading window during the server pass. Keep server and client component logic consistent to avoid them.

Preact Vite SSR: The Modern Setup

For new projects, a Vite-based workflow is the practical default. Vite’s SSR guide documents the dual-build pattern: one build targeting the server entry and another for the client bundle. Preact integrates cleanly with @preact/preset-vite, which handles JSX, aliases, and Preact-specific setup.

For teams that want a more structured starting point, preact-iso provides lightweight routing and prerendering utilities designed specifically for Preact Vite projects.

What to Keep in Mind

Preact SSR shares conceptual ground with React SSR but isn’t identical in every implementation detail. Some React-specific SSR APIs don’t have direct equivalents, and the ecosystem around Preact is smaller — a fair tradeoff for the size and performance gains.

The pattern that works reliably: fetch your data before rendering, pass it as props, render to string on the server, hydrate on the client. Start there, then layer in streaming or more advanced rendering patterns once you have a reason to.

Conclusion

Preact SSR offers a lightweight, performance-focused path to server-rendered applications without the overhead of a larger framework. By combining preact-render-to-string for the server pass, hydrate for client-side activation, and Vite for the build pipeline, you get a setup that’s fast to ship and easy to reason about. Begin with the basic render-and-hydrate flow, keep your server and client output aligned, and reach for streaming only when your application’s scale justifies it.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.