Believe it or not, this very smart and very handsome young man has solved many problems and explained things that amounted to months of solving errors. Please continue and explain the use server and fetching data in a separate video, and follow all the problems in the next section in particular every code related to Next please.
Sorry for the big message in advance :c. IMPORTANT: Both Server and Client components are pre-rendered on the server at built time for the initial page load, that's why Client component loggs appear on the server console. Server components only run once, they do not re-render. Yes they can "re-render" if you request them again from the server but in that case it's more like they're "re-building" instead of "re-rendering". After the initial page load, Client components are only re-rendered on the client. What "use client" directive does is telling the Next.js bundler "send this chunk of code and everything that is owned by this file to the browser", which means if you import a component -- either a Server o Client component -- this code and everything under it will be sent to the client as well. This means you're essentially defining a boundary, and everything inside that boundary will run on the client. Like he said, Next.js treats all components as Server components by default, which means you need to opt out of that in case you need to use client-only features like React State, LifeCycle methods (mount, unmount, etc.), the window object and client-only APIs. Only in these situations you should be tempted to write "use client" at the top of the file, and you should try to do it only on very specific components, not the whole page. On the other hand "use server" is not the opposite of "use client", 11:40 NO, you CAN'T and you SHOULDN'T USE this directive on the top of a (default) server component, and certainly not on the top of a file that will be imported inside a "use client" boundary in order to make it run on the server again. "use server" directive tells the bundler "turn all exported async functions into endpoints, expose them for the client to use". Basically, "use client" means -> send this chunk of code to the client, either to hydrate or run client side APIs, and run on the client from now on. "use server" means -> "expose these async functions as POST endpoints to be hit". Only async functions are allowed in a file with "use server" directive at the top. WHY CAN'T SERVER COMPONENTS BE IMPORTED INTO CLIENT COMPONENTS AND REMAIN SERVER ONLY? When Next.js builds the app, it will run and render all server components first and then run and render the client components, if it encounters a client bouldary ("use client") it will execute that code once all the server components were rendered and turned into RSC Payload.
Believe it or not, this very smart and very handsome young man has solved many problems and explained things that amounted to months of solving errors. Please continue and explain the use server and fetching data in a separate video, and follow all the problems in the next section in particular every code related to Next please.
Thanks a lot man 🥰
Fantastic video. Claude 3.5 should watch this. It uses client components everywhere
Haha Chat gpt also
Sorry for the big message in advance :c.
IMPORTANT: Both Server and Client components are pre-rendered on the server at built time for the initial page load, that's why Client component loggs appear on the server console.
Server components only run once, they do not re-render. Yes they can "re-render" if you request them again from the server but in that case it's more like they're "re-building" instead of "re-rendering".
After the initial page load, Client components are only re-rendered on the client. What "use client" directive does is telling the Next.js bundler "send this chunk of code and everything that is owned by this file to the browser", which means if you import a component -- either a Server o Client component -- this code and everything under it will be sent to the client as well. This means you're essentially defining a boundary, and everything inside that boundary will run on the client.
Like he said, Next.js treats all components as Server components by default, which means you need to opt out of that in case you need to use client-only features like React State, LifeCycle methods (mount, unmount, etc.), the window object and client-only APIs. Only in these situations you should be tempted to write "use client" at the top of the file, and you should try to do it only on very specific components, not the whole page.
On the other hand "use server" is not the opposite of "use client", 11:40 NO, you CAN'T and you SHOULDN'T USE this directive on the top of a (default) server component, and certainly not on the top of a file that will be imported inside a "use client" boundary in order to make it run on the server again. "use server" directive tells the bundler "turn all exported async functions into endpoints, expose them for the client to use".
Basically, "use client" means -> send this chunk of code to the client, either to hydrate or run client side APIs, and run on the client from now on.
"use server" means -> "expose these async functions as POST endpoints to be hit". Only async functions are allowed in a file with "use server" directive at the top.
WHY CAN'T SERVER COMPONENTS BE IMPORTED INTO CLIENT COMPONENTS AND REMAIN SERVER ONLY?
When Next.js builds the app, it will run and render all server components first and then run and render the client components, if it encounters a client bouldary ("use client") it will execute that code once all the server components were rendered and turned into RSC Payload.
Wow 😯, nothing to add here, thank you
@@tobitacklestech No no, happy to help! Let me know if I can help with anything else :D
@@Luisllaboj19thanks a lot man! 🎉
I liked the way u explain hard topic is much simpler way. Keep it up bro !
Thank you, I will👀
That was very helpful thanks
Glad it helped
Client would be very useful when you want to work with a custom backend like express or django
Thank you for the video, btw what is the whiteboard app you are using now? That seem nice!
@@Lucifeier this was excalidraw, it is on the Web 🔥
Thanks :)
who was debating about this?
There are always discussions about that, especially if you learn Next js 👀
verceo made nextjs harder 😂 they was the best of the best but now …
I think they still do a very Great Job, New Technologies just need new solutions 👀