Skip to content

spike: mirror Dipankar's React SDK approach for live preview eval - #627

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

spike: mirror Dipankar's React SDK approach for live preview eval#627
maoberlehner wants to merge 2 commits into
mainfrom
spike/react-next-dip

Conversation

@maoberlehner

Copy link
Copy Markdown
Contributor

Summary

Spike that inlines Dipankar's storyblok-react-sdk (createStoryblokRenderer + factory resolver + promise cache + useStoryblokPreview) into the next-latest playground under a dedicated experiment/ route, paired with a stub bridge and stub CAPI response so the renderer/resolver/cache logic can be exercised without external services.

Goal: side-by-side comparison with the spike/react SDK approach to evaluate which direction we want to take for React + RSC live preview.

What's in experiment/

  • _sdk/ — near-verbatim mirror of Dipankar's SDK (create-resolver, create-storyblok-renderer, promise-cache, use-storyblok-preview). The only adaptation: the preview hook subscribes to a stub bridge instead of @storyblok/live-preview's onStoryblokEditorEvent — same contract, deterministic signal.
  • _bloks/ — server + client bloks covering the cases we want to validate: server/client nesting, deep alternation, context through a server subtree, async server fetch (async-server-fetch), and a server-only env var (server-only-secret).
  • _stub/ — hardcoded client response + in-process bridge with manual edit controls, so preview behavior can be triggered without the Storyblok app.

Test plan

  • pnpm nx dev @storyblok/playground-react-next-latest and visit /experiment — page renders the nested story
  • Trigger the stub bridge controls and confirm previews update (client re-render path through use() + Suspense)
  • server-only-secret blok: confirm process.env.SERVER_ONLY_SECRET is undefined during client-side preview re-render (the contrast point with the server-action approach in spike/react)
  • async-server-fetch blok: confirm async server component unwraps via use() cache without re-fetching on unrelated edits
  • Lint clean: pnpm nx lint @storyblok/playground-react-next-latest

Not for merge

Draft / spike — kept on the spike/ branch namespace. Decision artifact, not a feature.

Inlines Dipankar's storyblok-react-sdk (createStoryblokRenderer + factory
resolver + promise cache + useStoryblokPreview) into the next-latest
playground under a dedicated experiment/ route, paired with a stub bridge
and stub client response so the renderer/resolver/cache logic can be
exercised without external services.

Bloks cover the cases we want to validate against the spike/react SDK:
server/client nesting, deep alternation, context through a server subtree,
async server fetch, and a server-only env var.
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.
@maoberlehner

Copy link
Copy Markdown
Contributor Author

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

@maoberlehner
maoberlehner deleted the spike/react-next-dip 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