# Live Preview without the loading spinners

How we wired Contentful Live Preview into Next.js 16 server components.

![Modern workspace setup](https://images.ctfassets.net/vn734mok6jmo/seed-blog-2/5fc7a94bc3bee6b685c27735128e258e/seed-blog-2.jpg)

Next.js 16 server components plus Contentful's Live Preview SDK is a great combination — once you stop fighting it. The trick is to keep the editor in a single React tree and let postMessage updates drive re-renders.

We use useContentfulLiveUpdates at the section level and useContentfulInspectorMode for tap-to-edit affordances. Field-level updates feel instantaneous.

The reference implementation lives in apps/web/src/components/sections/hero.tsx. Copy it for new blocks.

**READ MORE**

## Get articles like this in your inbox

Engineering essays on content platforms, React, and the modern web. One email a month.