Installation
Add Prehydrate to your project in under a minute
What you need
- React 18 or 19
- Any SSR framework (Next.js, Vite SSR, Remix, etc.)
Install
npm install prehydrateyarn add prehydratepnpm add prehydratebun add prehydrateWorks with your framework
Prehydrate works everywhere React SSR works. If your app server-renders, Prehydrate will work.
Vite SSR
Prehydrate works out of the box with Vite SSR. See the examples for complete working projects.
Next.js
For Next.js App Router, you can use prehydrate in Server Components:
// app/clock/page.tsx
import { PrehydratedClock } from './PrehydratedClock';
export default function ClockPage() {
return <PrehydratedClock />;
}// app/clock/PrehydratedClock.tsx
'use client';
import { prehydrate } from 'prehydrate';
import { useState, useEffect } from 'react';
function Clock({ bind }) {
const [time, setTime] = useState(() => {
const boundProps = bind('time');
return boundProps.time || new Date();
});
useEffect(() => {
const interval = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(interval);
}, []);
return <div>{time.toLocaleTimeString()}</div>;
}
export function PrehydratedClock() {
const { Prehydrate, bind } = prehydrate({
key: 'clock',
initialState: () => new Date(),
});
return (
<Prehydrate>
<Clock bind={bind} />
</Prehydrate>
);
}Remix
Prehydrate works with Remix's built-in SSR:
// app/routes/clock.tsx
import { PrehydratedClock } from '~/components/PrehydratedClock';
export default function ClockRoute() {
return <PrehydratedClock />;
}TypeScript support
Full type definitions included. Your editor will help you every step of the way:
import { prehydrate } from 'prehydrate';
// Type-safe with generics
const { Prehydrate, bind } = prehydrate<Date>({
key: 'clock',
initialState: () => new Date(),
});See the TypeScript guide for more details.