a2ui-project / a2ui-project/a2ui

A2uiSurface throws on SSR: useSyncExternalStore missing getServerSnapshot

オープン
#2,080 コメント 1 件 リアクション 0 件 担当者 1 名 @Varun-S10 が担当を希望しています GitHub で見る
P2 status: needs review type: bug
主要言語
TypeScript
スター
16.4k
フォーク
1.3k
平均マージ
3日 15時間
マージ済み PR(30日)
134

説明

## Bug

When rendering `` in a server-rendered React app (Next.js App Router, Remix, etc.), React throws during the server pass:

```
Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
```

Tracked this down to `A2uiSurface` calling `useSyncExternalStore` without a `getServerSnapshot` argument. React requires this on the server to produce a stable, hydration-safe snapshot — without it the call throws on every SSR render.

## Steps to reproduce

1. Install `@a2ui/react@0.10.2` in a Next.js 14+ (App Router) project
2. Render `` anywhere that executes server-side
3. Server logs the above error on first render

## Expected vs actual

Expected: the component either renders gracefully on the server (returning a stable snapshot or `null`) or is documented as client-only with a clear pattern for opting out of SSR.

Actual: React throws during the server render pass. In strict SSR setups (e.g. `experimental.serverActions: true` or a CI render test) this surfaces as a hard error rather than a recoverable warning.

## Workaround

Skip the component server-side via a `useEffect`-guarded mount flag or a `dangerouslySetInnerHTML` fallback. Works, but means the surface is effectively non-functional until JS loads.

## Environment

- `@a2ui/react`: 0.10.2
- `react`: 19.x
- Next.js: 14 (App Router)

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

codebase 内で A2uiSurface コンポーネントを見つけてください。おそらく `packages/react/src/A2uiSurface.tsx` のようなファイルにあります。`useSyncExternalStore` の呼び出しを探してください。`getServerSnapshot` に関する React 19 SSR の要件を理解してください。プロジェクト内に server-side rendering の既存パターンがあるか確認してください。修正は、適切な `getServerSnapshot` 関数を提供するか、コンポーネントを client-only にすることです。Next.js App Router セットアップでテストして修正を検証してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
next.js, react, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
静か
明瞭さ
明確に書かれている
初心者へのやさしさ
55/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。