Show a Suspense fallback only for a part that cannot render meaningfully on the server.
<div class="scene"><div class="steps"><span id="serverStep">SERVER HTML</span><span id="clientStep">BROWSER</span></div><div class="window"><div class="title">YOUR LOCAL TIME</div><div class="display" id="display">Loading timezone…</div><div class="caption" id="caption">Suspense fallback in HTML</div></div><div class="rail"><i id="progress"></i></div></div>.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.steps{display:flex;justify-content:space-between;font:700 clamp(12px,3.3vmin,15px) ui-monospace,monospace;color:var(--muted)}.steps .on{color:var(--accent)}.window{flex:1;min-height:80px;border:1px solid var(--line);border-radius:10px;margin:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--bg)}.title{font:700 clamp(12px,3vmin,14px) ui-monospace,monospace;color:var(--muted)}.display{font-weight:700;font-size:clamp(16px,5vmin,24px);color:var(--accent)}.caption{font-size:clamp(12px,3vmin,15px);color:var(--muted)}.rail{height:5px;background:var(--line);border-radius:5px}.rail i{display:block;height:100%;width:45%;background:var(--accent);border-radius:5px;transition:width .5s}const zone=Intl.DateTimeFormat().resolvedOptions().timeZone;let client=false;function tick(){client=!client;document.getElementById("display").textContent=client?zone:"Loading timezone…";document.getElementById("caption").textContent=client?"hydrated: browser value":"Suspense fallback in HTML";document.getElementById("serverStep").classList.toggle("on",!client);document.getElementById("clientStep").classList.toggle("on",client);document.getElementById("progress").style.width=client?"100%":"45%"}tick();setInterval(tick,2200)With React DOM 19.3, use(browser()) suspends a component during server rendering so its nearest Suspense fallback appears. It does not suspend in the browser, allowing a browser-only value after hydration.
The demo replaces a server fallback with a browser timezone widget. Prefer meaningful server output when available and keep this boundary limited to the part that needs it.
Use it for UI that needs values unavailable on the server, such as a local timezone or browser storage.