You are by far one of the best of the few people who manage to explain clearly and straight to the point. That's overly undervalued nowadays. Looking forward to the next stuff I'll grasp from your next Nextjs vid pal.
Hello, I want to use SSR (Server-Side Rendering) and also use useState. Is it possible to do such a thing? In fact, I want to include the comments section where I display 20 comments using SSR and display the rest using the client-side rendering. I want to use them in a combined way, but I don't know how to do it. I know how to fetch more comments, but I don't know how to render that part from the beginning. Can you please provide an explanation? Thank you.
Hey Hamed - appreciate the tutorial! One question, to make your advice more applicable to a real-world scenario: In the tabs example, I noticed you only put an “isPending” prop on the Team tab, because it suited the demo (where you were only switching from Team to Contact and back). But in a real-world scenario, you’d want an implementation that is uniform across all the tabs. How would you accomplish that? Would you have three separate useTransition calls and therefore, three separate [isPending, startTransition] pairs (e.g. [isPendingAboutTabTransition, startAboutTabTransition], [isPendingTeamTabTransition, startTramTabTransition], [isPendingContactTabTransition, startContactTabTransition])?
@ but isn’t the whole point that the transition starts before the setActiveTab has taken effect? In which case isPending would be set to true as soon as a new tab is clicked, while activeTab would still hold the previously selected tab name
@@borislavppetrov No that's not the point. Marking the state as a transition means it's a lower priority, it doesn't block the UI and can be interrupted. Once a button is clicked the activeTab state is updated and the render process of the active tab starts, and since it's marked as a transition it can be interrupted in case of slow/expensive renders. Did you try what I suggested?
According to your last localization video, i have implemented the language switch system. but the issue I am getting is from the middleware you created. i am not getting my static files from the public folder. export const config = { // Matcher ignoring `/_next/` and `/api/` matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"], }; suppose I remove this matcher string and put simple "/" the static files load properly. can you tell me the solution? what do I need to change? please. thanks
nice video bro.. Can you do something with web-component with nextjs? still now, there is no video related to this topic in the youtube and even the google doesn't have any recent posts regarding this.
this channel is so underrated. Thanks for the education. I have learned and still learn from you
I appreciate that!
⅞ц
دم شما گرم 😊
Eraadat 🫡
As expected! Another new thing to learn
There you have it :)
like always, great tutorial, well done 👏
Appreciate that!
Can this be used on a server component without converting to a client component
You can use the `startTransition` function on the server, but state updates only happens on the client.
@@hamedbahram that's fine as long as the page remains server rendered
Really useful ❤❤❤❤❤
Glad to hear that!
You are by far one of the best of the few people who manage to explain clearly and straight to the point. That's overly undervalued nowadays. Looking forward to the next stuff I'll grasp from your next Nextjs vid pal.
Thank you! I'm glad to hear that, and welcome onboard!
What an amazing tutorial! Clearly made me understand this problem!
Thank you! Glad it helped!
Useful
Thanks.
Can this be used with other state management libraries like zustand?
That's a good question! I don't know... I'd have to try.
Thank you
My pleasure!
Hello, I want to use SSR (Server-Side Rendering) and also use useState. Is it possible to do such a thing?
In fact, I want to include the comments section where I display 20 comments using SSR and display the rest using the client-side rendering. I want to use them in a combined way, but I don't know how to do it. I know how to fetch more comments, but I don't know how to render that part from the beginning. Can you please provide an explanation? Thank you.
Sure, you can do that. Watch the video I have on Infinite scrolling where I fetch some initial data and use server actions to load more.
Hey Hamed - appreciate the tutorial! One question, to make your advice more applicable to a real-world scenario:
In the tabs example, I noticed you only put an “isPending” prop on the Team tab, because it suited the demo (where you were only switching from Team to Contact and back). But in a real-world scenario, you’d want an implementation that is uniform across all the tabs. How would you accomplish that? Would you have three separate useTransition calls and therefore, three separate [isPending, startTransition] pairs (e.g. [isPendingAboutTabTransition, startAboutTabTransition], [isPendingTeamTabTransition, startTramTabTransition], [isPendingContactTabTransition, startContactTabTransition])?
No you don't need three useTransition calls, you can use the isPending plus the activeTab state for every tab to showing loading UI.
@ but isn’t the whole point that the transition starts before the setActiveTab has taken effect? In which case isPending would be set to true as soon as a new tab is clicked, while activeTab would still hold the previously selected tab name
@@borislavppetrov No that's not the point. Marking the state as a transition means it's a lower priority, it doesn't block the UI and can be interrupted. Once a button is clicked the activeTab state is updated and the render process of the active tab starts, and since it's marked as a transition it can be interrupted in case of slow/expensive renders. Did you try what I suggested?
@@hamedbahram apologies, I have not yet tried your suggestion. I will do so before commenting further 🙏
Great Video! Please could you make a tutorial on next-redux-wrapper.
Please don't use Redux.
Hey can you share your notion nextjs notes with us it would help us in making notes about nextjs
These are the module content from my NextJs course.
cool, thx.
Pleasure!
According to your last localization video, i have implemented the language switch system.
but the issue I am getting is from the middleware you created. i am not getting my static files from the public folder.
export const config = {
// Matcher ignoring `/_next/` and `/api/`
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};
suppose I remove this matcher string and put simple "/" the static files load properly. can you tell me the solution? what do I need to change? please. thanks
Can you leave the comment on the related video?
nice video bro.. Can you do something with web-component with nextjs? still now, there is no video related to this topic in the youtube and even the google doesn't have any recent posts regarding this.
I'll have that in mind. Thanks for the suggestion.
Love this one Hamed 🫶🏻
Glad to hear that!