Skip to content

chore(react): RSC live-preview nesting spike playground - #628

Closed
maoberlehner wants to merge 2 commits into
mainfrom
spike/react
Closed

chore(react): RSC live-preview nesting spike playground#628
maoberlehner wants to merge 2 commits into
mainfrom
spike/react

Conversation

@maoberlehner

Copy link
Copy Markdown
Contributor

What

A throwaway spike in packages/react/playground/next-latest/src/app/experiment/ validating the v2 React SDK's central bet (plans/architecture.md §3.4/§5): a single "use server" render(story) action, re-invoked on each edit, can drive live-preview re-renders through arbitrarily nested server/client bloks resolved through a component registry.

Approach

Registry-driven, with a crisp real vs. stubbed boundary — to make it production-real you swap exactly two things:

  • _stub/ (the only stubbed pieces): the client response (initial story JSON, normally a CAPI fetch) and the live-preview bridge (normally @storyblok/live-preview's onStoryblokEditorEvent, here a JSON-textarea + Submit that fakes editor input events).
  • _sdk/ + _bloks/ (real-SDK-shaped): types, the recursive resolver (storyblok-component), StoryblokView, the live-preview island, and the registered server/client bloks.

The resolver pre-renders nested body bloks on the server and passes them as children, which is what lets server and client bloks nest to any depth (the one legal server-in-client direction).

Coverage

Seed story exercises client-in-server, server-in-client (via children), deep S>C>S>C alternation, client context through a server subtree, an async server component, and server-only (process.env) access.

Verified

  • SSR renders all bloks in ?lp=0 and ?lp=1; island + JSON editor only in ?lp=1.
  • Editing the story JSON + Submit re-renders the whole nested tree (no stale values), context consumer updates, and client state survives the RSC payload swap (card toggle + leaf input). Clean console/dev log.

Notes

  • Pure playground; no changes to any SDK package, no real HTTP/bridge.
  • findings/, plans/, packages/schema/ are intentionally not part of this PR.

Validates the v2 React SDK bet (plans/architecture.md §3.4/§5): one
"use server" render(story) action, re-invoked on each edit, drives
live-preview re-renders through arbitrarily nested server/client bloks
resolved via a component registry.

Registry-driven model with a crisp stub boundary: only the client
response (initial story JSON) and the live-preview bridge are stubbed
under _stub/; the registry, recursive resolver, blok components,
StoryblokView and the live-preview island under _sdk/ and _bloks/ are
real-SDK-shaped.
Adds `_stub/server-db.ts` with a module-level guard (throws if imported on
the client) and an async `getAuthorById()` with artificial latency. Makes
`server-quote` async and awaits the lookup so the preview path is exercised
against a server-only async dependency.
@pkg-pr-new

pkg-pr-new Bot commented Jun 1, 2026

Copy link
Copy Markdown

Open in StackBlitz

@storyblok/angular

npm i https://pkg.pr.new/@storyblok/angular@628

@storyblok/astro

npm i https://pkg.pr.new/@storyblok/astro@628

@storyblok/api-client

npm i https://pkg.pr.new/@storyblok/api-client@628

storyblok

npm i https://pkg.pr.new/storyblok@628

@storyblok/eslint-config

npm i https://pkg.pr.new/@storyblok/eslint-config@628

@storyblok/js

npm i https://pkg.pr.new/@storyblok/js@628

storyblok-js-client

npm i https://pkg.pr.new/storyblok-js-client@628

@storyblok/live-preview

npm i https://pkg.pr.new/@storyblok/live-preview@628

@storyblok/management-api-client

npm i https://pkg.pr.new/@storyblok/management-api-client@628

@storyblok/migrations

npm i https://pkg.pr.new/@storyblok/migrations@628

@storyblok/nuxt

npm i https://pkg.pr.new/@storyblok/nuxt@628

@storyblok/react

npm i https://pkg.pr.new/@storyblok/react@628

@storyblok/region-helper

npm i https://pkg.pr.new/@storyblok/region-helper@628

@storyblok/richtext

npm i https://pkg.pr.new/@storyblok/richtext@628

@storyblok/svelte

npm i https://pkg.pr.new/@storyblok/svelte@628

@storyblok/vue

npm i https://pkg.pr.new/@storyblok/vue@628

commit: 199d9cd

@maoberlehner

Copy link
Copy Markdown
Contributor Author

Spike concluded; superseded by #665 (new React SDK). Closing.

@maoberlehner
maoberlehner deleted the spike/react branch August 11, 2026 09:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant