I am just started Next.js and confused about when to use client and server component and other
Answered
American black bear posted this in #help-forum
American black bearOP
I am confused about when to use client-side components and server side and how it helps in better optimisation . documentaion and google did not help me. I have some others doubt someone will hepl me
Answered by fuma
Just use server components whenever possible, putting heavy code in the server can reduce the javascript bundle being sent to the client.
Also, since server components are rendered on the server, you can interact with Node.js APIs or external services via API keys.
A smaller javascript bundle size can help increase the page load speed, and gives users a better user experience.
Client components will be sent to the client, so you should always keep it light. Be careful that client components are pre-rendered on the server too (SSR).
If you have any further questions, feel free to ask here
Also, since server components are rendered on the server, you can interact with Node.js APIs or external services via API keys.
A smaller javascript bundle size can help increase the page load speed, and gives users a better user experience.
Client components will be sent to the client, so you should always keep it light. Be careful that client components are pre-rendered on the server too (SSR).
If you have any further questions, feel free to ask here
34 Replies
@American black bear I am confused about when to use client-side components and server side and how it helps in better optimisation . documentaion and google did not help me. I have some others doubt someone will hepl me
Sun bear
I think there is a table on the documentation about this...
American black bearOP
Yes I read but I have some questions regarding this
Just use server components whenever possible, putting heavy code in the server can reduce the javascript bundle being sent to the client.
Also, since server components are rendered on the server, you can interact with Node.js APIs or external services via API keys.
A smaller javascript bundle size can help increase the page load speed, and gives users a better user experience.
Client components will be sent to the client, so you should always keep it light. Be careful that client components are pre-rendered on the server too (SSR).
If you have any further questions, feel free to ask here
Also, since server components are rendered on the server, you can interact with Node.js APIs or external services via API keys.
A smaller javascript bundle size can help increase the page load speed, and gives users a better user experience.
Client components will be sent to the client, so you should always keep it light. Be careful that client components are pre-rendered on the server too (SSR).
If you have any further questions, feel free to ask here
Answer
American black bearOP
I also have a question if I write "use client" in parent component then only the parent component is client component or the children also become client component
Components imported by a client component will also become a client component, but its children won't.
American black bearOP
Okay okay thank for clearing that doubt
Is their is any way to clear my next concept by making some projects
I prefer making some simple projects like blogs, shopping websites, or twitter clone
American black bearOP
Okay okay sure
Any other resources for this and.. what are the most important concept of next
The most important one? No, from the basics of RSC to some deeper concepts like caching, they are both necessary when you're developing apps in Next.js.
American black bearOP
Okay okay thank you for the help
If I have a doubt should I ask you?
don't ask to ask, just ask. create new thread or ask in #discussions
im sure fuma will be around
@fuma The most important one? No, from the basics of RSC to some deeper concepts like caching, they are both necessary when you're developing apps in Next.js.
American black bearOP
For this is there is any resource to learn this..
@aardani don't ask to ask, just ask. create new thread or ask in <#752647196419031042>
American black bearOP
Ohk sure 😅😅
might want to start with this
https://nextjs.org/docs/getting-started/react-essentials
https://nextjs.org/docs/getting-started/react-essentials
American black bearOP
Yeah I read that
this perhaps for caching
the app dir learn section is coming up but you dont want to wait don't you :''
American black bearOP
Starting something new make me afaired😅
best you can do is experiment, experiment, and experiment
or just watch someone explain it to you :v
app dir is relatively new its very normal to be afraidAmerican black bearOP
Yes.. But overall its.. intersting
Thanks for sharing..
good to know that you have taken interest in this new paradigm lol
@aardani the app dir learn section is coming up but you dont want to wait don't you :''
American black bearOP
I learned app directory structure from YouTube now it's normal
@aardani good to know that you have taken interest in this new paradigm lol
American black bearOP
At the end I have to do
Btw what area you doing learning or doing job
learning to do job
American black bearOP
Okay okay nice