Questions about Next.js SSR with motion.

[Austin1serb]

🚀 Context

Next.js 15’s App Router encourages pushing the "use client" boundary as far down the tree as possible.
Every line of code inside that boundary ships to the browser, so isolating client-only bits = smaller JS and full SSR for the rest.

---

💡 Idea

Export each motion element from a tiny “index” file:

// motion-index.ts
"use client";

import { motion } from "motion/react";

export const MotionDiv = motion.div;
// export other tags only if / when you need them

Then in a server component:

import { MotionDiv } from "@/index";

export default function Page() {
  return (
    <MotionDiv
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.6 }}
    >
      {/* ...content... */}
    </MotionDiv>
  );
}

• The page (and its children) stay server-rendered.
• Only the tiny island file hydrates -> smaller bundle, faster TTFB.
• Verified locally – the JS chunk was a few KB lighter.

---

❓ Question to the Motion team

If this gains real-world perf wins so easily, why isn’t something like it baked into motion/react (e.g. a motion/next export)?
Am I overlooking a downside, or is it just API surface / DX trade-off?

Eager to hear thoughts—thanks!

---

[mattgperry]

Check out the RSC import here: https://motion.dev/docs/react-motion-component#usage

[Austin1serb]

Check out the RSC import here: https://motion.dev/docs/react-motion-component#usage

Holy crap THE Matt Perry responded to my post!
haha, but thank you so much, this is exactly what I was looking for. I knew I was missing something. I wish the motion.dev site had better SEO. im sure it will get that in the coming months, but when I was looking this up I couldn't find it anywhere. but thank you so much for your quick response. and also thank you for everything you do for the developer community. Motion is awesome, I wish i started using it earlier! You rock man