And anything .tsx, in components, as pages, etc is clientside.

No, the boundary is much more exquisite here

Im not sure about runtime = edge but we are supposed to write 'use client' on the component that requires runtime interactivity

Is there any page in the docs to clear this up for me

Anybody...

What do you need specifically...

Clarity on what's client side and what's server side in 13.4

checking it out

thanks sm

Hi, could you please tell me what to do in a case like this

Fetch that from the server component that is your page.jsx or whatever and pass it as prop to the client component.

I can guide you better if you could share some code in page.tsx file. Because it seems like I'm just guessing what the code would be here.

Yeah

one moment

I fixed it with some contraption type of fix

I cant access the Session object, so accessing the User object

through server side ok calls

But I dont know if this is right or okay, in terms of security

one min, im afk

the workaround i found

Client components cant be async

Only server component does

Aah, that's the way to distinguish?

I read online that everything in app/ is server by default

but when i followed that, i still got errors saying im placing a server comp in a client comp

im so done at this point;-;

No, theres a lot more going on into server and client comps

yes

probably theres something else wrong with the code

hmm

I believe in you! don't give up!

🥰 thenkq

I can't help you if you don't ask the questions so try to divide and conquer your anxieties

as to eliminate imposter syndrome as much as possible

yeah ♥️

have you ever used Clerk before

instead of next auth for authentication

No i haven't

okii

how long did it take you to understand nextjs

and be able to code on your own

I have no clue. I just started coding - going back to reading - back to coding - back to reading

I did experiments as first as to what distinghuish server components and client components

it was a new mental model back then

but now i think some of the active members already gets the idea so we can just tell you how it works

aah

yeah i guess im in that stage too;-;

now

what made you still confused after reading the article

Basically the short answer is
Server Components -> always run in the server
Client Components -> Prerendered in the server, hydrated in the client.

yes that I get

i get the intuition

but several questions creep up

like, what about the files outside the app/ folder

are they server, unless mentioned use client?

and one thing that's driving me crazy, is how can i access client side only functions, like getSession in clerk, in my page.tsx in app/<NAME> folders

cuz they'reall server side, which means, i cant access sessionId at all;-;

## Component Composition
- All component lacks identity by default
- All page/layout are server component by default
- All component inside a file marked with "use client" are client components. This is the entry point of a client component tree
- All component imported to a "use client" file will be regarded as client component
- Therefore, the types of components depends on where they are imported
- Nesting components does not change from server -> client or vise versa. (Hence you can lift up the children prop)

## Client Components
- Next.js will try to prerender client component's initial state (i.e useState(...))
- useEffects and callbacks are definetly run in the client
- Can't handle async

## Server Components
- Are able to run with async and be suspended with <Suspense>
- If you create a component with async make sure to not import it to client component
- Always runs in the server

## Best practices
- Therefore, always mark your file with "use client" if its definetly can't be run in the server
- otherwise, unmarked files are isomorphic (assumed to be able to be run in server and client) like layouts or just html wrappers.

the types of components depends on where they are imported

sorry for the late reply

Create a client component so that you can use the getSession function

@American Kestrel https://youtu.be/Qdkg_mrniLk?si=KiEe3WnCUl9BpdbG

hey thanks! I saw this too!

np, thanks a lot!

gotcha

BIG THANKS FOR THIS

Clarity ☮️