hydration-safe-inputs

SKILL.md

In SSR/SSG React apps, there's a window between when HTML renders and when React hydrates. If a user types into an input during this window, React's hydration will wipe their input because React initializes state to the default value (usually empty string).

Initialize state by reading the DOM element's current value instead of a hardcoded default:

Search for these patterns that indicate potential hydration wipe issues:

React が引き継ぐときにハイドレーション前にユーザー入力がワイプ/クリアされるという、React のハイドレーションの問題を修正します。 (1) ページ読み込み時に入力フィールドがクリアされるとユーザーが報告する場合、(2) 入力が制御されている SSR/SSG React アプリ (Next.js、Remix、Astro) を操作する場合、(3) ハイドレーションの安全性を目的としてフォームを監査する場合、または (4) 静的にレンダリングされた React アプリで新しいフォームを構築する場合に使用します。 ソース: ethanniser/hydration-test。

原文を見る