Server and Client Component decision

[kratess]

I have a page for user in nextjs. I have a part of the page with a user banner. If the user's page belongs to the actual logged-in user then the banner displays a edit icon that can be clicked to edit, if doesn't then its a static image.

In nextjs how should i face this feature? Should i create 2 components? One client component to send if user requisting page is who the page belongs to and a server side component that indeed is only a static image to send to anyone else? Or should i build it all client component and leverage ppr? Or even should i do a dynamic banner render, with a default server side component plus an additional component for editing that only renders if user is the owner of the page?

[Abdullah-dev0]

Make the banner a Server Component by default.
Pass isOwner from the server fetch the user or your auth solution check and validate whatever you wanna do .
Conditionally render:

export default async function Banner({ userId }: { userId: string }) {
  const session = await getServerSession(authOptions);
  const isOwner = session?.user.id === userId;

  return isOwner ? <EditableBanner userId={userId} /> : <StaticBanner userId={userId} />;
}

Only < EditableBanner /> needs to be a Client Component, because it has click handlers You can add suspensive bounder if you want to.