Troubleshooting

Common Issues

Content still jumping or flashing

If users still see wrong content that jumps when React loads:

Content not updating before React loads

If the page still shows build-time values until React kicks in:

Helper functions not working

If your formatting or calculation functions aren't doing anything:

TypeScript Errors

Debugging Tips

See what Prehydrate is doing

The easiest way to understand what's happening is to view the generated code:

1. Open your page in the browser
2. View page source (Ctrl+U / Cmd+Option+U)
3. Search for prehydrate- to find the container
4. Look at the <script> tag that follows

Add logging to see what's happening

During development, add some logs to trace the flow:

// In your component
const [time, setTime] = useState(() => {
  const boundProps = bind('time');
  console.log('[Clock] bind returned:', boundProps);
  return boundProps.time || new Date();
});

Know when prehydration finishes

window.addEventListener('prehydration-complete', () => {
  console.log('Content is now showing the correct values');
});

Framework-Specific Notes

Next.js App Router

Vite SSR

Still Having Issues?

If none of the above helps:

1. Check the GitHub issues for similar problems
2. Create a minimal reproduction
3. Open a new issue with your reproduction