Nice question. When mutating Data on the Server and hence forcing NextJS to refresh parts of the Page then useTransition is indicating that change. This might sound redundant first but the underlying technique can unblock the UI. react.dev/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition But explaining that would probably take a full Video 🤗
Tldr: useTransition is required as per NextJS Docs in such a case but that doesn't mean it wouldn't work otherwise nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-using-starttransition
@@codinginflow Very good question mate! This is really difficult to explain in a few comments a s startTransition isn't one of the easiest hooks to get into. I have made a full video about this hook only but in a different language / different platform. If I find the time I might make one on YT as well :). useTransition doesn't require "async" functions per se. It's a React Hook that does basically something like "flush()" when data is being set. Checkout this high-level sample here: blog.webdevsimplified.com/2022-04/use-transition/ There's also no async function inside. Sure, I get the point, you are saying we are calling a Promise which is basically "thrown" and left alone so it won't block the UI like maybe the version in that link does. But: NextJS Docs are requiring exactly this "You mutate data with a Server Action explicitly -> You SHOULD use useTransition". Which extremely likely has something to do with the fact that NextJS uses code which benefits of this. For now I suggest 2 things: - Get deeper into useTransition if that's of interest - Do what the Documentation says to avoid future collisions or unwanted side-effects Cheers Mate!
Thank you for this video it's helpful. Quick question, why are you calling an API inside your server component to fetch data ? Why not just get the data directly?
Good Question! The API basically is a "simulation" as if you are using external data providers. If you don't have external APIs this isn't the use-case I am showing :)
So the only reason there is a Server INSIDE is to simulate as if the server was "outside" (e.g. because you have a "static" page with dynamic data from an external provider, Firebase, Supabase, etc)
NextJS to SQL Server? Most of the time people don't want files _inside_ of the databases rather than on a file system. Is there good reasons to do so? Just hit me up with a bit more info
I'm not sure why you didn't place your server actions directly in the form component? why did you go through all of this mess instead of just putting the server actions right in the addtodoform component and simply use the component in your layout without passing props around etc
Hey, thanks for the comment, appreciated. As always in Software Engineering and Architecture there are many ways to achieve something. I have 2 videos about server actions. This one, in which I wanted to also show how to manually call those actions (which I felt important for an overall understanding especially for newcomers) and the other one in which I show the more pure and also progressive way (as stated at the end of this video). But the tl;dr is: Depending on your given architecture the component might not be the one knowing about the logic e.g. in a interdisciplinary team - which is a common case in corporate design systems e.g. Also you cannot make a Server Component which will do "e.preventDefault()" in the onSubmit as part of the form. But many want to validate in the client as well for better UX. So whilst what you are proposing will definitely work as well (considering its limitations) I went for this way to show a more complex interaction with the goal of providing a broader understanding. Often, when teaching just in a very scoped context, people do not get the "ah, this you can do as well" effect.
Here is the link to the documentation that Server Action definitions are not allowed in Client components: nextjs.org/docs/app/building-your-application/data-fetching/server-actions#usage-with-client-components Happy to hear further questions. Rock on!
@@activenode so whenever you want to have some client-side JavaScript the old React way you gotta make the whole component a client component and pass the server actions as props. Makes sense . I think I get it now, thank you ^^
So much complexity just to make the framework do the simplest things. I think Vercel doesn't know what they're doing at this point. They're creating more problems for every problem they fix. I can't believe people are excited for these new updates. Really disappointed where the front end world is headed.
![[Gegagedigedagedago] NEW Help Gegagedigedagedago Nugget escape from Nikocado Avocado Challenge](http://i.ytimg.com/vi/hJWnwRC2Fz8/mqdefault.jpg)
This is absolutely fantastic, just starting my adventure with Next.JS and React and you've saved me at least a few hours of research. Thanks!
Tip: If you wanna revalidate the page on every refresh but don't use fetch, you can "export const revalidate = 0" from the file of that page instead
Yup, that's an alternative 👍
Your vids are awesome. hope your channel will grow fast!
Thanks so much! Means a lot.
I don't understand the point of the useTransition here. What would be different if you removed it?
Nice question. When mutating Data on the Server and hence forcing NextJS to refresh parts of the Page then useTransition is indicating that change. This might sound redundant first but the underlying technique can unblock the UI. react.dev/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition
But explaining that would probably take a full Video 🤗
Tldr: useTransition is required as per NextJS Docs in such a case but that doesn't mean it wouldn't work otherwise
nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-using-starttransition
@@activenode But you're not awaiting the server action, so why would it cause a block in the UI?
@@codinginflow Very good question mate!
This is really difficult to explain in a few comments a s startTransition isn't one of the easiest hooks to get into. I have made a full video about this hook only but in a different language / different platform. If I find the time I might make one on YT as well :).
useTransition doesn't require "async" functions per se. It's a React Hook that does basically something like "flush()" when data is being set.
Checkout this high-level sample here: blog.webdevsimplified.com/2022-04/use-transition/
There's also no async function inside. Sure, I get the point, you are saying we are calling a Promise which is basically "thrown" and left alone so it won't block the UI like maybe the version in that link does.
But: NextJS Docs are requiring exactly this "You mutate data with a Server Action explicitly -> You SHOULD use useTransition". Which extremely likely has something to do with the fact that NextJS uses code which benefits of this.
For now I suggest 2 things:
- Get deeper into useTransition if that's of interest
- Do what the Documentation says to avoid future collisions or unwanted side-effects
Cheers Mate!
@@activenode Thank you for your writing this 👍 You're a nice guy
Just found your channel, goldmine!
Thanks mate
Thank you for this video it's helpful. Quick question, why are you calling an API inside your server component to fetch data ? Why not just get the data directly?
Good Question!
The API basically is a "simulation" as if you are using external data providers. If you don't have external APIs this isn't the use-case I am showing :)
So the only reason there is a Server INSIDE is to simulate as if the server was "outside" (e.g. because you have a "static" page with dynamic data from an external provider, Firebase, Supabase, etc)
very helpful
fantastic. I'd like to see a video on server components and fetching with those, if you have any insights about them
can you specify? Fetching and returning that data from the Action?
Thanks 👍
Always welcome :)
so..we don't need react query anymore?
Theoretically, yes. However they can be combined like a good team
Hey can you do a video about uploading files to a database? Something like Microsoft SQL Server?
NextJS to SQL Server? Most of the time people don't want files _inside_ of the databases rather than on a file system. Is there good reasons to do so? Just hit me up with a bit more info
I'm not sure why you didn't place your server actions directly in the form component? why did you go through all of this mess instead of just putting the server actions right in the addtodoform component and simply use the component in your layout without passing props around etc
Hey, thanks for the comment, appreciated.
As always in Software Engineering and Architecture there are many ways to achieve something.
I have 2 videos about server actions. This one, in which I wanted to also show how to manually call those actions (which I felt important for an overall understanding especially for newcomers) and the other one in which I show the more pure and also progressive way (as stated at the end of this video).
But the tl;dr is: Depending on your given architecture the component might not be the one knowing about the logic e.g. in a interdisciplinary team - which is a common case in corporate design systems e.g.
Also you cannot make a Server Component which will do "e.preventDefault()" in the onSubmit as part of the form. But many want to validate in the client as well for better UX.
So whilst what you are proposing will definitely work as well (considering its limitations) I went for this way to show a more complex interaction with the goal of providing a broader understanding. Often, when teaching just in a very scoped context, people do not get the "ah, this you can do as well" effect.
Here is the link to the documentation that Server Action definitions are not allowed in Client components: nextjs.org/docs/app/building-your-application/data-fetching/server-actions#usage-with-client-components
Happy to hear further questions. Rock on!
@@activenode so whenever you want to have some client-side JavaScript the old React way you gotta make the whole component a client component and pass the server actions as props. Makes sense . I think I get it now, thank you ^^
Theme?
It is really just a bit of tailwind and this background: `background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%);`
@@activenode vscode theme :c
@@caiohenrique1624 Beautiful Dracula Darker i think
So much complexity just to make the framework do the simplest things. I think Vercel doesn't know what they're doing at this point. They're creating more problems for every problem they fix. I can't believe people are excited for these new updates. Really disappointed where the front end world is headed.