How to solve a SSR/CSR mismatch using the DOM

Frontend First

Sam and Ryan chat about how to avoid a flicker of content on initial render due to mismatched server/client rendering. They also chat about the pros and cons of React Hooks, and using StackBlitz containers to debug OSS issues.

Topics include:

• 0:00 – Intro
• 1:46 – Ryan Florence’s tweets about Hooks, useEffect and refs
• 18:12 – How to avoid SSR/CSR rendering mismatches when your initial render depends on client-side APIs
• 37:40 – Using StackBlitz for reproduction in open source
• 45:17 – Isolated app development environments with JavaScript containers

Links:

• Ryan Florence’s tweets on Hooks
• Dan Abramov’s reply
• React beta docs on bugs found from double rendering
• React beta docs on bugs found from re-running Effects
• StackBlitz
• Changelog episode with Ryan Dahl about Deno Deploy as a platform