Next.js Discord

Discord Forum

is it best practice to put a server component as a child of a client component

Answered
Blanc de Hotot posted this in #help-forum
Open in Discord
Blanc de HototOP
template.tsx:
"use client";

import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { motion } from "framer-motion";

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ ease: "easeInOut", duration: 0.5 }}
    >
      <Navbar />
      {children}
      <Footer />
    </motion.div>
  );
}
Answered by B33fb0n3
if the server component is a child like:
<ClientComponent>
  <ServerComponent />
<ClientComponent>

Then the server component would be translated to a client component automatically. If you do it like your example (with children): 
<ClientComponent>
  {children}
<ClientComponent>

Then you server component stays a server component and thats a good pratice, if you need that component to be a server component
View full answer

4 Replies

@Blanc de Hotot template.tsx: tsx "use client"; import { Navbar } from "@/components/navbar"; import { Footer } from "@/components/footer"; import { motion } from "framer-motion"; export default function Template({ children }: { children: React.ReactNode }) { return ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ease: "easeInOut", duration: 0.5 }} > <Navbar /> {children} <Footer /> </motion.div> ); }
B33fb0n3
if the server component is a child like:
<ClientComponent>
  <ServerComponent />
<ClientComponent>

Then the server component would be translated to a client component automatically. If you do it like your example (with children): 
<ClientComponent>
  {children}
<ClientComponent>

Then you server component stays a server component and thats a good pratice, if you need that component to be a server component
Answer
B33fb0n3
@Blanc de Hotot solved?
Blanc de HototOP
yes thank you
B33fb0n3