Maybe something to do with pre rendering?

Nope @Savannah
it's called hydration - your pages will be interactive after javascript instructions arrive

so analyze javascript bundle size - reduce it by removing unused code, optimizing dependencies, and using lighter alternatives

yeah, but Next.js has less initial load time than Vite+React

by animation depending on JS, what did you mean in detail?

I see, thank you for replying @James4u

So I guess I need to refactor my code to take into account the fact that the HTML on first load won't be hydrated, so they should be written in a way that it informs the user that hydration is still pending, like a loading state but not quite?

I tried wrapping in suspense but I guess suspense is for other types of loading, not hydration ?

An example of an animation I have is in the index page we have a big title that starts with 0 opacity and its animated with framer-motion with some other fancy stuff

The title is entirely hidden when we test the site in throttled networks

Also we use extensively the onLoad in the <Image> to swap a css animation we use for placeholder while it loads with useState isLoading but this doesn't work and by the time the javascript loads the image already loaded so actually the user sees the image loading in the default browser behavior which is "loading by chunks" like a printer

is there an utility such as Suspense that's meant to replace content before is hydrated ?

Nope, @Savannah <Suspense /> is not about hydration

I think you are thinking in a wrong way, what animatino do you have in your website? can you attach a clip here?

I don't really understand why hydration is an issue with your animation