---
title: SSR and fallbacks
description: Separate server-rendered state, unsupported browsers, hydration, and application fallback policy.
---

Intersection Observer only exists in a browser, so decide three things together: what the server renders, what may change after hydration, and how a client without the API should behave. `initialInView` covers the first, `fallbackInView` covers one component in the third, and `defaultFallbackInView` sets that policy for the whole application.

## Choose the initial policy

Use `initialInView` when you already know how a component should render before the first observer notification:

```tsx
const { ref, inView } = useInView({
  initialInView: true,
});
```

This helps when above-the-fold content should start out visible. It only controls the render before the observer reports. It does not create an observer, and it does not guarantee the target is visible.

## Fallback for unsupported clients

If the observer API is missing, the default behavior is to throw. Set a local fallback when the decision belongs to one component:

```tsx
const { ref, inView } = useInView({
  fallbackInView: false,
});
```

Set a global policy when the whole application should behave consistently:

```ts
import { defaultFallbackInView } from "react-intersection-observer";

defaultFallbackInView(false);
```

Pick `true` when content should count as visible even without observation. Pick `false` when lazy work must not start on its own. Either way, check that the result is safe for every observer in the application, because a global fallback applies to every instance that does not set its own value.

## Hydration

Hydration attaches the observer once the browser takes over, so nothing is observed during the server render. `entry` is `undefined` until an accepted notification arrives, and reading geometry from it on the server will fail.

If the server renders hidden content and the client immediately renders it visible, reserve the layout space and keep the change accessible. Give images dimensions and consider native `loading="lazy"`. For content that matters, make sure it is still reachable when observation is unavailable.