Next.js Discord

Discord Forum

I am confused about the streaming concept in Nextjs

Answered
Ragdoll posted this in #help-forum
Open in Discord
RagdollOP
I am reading the streaming topic from official tuts https://nextjs.org/learn/dashboard-app/streaming#streaming-a-whole-page-with-loadingtsx . There I added a loading.tsx file inside the dashboard folder, it gets displayed on realod as expected. But Sidebar stayed in the page it was not hidden like the others components from the dashboard page. The tuts said this is because Sidebar is static. I didn't get this line. Where in the code we mark components as static or dynamic? I don't see any such mark. Can anyone explain me this please?x

Code https://github.com/aruprakshit/nextjs-dashboard/blob/main/app/dashboard/loading.tsx
Answered by B33fb0n3
That’s because of your layout. You layout itself won’t reload and also don’t show any loading state. Only the page.js gets the loading state
View full answer

17 Replies

That’s because of your layout. You layout itself won’t reload and also don’t show any loading state. Only the page.js gets the loading state
Answer
RagdollOP
Ok I see
Yea, please mark solution
RagdollOP
@B33fb0n3 One more question. In Nextjs does all components by default server side, and we need 'use client' directive to turn it into client compoent?
@Ragdoll <@301376057326567425> One more question. In Nextjs does all components by default server side, and we need 'use client' directive to turn it into client compoent?
yes 👍
But even if you haven't used the use client it still can be part of the client budle
RagdollOP
ok then why official tutorial often asking to add those directives in some components? for e.g. https://nextjs.org/learn/dashboard-app/mutating-data#2-create-a-server-action here asking to add 'use server' directive. What would happen if I don't add this here? sorry I am asking because I am not quiet sure when we need to throw these directives inside components sometimes?
@Ragdoll ok then why official tutorial often asking to add those directives in some components? for e.g. https://nextjs.org/learn/dashboard-app/mutating-data#2-create-a-server-action here asking to add `'use server'` directive. What would happen if I don't add this here? sorry I am asking because I am not quiet sure when we need to throw these directives inside components sometimes?
In this case there was used a server action. Server actions need this directive, so next knows, that these are functions, that need to run on the serverside. So even when you are on the serverside and want to declare a server action, you need to add the directive inside the function. In this case the function would be called on the client side and to call a server action clientside you need to create a seperate file (in this case actions.js) and add the use server directive on top, so next knows that these functions are server functions
RagdollOP
I think I am still confused 🙂
@Ragdoll I think I am still confused 🙂
haha lol. What can I do, to resolve your confusion? xD
RagdollOP
I don't know either lol.
You can try to copy-paste my answer into gpt-3 or gpt-4 like chat-gpt or bard or bing or whatever and ask every question you want. Bard is pretty simple with complex things ^^
RagdollOP
Who is Brad?
Bard is the AI from google. You can check it here: https://bard.google.com/chat
@Ragdoll Who is Brad?
that's what bard said about it: https://g.co/bard/share/789fbe364e93
I checked the answer from bard and what he said is right
RagdollOP
I'll defn look into this
thankls
np, if you need further help with this problem, please open a new thread and ping me 🙂