{"repo":"vercel-labs/preventing-flash-before-hydration","free":true,"listed":false,"github":"https://github.com/vercel-labs/preventing-flash-before-hydration","clone":"git clone https://github.com/vercel-labs/preventing-flash-before-hydration.git","description":null,"language":"TypeScript","stars":13,"topics":["hydration","nextjs","react"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"Preventing Flash Before Hydration Companion demo for the Preventing flash before hydration guide. Built with LANG=ja JP.UTF-8 to simulate a server/client locale mismatch. Use Chrome DevTools Sensors to test with different client locales. Routes - /inline-script - Date formatting with an inline script. No flash, no hydration error. - /hydration-error - A Client Component calling toLocaleDateString() directly. Hydration error in dev, flash in prod. - /accordion - Persisted accordion state using localStorage , a lazy useState initializer, and an inline script. Key patterns - InlineScript helper ( app/components/inline-script.tsx ) - Sets type=\"text/javascript\" on the server and type=\"text/plain\" on the client to avoid React's script warning. - LocalDate component ( app/components/local-date.tsx ) - Client Component with useId , suppressHydrationWarning , and InlineScript . - Accordion component ( app/accordion/accordion.tsx ) - Lazy useState initializer reads localStorage to match the DOM the inline script set. Running locally The dev script sets LANG=ja JP.UTF-8 automatically. If your browser also uses a Japanese locale, switch to a different one (e.g. LANG=en US.UTF-8 pnpm dev ) to see the mismatch.","default_branch":null,"files":null,"tree":[],"storefront":"/r/vercel-labs","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/vercel-labs/preventing-flash-before-hydration/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}