CMS for Preact: Headless Content Without the Bundle Cost

Preact gives you the React API in 3 kilobytes. Teams pick it when bundle size matters — marketing sites, embedded widgets, performance-critical front ends. But Preact only handles the view. The content behind it — blog posts, marketing copy, docs — still needs a home. Hard-code it and every copy change is a code change. You need a CMS that hands Preact clean data over an API without dragging a heavy runtime back into your lean bundle.

This post covers how to wire a headless CMS to Preact, what to fetch, and why a self-hosted content layer fits a size-conscious stack.

How a CMS connects to Preact

Preact renders; the CMS stores content and serves it as JSON. They talk over HTTP. Your component fetches from the CMS API, gets back posts or pages, and renders them — same pattern as React, because Preact uses the same API.

import { useEffect, useState } from 'preact/hooks';

export function BlogList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://cms.yoursite.com/api/v1/posts?per_page=12')
      .then((r) => r.json())
      .then((json) => setPosts(json.data));
  }, []);

  return (
    <ul>
      {posts.map((p) => (
        <li key={p.slug}><a href={`/blog/${p.slug}`}>{p.title}</a></li>
      ))}
    </ul>
  );
}

The CMS is just a data source. It never touches your bundle, your build, or your routing. That matters most for Preact, where the whole point is keeping the client small.

Why self-hosted headless fits Preact

Preact developers optimize for lean, fast, controlled front ends. A SaaS CMS with a heavy client SDK, metered API, and vendor-owned data works against that. A self-hosted CMS with a plain REST API keeps things minimal.

UnfoldCMS is one option. It's a self-hosted CMS on Laravel with a REST API at /api/v1/*. Crucially for Preact, there's no SDK to install — you use fetch, which is already there. Nothing added to your bundle, no client library to tree-shake.

What matters here:

• No client SDK — fetch against REST endpoints. Zero bundle cost.
• REST + JSON — simple response shapes; no GraphQL client weight.
• Self-hosted, pay once — your server, your data, no per-call billing.

Static prerendering for smallest payloads

Preact shines with prerendering — ship static HTML, hydrate minimally. Pair that with build-time CMS fetches so no API call happens in the browser at all:

• Fetch all content at build time.
• Prerender each route to static HTML.
• Hydrate only the interactive bits.

Result: the visitor gets HTML instantly, and the CMS API is never hit client-side. For content that changes, trigger a rebuild on publish.

Rebuild-on-publish with webhooks

An editor publishes; your prerendered site is stale until it rebuilds. UnfoldCMS fires outgoing, HMAC-signed webhooks on publish/update/delete. Point one at your host's deploy hook:

Editor publishes
  → CMS fires signed webhook
  → Cloudflare Pages / Netlify rebuilds
  → Fresh static Preact site live in ~1 min

The HMAC signature lets your endpoint verify the request is genuinely from your CMS.

Tradeoffs to know

• Preview needs wiring. Drafts return 404 on the public API, so previewing unpublished content means a token-authed preview route you build.
• No revision history. UnfoldCMS doesn't store past post versions — no rollback.
• You run the server. Self-hosting is ops you own. A small VPS handles a content API easily.
• REST only, no GraphQL. For Preact, REST + fetch is the lighter choice anyway.

FAQ

Does UnfoldCMS have a Preact SDK? No. There's no SDK for any framework. You use the fetch already built into the browser against the REST API — zero bundle cost, which suits Preact's size focus.

Can I use it with prerendered Preact? Yes. Fetch content at build time, prerender to static HTML, and use a webhook to rebuild when content changes. No client-side API call needed.

Will it add weight to my bundle? No. Because there's no client library, the CMS adds nothing to your JavaScript. You call REST endpoints with native fetch.

REST or GraphQL? REST only. For a lean Preact front end, that's the lighter integration.

Bottom line

Preact keeps the client tiny; a self-hosted headless CMS keeps the content layer out of the bundle entirely. No SDK, no GraphQL client — just fetch against a REST API you own. Prerender for the smallest payloads, wire a webhook so static builds stay fresh, and you've got content management that respects Preact's size-first philosophy.

See the API in the demo or read the headless CMS for Jamstack guide.

Related: CMS for Next.js · Headless CMS for Jamstack · Best CMS for React developers