Next.js Discord

Discord Forum

Can root app.tsx file from app router be marked as client component?

Unanswered
Bumble bee posted this in #help-forum
Open in Discord
Bumble beeOP
Hi, Can root app.tsx file from app router be marked as client component? Is root layout a server component? can it also be marked as client component

37 Replies

app.tsx is a file convention from the pages router
which is already a client component
Bumble beeOP
@ᴉuɐpɹɐɐ sorry i meant page.tsx*
my bad
ᴉuɐpɹɐɐ
all component in pages router are client component that has the ability to serve server rendered data
there is no server-client component concept in pages router as it is using pre-react 18 feature
Bumble beeOP
but im asking about app router
ᴉuɐpɹɐɐ
oh you meant page.tsx
Bumble beeOP
yeah)
ᴉuɐpɹɐɐ
if you mark a page.tsx as client, then all its child will become a client component. Thats why its an antipattern to mark your page.tsx as client component
Its a different case with layout.tsx since server component can still be passed through the {children} and the parallel slots
Netherland Dwarf
Only mark client for outer edge
Bumble beeOP
i see
Netherland Dwarf
Its like a tree, making one comp client means all its branches are clients
Bumble beeOP
i asked this question bc i wanted to use a hook in root app.tsx and marked it as 'use client', and got this error
ᴉuɐpɹɐɐ
you cant have async component in client components
if you convert it to client component, then you can't use any async component as the imported component
Bumble beeOP
yeah, but i didnt use any async)
ᴉuɐpɹɐɐ
there must be an async component you imported to page.jszx
Netherland Dwarf
Show code
Bumble beeOP
let me check)
ᴉuɐpɹɐɐ
or a deeply imported async component
this is why putting "use client" in page.jsx (and in most case, layout.jsx) is an anti-pattern
Bumble beeOP
 
'use client'
import React, { use } from "react";
import { Header } from "@/components/Header";
import ContentManager from "@/components/ContentManager";
import { Item } from "@/types";

const initialItems: Item[] = [
  {
    id: 1,
    title: "Item 1",
    subItems: [
      { id: 1.1, title: "Subitem 1.1", content: { title: "Subitem 1.1", body: "This is the content for Subitem 1.1. Lorem ipsum dolor sit amet, consectetur adipiscing elit." } },
      { id: 1.2, title: "Subitem 1.2", content: { title: "Subitem 1.2", body: "This is the content for Subitem 1.2. Lorem ipsum dolor sit amet, consectetur adipiscing elit." } },
    ],
  },
  {
    id: 2,
    title: "Item 2",
    subItems: [
      { id: 2.1, title: "Subitem 2.1", content: { title: "Subitem 2.1", body: "This is the content for Subitem 2.1. Lorem ipsum dolor sit amet, consectetur adipiscing elit." } },
      { id: 2.2, title: "Subitem 2.2", content: { title: "Subitem 2.2", body: "This is the content for Subitem 2.2. Lorem ipsum dolor sit amet, consectetur adipiscing elit." } },
    ],
  },
];

const initialSelectedContent = initialItems[0].subItems[0].content;

const Home = () => {
  

  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <ContentManager initialItems={initialItems} initialSelectedContent={initialSelectedContent} />
    </div>
  );
};

export default Home;
its bc this one:
Netherland Dwarf
I dont think you can import
Server into client
ᴉuɐpɹɐɐ
you can, it would just produce an error :KEKW:
@Netherland Dwarf Server into client
Bumble beeOP
what about client into server?
Netherland Dwarf
Thats what alfon was saying
Earlier
You want page.tsx to be server
And import your client comp and pass it there
Your header should be lifted
Bumble beeOP
so the main lesson 'root page.tsx' should always be a server component😄
thx guys for ur time