Need to support ssr with next.js16 "cache componentes"

[newtonEMC2]

There is an internal crypto.RandomId() that doesnt let render on server

Next16+ and "cache components: true"
Also for react compiler

[mhornbacher]

I have been spending hours hunting down why it was making it dynamic! Thank you for finding this. Do you know where in the code this was found?

[mhornbacher]

It looks like it as added in #1893 with const fallbackFormId = useState(() => uuid())[0] ensuring that Math.random() is on the hot path during build.

I see two fixes here:

1. Use the useId hook to generate the initial id. This is the most in-place solution but I am concerned about the note in the docs where this is not supported in async Server Components.
2. Only invoke this function if a formId was not provided and document that formId is required for cache components and/or static builds.

I'll open a PR now for the first one as that seems to be the most straightforward and this is a use client component. So we should be safe...

[crutchcorn]

Moved this to: #1914, as issues are more appropriate and better tracked than discussions

[newtonEMC2]

Thx for anwering!
In the end, we are using what is called for Next 16 with "cache components" enabled, a non deterministic value, so it will make us wrap it into a Suspense, but what we want actually is a form being rendered from the very first html (ssg), and thereafter being hydrated, so yea, it seems like we should be able to provide an ID value from the outside if posible

[newtonEMC2]

Actually i like option 2 a bit more. We are MasOrange developers, if need help let us know

Regards

[mhornbacher]

Hey @newtonEMC2! If you dig into the threads we found two issues here that will likely be fixed separately

1. It seems the dev-tools use an older version of @tanstack/pacer which includes a call to crypto to generate jitter. Removing this should fix the static HTML issue. Hopefully when this gets merged in your issue should go away but @harry-whorlow is actively fixing it (like a rockstar 🎸)
2. There is a Math.random() within the uuid function, which does work but causes an hydration issue if a formId is not provided. To fix this there is a PR (fix(react-form): fix cache components support #1913) which updates the code to use the useId hook in React 18+ (while falling back to the old implementation in React 17 that does not support SSR)