Owner vs. Parent: What's the Difference?

In classic React, we're used to thinking in terms of Parent/Child relationships. If one component wraps another in JSX, it’s the parent:

But in Next.js (especially with the App Router and Server/Client Component model), there's another layer: ownership.

An Owner is the component that imports and directly uses another component, regardless of the JSX structure.

Let’s look at this example:

In this case: ComponentX is the parent of ComponentY (since it wraps it in JSX). But ComponentZ is the owner of both ComponentX and ComponentY, because it imports and uses them directly.

Ownership Defines Server/Client Behavior

Here's where things get interesting, if a Server Component owns another component, that owned component must also be a Server Component.

In our example: If ComponentZ is a Server Component, then both ComponentX and ComponentY must be Server Components—unless you explicitly mark ComponentX with "use client".

But here’s the kicker:

Even if ComponentX is a Client Component (with "use client"), ComponentY is still rendered on the server because it’s owned by ComponentZ, not ComponentX. This may seem unintuitive at first, but it’s incredibly powerful.

Why This Is Useful:

This model gives you fine-grained control over rendering:

I think the following illustration will help in understanding this concept:

---

Summary:

const Parent = () => {
  return <Child />;
};

const ComponentZ = () => {
  return (
    <ComponentX>
      <ComponentY />
    </ComponentX>
  );
};