Next.js Discord

Discord Forum

Dynamic routes and forwardRef and re-rendering component on client

Answered
Russian Toy posted this in #help-forum
Open in Discord
Russian ToyOP
Hey, Im trying to create cv generator and found a problem while trying to generate random geometric pattern while using ref. The main problem is with ref when I want to determine what is the actual heigh of warpper div so i try to getBoundingClientRect on that div and when I do so, whole component renders on the server (as it was before using ref) and then rerender with new pattern on client which cause error about differences between server/client

you can pull repo https://github.com/fijisoo/curriculum-vitae or just look on page file: https://github.com/fijisoo/curriculum-vitae/blob/main/src/app/%5Blocale%5D/page.tsx
if you uncomment SheetLayout and comment out SheetCollectionLayout then it works without rerender

can I somehow force to render this random pattern on client not on server?
Answered by Russian Toy
const GeometricPattern = dynamic(
  () => import("@/ui/modules").then((modules) => modules.GeometricPattern),
  {
    ssr: false,
    loading: () => <span>LOADING</span>,
  }
);
solved the problem
View full answer

2 Replies

fuma
It’s recommended to use it in a useEffect because it won’t cause a hydration error
Russian ToyOP
const GeometricPattern = dynamic(
  () => import("@/ui/modules").then((modules) => modules.GeometricPattern),
  {
    ssr: false,
    loading: () => <span>LOADING</span>,
  }
);
solved the problem
Answer