feat(LiveProvider): add opt-in server-rendered previews by tujoworker · Pull Request #414 · FormidableLabs/react-live

tujoworker · 2026-05-18T19:40:48Z

Description

Documentation pages using LiveProvider currently send an empty preview in their initial HTML, even for static examples. This makes that content depend on downloading and running JavaScript. Related to #396 and the earlier initial-render work in #321/#322.

This adds <LiveProvider ssr> for trusted, deterministic examples. For code="<strong>Hello from SSR</strong>", the server output changes from <div></div> to <div><strong>Hello from SSR</strong></div>. Existing consumers stay client-only because ssr defaults to false.

Synchronous inline and noInline previews render immediately. Async transforms leave the server preview empty and reuse the client initialization result during hydration. Delayed noInline callbacks still update the client preview. Transform/evaluation failures use LiveError, and obsolete async results are ignored. Preview component render errors retain React's normal SSR behavior; the docs explain the server-safe code requirements.

The runnable SSR example prints and asserts both HTML outputs.

Type of change

Backward-compatible feature, with a minor changeset

Review checklist

Rebased onto current upstream master (v5.0.1)
Complete diff self-reviewed
Existing client-only defaults and delayed rendering preserved
Regression tests demonstrated the delayed-render and async-error failures before their fixes
SSR, hydration, StrictMode, failure/recovery, updates, and stale results covered
Public API and SSR limitations documented
No new lint warnings; existing Editor warnings remain
Builds, typechecks, 77 unit tests, and 37 Chromium tests pass with React 19.3.0 and React 18.0.0

Public validation run uses the unchanged upstream CI workflow against this exact commit. Upstream CI still requires maintainer approval; the fork run provides inspectable evidence while that is pending.

vercel · 2026-05-18T19:40:52Z

@tujoworker is attempting to deploy a commit to the formidable-labs Team on Vercel.

A member of the Team first needs to authorize it.

changeset-bot · 2026-09-24T13:20:46Z

🦋 Changeset detected

Latest commit: dae0d9a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-live	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

tujoworker · 2026-09-24T13:59:35Z

Hi @ryan-roemer. This is now rebased onto v5 and reworked as opt-in SSR through an ssr prop, disabled by default. It includes hydration, error, update, and async race coverage, plus a changeset. The full Node 24 build and test matrix passes locally.

GitHub Actions is waiting for maintainer approval because this is an external contribution, and Vercel also needs team authorization. Would you have time to approve CI and review the API direction? Feedback on whether this approach fits the project would also be very helpful.

tujoworker · 2026-10-12T06:12:16Z

Hi @ilteoood, would opt-in initial SSR through <LiveProvider ssr> fit the project's direction? It keeps existing consumers client-only, while static documentation examples can appear in the initial HTML.

I've rebased this onto v5.0.1, added a runnable before/after example, and strengthened coverage for hydration, StrictMode, delayed rendering, and error recovery. React 18.0.0 and 19.3.0 both pass locally, and the public fork CI run uses the upstream workflow. The description now includes the rationale and review checklist.

An API-direction check would help before a full review. If this is a direction you'd accept, could you also approve the upstream CI run? Thanks.

tujoworker · 2026-10-12T07:53:52Z

If anyone is interested in SSR support, I could publish a separate adapter package you can use with the original react-live dependency, without patching it.

We're taking this adapter approach internally for now while we wait for upstream SSR support. Here is the implementation PR: dnbexperience/eufemia#9739

ilteoood · 2026-10-15T20:33:33Z

Hi @tujoworker, feel free to open a PR and we'll review it asap

ilteoood · 2026-10-23T13:04:20Z

+    });
+    // StrictMode invokes the client initializer twice; the server invokes it once.
+    expect(transformCode).toHaveBeenCalledTimes(3);
+    expect(container.textContent).toBe("hello");


instead of checking it in this way, could we use a snapshot tests instead?
this allows us to check that the rendered html contains also the strong tag

Thanks, switched this to an HTML snapshot so we check the tag too.

ilteoood · 2026-10-23T13:04:26Z

+    await act(async () => {
+      root = hydrateRoot(container, preview);
+    });
+    expect(container.querySelector("pre").textContent).toBe(


Updated this one too, including the
markup.

ilteoood · 2026-10-23T13:04:50Z

+          </LiveProvider>,
+        );
+      });
+      expect(container.querySelector("strong").textContent).toBe("fixed");


Done, the snapshot now covers the recovered preview and confirms the error is gone.

ilteoood · 2026-10-23T13:05:33Z

+      </LiveProvider>,
+    );
+
+    expect(html).toBe("<div><strong>Hello SSR!</strong></div>");


I would apply it to other html checks as well

Applied snapshots to all the HTML checks in this file.

ilteoood · 2026-10-23T13:09:28Z

+      await act(async () => {
+        resolvers.forEach((resolve) => resolve("<strong>Hello SSR!</strong>"));
+      });


Here we are not awaiting anything inside the act function, so it shouldn't be async at all.

Removed async here. Still awaiting act() so the preview settles before the snapshot.

ilteoood · 2026-10-23T13:09:36Z

+          new Promise((resolve) => {
+            resolvers.push(resolve);
+          }),


can we simplify this using Promise.withResolvers?

Yes, switched both deferred-promise setups to Promise.withResolvers().

ilteoood · 2026-10-23T13:13:19Z

+      scope,
+      code: "capture(() => render(<strong>old</strong>))",
+    });
+    await act(async () => {});


why do we need this empty act?

It was flushing the effect so capture had assigned the callback before rerendering. Replaced it with an explicit waitFor on capture.

ilteoood · 2026-10-23T13:13:29Z

+      </LiveProvider>,
+    );
+    await screen.findByText("new");
+    act(() => complete());


Suggested change

act(() => complete());

act(complete);

Applied, thanks.

tujoworker · 2026-10-23T14:43:29Z

Thanks for the good review, @ilteoood ❤️ I've pushed the updates. Could you approve the pending CI run and authorize Vercel when you have a moment? The checks haven't run yet, so it would be good to get them going and see this turn green.

tujoworker · 2026-10-23T16:04:36Z

Thanks for running the checks, @ilteoood. The React 18 job was ignoring the lockfile and picking up a declaration bundler that doesn't support TypeScript 7.0. I've pushed dae0d9a to preserve the locked tooling and keep React and its types aligned for shared dependencies. Builds, typechecks, 77 unit tests and 37 browser tests pass locally on both React 18 and 19. Could you approve the new CI run when you have a moment?

tujoworker mentioned this pull request May 18, 2026

Documentation on SSR support #396

Open

2 tasks done

This was referenced Aug 5, 2026

Fix SSR regression #321

Closed

SSR not working anymore since 2.3.0 #272

Closed

Unable to write a functional component using hooks (Error: Invalid hook call) #265

Closed

tujoworker force-pushed the feat/ssr branch from fa9e0c8 to 4ab62dc Compare September 24, 2026 13:20

tujoworker force-pushed the feat/ssr branch from 4ab62dc to 188edc8 Compare September 24, 2026 13:49

tujoworker changed the title ~~Add initial SSR support for LiveProvider previews~~ feat(LiveProvider): add opt-in server-rendered previews Sep 24, 2026

Add opt-in LiveProvider SSR support

19617bd

tujoworker force-pushed the feat/ssr branch from 188edc8 to 19617bd Compare October 12, 2026 06:07

tujoworker mentioned this pull request Oct 12, 2026

Verify opt-in LiveProvider SSR compatibility tujoworker/react-live#2

Open

ilteoood reviewed Oct 23, 2026

View reviewed changes

tujoworker added 2 commits October 23, 2026 15:58

Snapshot server-rendered and hydrated preview HTML

29420e6

Simplify async preview test setup

b4a6e4f

Preserve locked tooling in React compatibility checks

dae0d9a

Conversation

tujoworker commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Review checklist

Uh oh!

vercel Bot commented May 18, 2026

Uh oh!

changeset-bot Bot commented Sep 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

tujoworker commented Sep 24, 2026

Uh oh!

tujoworker commented Oct 12, 2026

Uh oh!

tujoworker commented Oct 12, 2026

Uh oh!

ilteoood commented Oct 15, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tujoworker commented Oct 23, 2026

Uh oh!

tujoworker commented Oct 23, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tujoworker commented May 18, 2026 •

edited

Loading

changeset-bot Bot commented Sep 24, 2026 •

edited

Loading