You can keep the same logic (streaming components) in order to show these loading states and if you wanna use something interactive you can create a sub client component and there put all the effects and states... also if the sub client component needs some data, you can then pass the data from the RSC to the client component you created (slider for instance as you mentioned)
I'm pretty sure you can embed client components inside server components. even if they are asynchronously streamed. they can have client-side interactivity.
I guess I’m just finding this a bit of a pain because we are just making server components so we can can fetch data to pass as props to client component. React still renders the client component during the SSR request. It’s almost like we are using server components as a utility function to fetch data
@@WebDevCody we can also fetch data in server components and pass it down to client components as long as its serialisable but react would still render the client component in SSR(build time). even nextjs team modified the top-level fetch api to promise.all in order to prevent waterfall in the client components by loading fetching data inside server components and passing it down as props.
@@WebDevCody I am a bit slow, perhaps. But, was this sarcasm? We ARE using server components as the business service layer to fetch data in lots of real-world applications... or at least this is what I do.
The use case is exactly what you’re showing in the video, d dynamic data that should not block initial rendering of the page. If you need interactivity then you can still do that by importing a client component or add it as a child to the suspense component. I’ve used these components together with useTransition so that only the suspense component shows a suspense loader on trigger instead of doing a full page refresh. An example is a search bar. When the user presses enter you add the search as query params to the URL and then wrap router.push in a useTransition. Now only this suspense component should show the loader fallback. You get the most out of these patterns as a full-stack dev because you don’t need to create API routes. Or if you don’t want to leak some endpoint to the client this is also useful. It’s a bit complex to wrap your head around at first, I agree with that.
@Web Dev Cody I know man haha your videos are very helpful and valuable. I went through your channel and saw how long you've been developing and subscribed once I saw you were an OG. Keep up the great work 💯
Yeah, and this is also my little problem with NextJS.....what they offer is amazing, You can create a very performant app...but to get there, to know all the little quirks, all the little traps they are throwing at You (hello secrets from server passed to client)....I am really wonder is it worth it. In contrast Svelte/SvelteKit is so clean, the server/client separation is so easy to understand, and even this example, streaming, is WAY easier to do (and much nicer). Maybe it doesn't give You like the FULL control of the app, but for me right now, it's winning hard in terms of DX. And it's like 10x easier to make it really performant.
Hey I checked out your SaaS page and you might want to reconsider the "X users have created Y icons" stat. As it stands right now, users have created an average of 2 icons. I assume every user would at least create one icon to see how it works and then they're only creating one more before they bounce? To be fair, I don't know much about business and marketing. The user count does seem solid.
yes, pretty much. The server sends the code over in chunks, so that the browser can render different sections async and not be blocked. Like, the HTML and CSS are literally streamed down from the server like you are streaming a movie, the first chunk helps show the layout and initial things, etc. It's "faster" than having to wait for every single RSC to finish loading data.
Any chance we could get a copy of the code or variance if it? 😅 I like what you’re doing with server side rendering, react server components, and supabase. I want to implement similar features to my current project but I’m not too familiar with how it would be setup👍
Can you tell when i visit to some specific page in next js or route it takes to much time to rather than visiting the same page or redirect for the second time who i can resolve this ?
I can't wait for the BurgerHunt premium subscription that uses predictive AI to hypothesize the future burger joints that will potentially open in my area. Would definitely pay $9.99 a month for that.
You wrap client component with server component Fetch data in RSC and pass it to RCC In the page when u display the RSC which is the wrapper you wrap it with suspense to make fallback to it Problem is this is quite mess
![ATEEZ(에이티즈) - [GOLDEN HOUR : Part.2] Preview](http://i.ytimg.com/vi/X4PfgRPBUVo/mqdefault.jpg)
You can keep the same logic (streaming components) in order to show these loading states and if you wanna use something interactive you can create a sub client component and there put all the effects and states... also if the sub client component needs some data, you can then pass the data from the RSC to the client component you created (slider for instance as you mentioned)
yeah you are correct, not sure why I didn't think about that in this video
Thanks for clarifying!
I'm pretty sure you can embed client components inside server components. even if they are asynchronously streamed. they can have client-side interactivity.
I guess I’m just finding this a bit of a pain because we are just making server components so we can can fetch data to pass as props to client component. React still renders the client component during the SSR request. It’s almost like we are using server components as a utility function to fetch data
@@WebDevCody we can also fetch data in server components and pass it down to client components as long as its serialisable but react would still render the client component in SSR(build time). even nextjs team modified the top-level fetch api to promise.all in order to prevent waterfall in the client components by loading fetching data inside server components and passing it down as props.
@@WebDevCody I am a bit slow, perhaps. But, was this sarcasm? We ARE using server components as the business service layer to fetch data in lots of real-world applications... or at least this is what I do.
Thanks a lot for your videos about server components and Next 13. They are really helpful!
The use case is exactly what you’re showing in the video, d dynamic data that should not block initial rendering of the page. If you need interactivity then you can still do that by importing a client component or add it as a child to the suspense component. I’ve used these components together with useTransition so that only the suspense component shows a suspense loader on trigger instead of doing a full page refresh. An example is a search bar. When the user presses enter you add the search as query params to the URL and then wrap router.push in a useTransition. Now only this suspense component should show the loader fallback. You get the most out of these patterns as a full-stack dev because you don’t need to create API routes. Or if you don’t want to leak some endpoint to the client this is also useful. It’s a bit complex to wrap your head around at first, I agree with that.
Oops, i meant to say to wrap it in a startTransition, not useTransition.
Yeah I still am trying to wrap my head around all of this at this point. It all seems cool, but it’s a lot of new info
Thank you for building burger hunt. I can't wait for the launch🍔
haha I'm not actually building this, it's just a prototype project that allows me to talk about various things
@Web Dev Cody I know man haha your videos are very helpful and valuable. I went through your channel and saw how long you've been developing and subscribed once I saw you were an OG. Keep up the great work 💯
@@daniellewis6228 so are you really a burger connoisseur according to your RUclips profile? Or is this a meme account?
Yeah, and this is also my little problem with NextJS.....what they offer is amazing, You can create a very performant app...but to get there, to know all the little quirks, all the little traps they are throwing at You (hello secrets from server passed to client)....I am really wonder is it worth it.
In contrast Svelte/SvelteKit is so clean, the server/client separation is so easy to understand, and even this example, streaming, is WAY easier to do (and much nicer). Maybe it doesn't give You like the FULL control of the app, but for me right now, it's winning hard in terms of DX. And it's like 10x easier to make it really performant.
Hey I checked out your SaaS page and you might want to reconsider the "X users have created Y icons" stat. As it stands right now, users have created an average of 2 icons. I assume every user would at least create one icon to see how it works and then they're only creating one more before they bounce?
To be fair, I don't know much about business and marketing. The user count does seem solid.
seems like cool functionality for blogs
You can load the blog
but recommended blogs are taking too much time you can stream them.
Is "streaming" just a fancy term for "loading states for server components"?
yes, pretty much. The server sends the code over in chunks, so that the browser can render different sections async and not be blocked. Like, the HTML and CSS are literally streamed down from the server like you are streaming a movie, the first chunk helps show the layout and initial things, etc. It's "faster" than having to wait for every single RSC to finish loading data.
@@WebDevCody Thank you very much for the simple explanation!
If I'm not mistaken you can add child client components on your server component that will then have those interactive funcs.
yeah you are correct, not sure why I didn't think about that in this video
Any chance we could get a copy of the code or variance if it? 😅
I like what you’re doing with server side rendering, react server components, and supabase.
I want to implement similar features to my current project but I’m not too familiar with how it would be setup👍
Yeah let me clean up the code and I’ll paste a link
@@WebDevCody Thank you! I really appreciate it 😃
Can you tell when i visit to some specific page in next js or route it takes to much time to rather than visiting the same page or redirect for the second time who i can resolve this ?
I can't wait for the BurgerHunt premium subscription that uses predictive AI to hypothesize the future burger joints that will potentially open in my area. Would definitely pay $9.99 a month for that.
it'll include monthly ketchup packets mailed to your house so you are ready to burger down at any time
So… can RSC be thought of (say in Next.js context) as a replacement for getServerSideProps, but on the component level (not the whole page's)?
Yes
How do I get my vs code looking like yours
Bearded theme
try to use Parallel routing feature that exist in nextjs 13.4 😉
just read through those docs a bit, this seems pretty cool
whats the theme?
You wrap client component with server component
Fetch data in RSC and pass it to RCC
In the page when u display the RSC which is the wrapper you wrap it with suspense to make fallback to it
Problem is this is quite mess
yeah the RSC acts as basically a way to fetch data, and that's about it.
@@WebDevCody yeah, but with tooooo much less code and less js shipped
I don't understand why this is useful? cant you just do the asynchronous stuff with your component (on initial render) and update state on resolution?
Good job babe! 9am! I’m first and proud hahahaha ❤
Wohoo I released it on time today
Late?? It’s not even stable yet haha most “non twitter, non youtube” devs probs dont know about it.
App directory is stable as of 13.4
@@speedster784 yes but its not really, server actions are still alpha and only next supports the basic RSC protocol. Its all very new.