A ToDo List with  

Yup, that's an alternative 👍

Thanks so much! Means a lot.

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

Thanks mate

can you specify? Fetching and returning that data from the Action?

Always welcome :)

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

Theoretically, yes. However they can be combined like a good team

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 ^^

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