A guide to using Next 14 (server actions, RSC, useFormState, useFormStatus)

link to code: github.com/webdevcody/todo-dr...
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
▶️ Generate Chapters: ytchaptersgenerator.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@user-vd8lb2ns6m]

Cody, your teaching style is truly exceptional and best of all: no unnecessary fluff. I just immersed myself in a series of your videos and gained so much valuable knowledge. Thank you very much, and thanks YT for putting your channel on my feed! 👍

[@WebDevCody]

Thank you! Glad you like it

[@franinja080]

This is great, I always get overwhelmed when there is too many features being added to something I use, love seeing these videos just running over the changes

[@codinginflow]

You can also skip noStore if you revalidate the path from your server action. That's incremental static regeneration.

[@isaackoz]

Fantastic video thank you! I think I'm gonna make the switch from tRPC to server actions finally

[@focusotter]

Saw you repost this video on Twitter, glad I bookmarked it and came back to watch it. Great stuff!

[@WebDevCody]

thanks man!

[@oussamachahidi9201]

Thanks man, you're always on time i really needed that ! plus your explanation is easy !

[@antonbyrna3388]

For checkboxes you could probably still use input with a button then make this button to be transparent and position it on top of a checkbox

[@nettion]

I finally understand server actions now lol thanks dude

[@anonymousnoob3660]

Excellent Video! Keep up the good work!

[@captainnoyaux]

Super interesting thanks a lot !

[@haydenthai935]

Cody youre the🐐This video was super helpful!

[@harunalrd]

Just searching for drizzle and your vids showing up - uploaded 2 min ago 😂

[@raygrant9673]

If you wanted to use the same server action on different pages how would you revalidate path on each different page?

[@WebDevCody]

I wouldn't reuse server actions on other pages personally, but I guess you could pass the path as an argument and the action could just dynamically revalidate based on the passed path

[@gneiru]

Noticed that drizzle has an icon in your vscode icons, what icon extension are you using?

[@WebDevCody]

Bearded icons

[@emretfn]

So what if i want to the display a toast after creating a todo?

[@sarahk5055]

For someone building a new production app, would you recommend prisma or drizzle now that you have played around with them both? Would love your input on this

[@WebDevCody]

so far I'm liking drizzle a bit better, but they are both great IMO. drizzle is a bit lower level and requires more knowledge of how SQL works I'd say

[@sarahk5055]

Thank you, I really appreciate your reply @@WebDevCody ❤

[@ktrifon]

Excellent! How about using a server action to do a search based on criteria of a form, and display the returned data back to the screen? Everyone on youtube shows examples like yours (inserts or deletes) and then they display ALL the data. But I would like to see an action to do simple query (using conditions from the form). In this case I am not sure what to do. The component containing the form will still be a server component like in this example? The results, if they are displayed in a separate component, a results component, then that results component will also be a server component? (I guess that in this case the app will look like a php app, totally) or a client component? Am I thinking to the right direction or the approach should be different? Should I return to the fetch/API/useState approach? Thanks man...

[@WebDevCody]

One approach is to put your search string in the query string, and redirect when someone runs a search, then your RSC will rerun and refetch the subset of data and display it

[@SeibertSwirl]

Love you! Great job! First 👸🏿

[@WebDevCody]

🙌🙌🙌🙌🙌 thanks babe!

[@eric55099]

Hi please i need help with this I'm fetching data from a server component and passing it down as props to a client component but I'm getting this error "Error: Maximum call stack size exceeded" when i use the .populate on my Model.....Please what are the possible reasons for this problem?

[@monstajoedev]

formstate and formstatus are expiremental hooks in react, right?

[@WebDevCody]

Canary yes

[@wolffair1119]

Could you do a follow video to this especially the useFormState and unit testing the component that uses it?

[@sorknerl]

Would people still recommend using tRPC with Next14? Loving the videos Cody!

[@WebDevCody]

I think they both kind of solve the same issue which is "end to end" typesafety. I have personally been leaning on server actions since they achieve it.

[@drprdcts]

​@@WebDevCodyhow is next.js 14 comparably type safe when you're casting the request parameters? (5:42).

[@WebDevCody]

@@drprdctswell, in this video I'm doing progressive enhancement to allow the app to work without javascript enabled; this requires using FormData which isn't typed. If you just invoke the server actions directly from onClick callbacks, the arguments and return values are all typed. tRPC won't work with progressive enhancement from what I understand either

[@ibex599]

Can you please resume the react interview series, they were really fun to watch

[@WebDevCody]

I just published one today

[@pawanbhatt9329]

@@WebDevCody yes please it very inresting and we learn a lot even help to crack interview thanks

[@bratislavZdravkovic98]

When submitting a form on a client component with useFormState hook, the app undergoes a hard reload, resulting in the loss of all cached data. Edit: I have a client component (a form) that is using useFormState hook, if fetch goes well i call revalidatePath and redirect outside of try/catch. The problem is redirect because if I remove it then it wont do a hard reload. How can we prevent this from happening?

[@WebDevCody]

What cached data are you losing?

[@bratislavZdravkovic98]

@@WebDevCody I have a tickets page where data is initially cached upon the page's first load. However, when I navigate to the create ticket page and submit the form using , I'm redirected back to the tickets page, triggering a hard reload. This hard reload results in the loss of cached data across all pages. The documentation suggests that using a redirect in a server action is acceptable, but in practice, it isn't. To address this, I modified the create ticket form to and, within the onSubmit function, triggered an action. Upon successful completion, I utilized router.push(...)-and with this adjustment, the process now works seamlessly.

[@EdygarOliveira]

Instead of encapsulating the create form into its own component, you could’ve just gave it a key unique, couldn’t you? Maybe based on the length of the todos or some fingerprinting of the set

[@ChrisTrenkaRC]

Followed along integrating with my own code, then got frustrated and used your repo code directly but the form is not clearing with defaultValue={formState.text} yet the error reporting on the same return works well. running Next 14.1.1-canary.58

[@WebDevCody]

Sorry too hard to help debug over yt commenfs

[@ChrisTrenkaRC]

@@WebDevCody Would not think that is possible but would like to know if you have any issues with this code on next14 Seems the defaultValue is not updating consistantly but the return value on success is

[@ChrisTrenkaRC]

FYI {console.log("text : " + formState.text)} Confirms the formState.text is being updated on chrome console (tried "" and "*") but its not updating the input? @@WebDevCody

[@patolorde]

Great

[@bernatfortet5604]

What are the use cases for people using a browser with disabled javascript?

[@WebDevCody]

People on slower machines who don’t want pop ups and modals as they browse. Progressive enhancement is also to help allow interactivity when the JavaScript hasn’t loaded yet. For example, clicking on a button before react initializes will cause the button to do nothing.

[@simp-]

6:19 - is something similar happening when using Prisma? And how could I resolve it, when using Prisma instead of Drizzle? I would be so thankful. Edit: Same code for those working with Prisma: import { PrismaClient } from "@prisma/client"; import { env } from "~/env.mjs"; // or use node's process.env instead const globalForPrisma = globalThis as unknown as { prisma: PrismaClient | undefined; }; export const db = globalForPrisma.prisma ?? new PrismaClient({ log: env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"], }); if (env.NODE_ENV !== "production") globalForPrisma.prisma = db;

[@WebDevCody]

yes, I do think you need similar code for Prisma to prevent too many connections

[@simp-]

@@WebDevCody Found in T3 stack an example, I didn't know about it until now, that it's needed. Many thanks!!

[@finalfantasy7820]

This is pretty much like Remix with extra steps

[@thalespica]

can you share the code with us please?

[@WebDevCody]

yes sorry: github.com/webdevcody/todo-drizzle

[@citric_acid.]

Com on man. This is so no makes sense staff. Soo many abstractions that is not really fun to write. Code makes no sense to read and write. I want to clearly see the boundary between client and server, where my traffic falls out and comes in. Pretty useful nextjs for the frontend and RSC is great for dynamic and static generation. I prefer having separate http api server over. Had no chance to use server actions. After watching the video had no excitement for trying it, the video is the great though, clear explanations.

[@WebDevCody]

I really enjoy server actions personally. Much better DX than hitting api endpoints directly

[@thespiritualjourney369]

If it's a beginner's guide, then why are you using Drizzle and Docker n all? Some of us, including me, don't know all that stuff. You should only teach NextJS 14 and the rest of the stuff that you have included in the title, which I know you will do in the video. but I am saying this should only be a next-step guide.

[@WebDevCody]

Good point

[@lisander-lopez]

Disagree. Docker has nothing to do with nextjs itself... its just a way to "run" your application.. you can run any other framework on docker...... same with drizzle. His video was veryyy good for nextjs 14. I would ARGUE that him introducing those other "technologies" would help the beginner question it and do some more research and self learning (the whole point of development! Its always evolving)

[@real23lions]

what? Truly skill issue. Come back once you’ve learnt. Don’t expect to be spoon fed

[@lisander-lopez]

@@real23lions I never said I want to be spoon fed? I specifically said "self learning"

[@real23lions]

@@lisander-lopez oops i meant to reply to OP, not you. my bad. i just edited it