SSR and fallbacks

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:

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:

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

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

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.

A fallback is not a loading strategy. 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.