Joey
TTCTheo's Typesafe Cult
•Created by Joey on 6/6/2023 in #questions
Client Component Hydration Layout Shift
Next.js 13 with appDir.
I have a page that have a client component on the top and a server component on the bottom.
The client component is an image, and the reason it is a client component is because it displays a different image based on the light/dark mode.
The problem is that, when the page initially loads, the server rendered components first appears on the top, and then the client component hydrates, which causes the server component to shift down, causing an annoying flicker. How can I fix this? Thanks.
2 replies