Dynamic routes and forwardRef and re-rendering component on client

[solar gulch]

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/[locale]/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?

[ripe delta]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[timber heath]

It’s recommended to use it in a useEffect because it won’t cause a hydration error

[solar gulch]

const GeometricPattern = dynamic(
  () => import("@/ui/modules").then((modules) => modules.GeometricPattern),
  {
    ssr: false,
    loading: () => <span>LOADING</span>,
  }
);
``` solved the problem