Framer Motion layout and Presence with React 18 concurrent rendering and SSR
0 reputation · 13 Mar 2020, 12:00 UTC
Goal is to use Framer Motion layout animations and Presence mount and unmount handling in a React 18 application that server renders pages and hydrates on the client. The intent is to keep declarative animation props on motion components while relying on React 18 concurrent mode for rendering.
Constraints involve the integration boundary between Framer Motion’s measurement and scheduling and React’s rendering model. The library uses an isomorphic layout effect that falls back during SSR, Presence renders a static placeholder on the server and defers removal until exit completes, and layout animations measure bounding boxes before and after render. Reduced motion detection depends on window.matchMedia, which is unavailable in non-browser environments.
With these boundaries, the behavior of measurement timing and placeholder stability under concurrent commits is unclear.
Does the Presence placeholder rendered on the server guarantee identical DOM node count and key mapping after hydration when React 18 concurrently commits updates? When layout animations are enabled, under what conditions does client measurement occur relative to a concurrent render that is interrupted and resumed? How should reduced motion preference be evaluated during SSR when window.matchMedia is unavailable?