The 3 REAL benefits of Next.js Server Actions

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ส.ค. 2024

ความคิดเห็น • 51

  • @ByteGrad
    @ByteGrad  2 หลายเดือนก่อน +2

    My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

  • @dopetag
    @dopetag 11 หลายเดือนก่อน +12

    This is the second video I have watched on this channel and I am already in love. The explanations are really clear and on point. Top level content!

    • @ByteGrad
      @ByteGrad  11 หลายเดือนก่อน

      Awesome, thank you!

  • @TheGrandChieftain
    @TheGrandChieftain ปีที่แล้ว +18

    Server actions might make the actual request simpler, but React Query seems a lot better for managing the state of your fetch requests.

  • @psyferinc.3573
    @psyferinc.3573 11 หลายเดือนก่อน +2

    your doing well man. im glad you joined the scene

  • @matthiasmatanda4295
    @matthiasmatanda4295 6 หลายเดือนก่อน

    Thank you sir for this short video with very important information that I needed to hear.

  • @saidibra9231
    @saidibra9231 ปีที่แล้ว +5

    can you please make a video between Next.js and Express.js and which one to choose in the back-end and the benefits and cons of each one

    • @ByteGrad
      @ByteGrad  ปีที่แล้ว

      Good idea

    • @berndeveloper
      @berndeveloper 10 หลายเดือนก่อน

      Nextjs has a decent backend, but between Express and Nextjs for backend, I prefer "Nestjs". This last one is a JS backend framework that uses express but is opinionated, I recommend it with close eyes.

    • @gubocci
      @gubocci 9 หลายเดือนก่อน

      Having used nestjs for one medium large project - would not recommend. Way overkill for most projects and makes some simple things way too labour intensive.

  • @user-pf1uk8py3r
    @user-pf1uk8py3r 6 หลายเดือนก่อน +1

    Thanks for your clear explanation! ❤

  • @JasonWongFing
    @JasonWongFing 10 หลายเดือนก่อน +1

    Thanks for your video and explanation! It's helpful to me!

  • @cengizturk
    @cengizturk ปีที่แล้ว +2

    This is exactly what I was looking for. Thanks.

  • @jorden123
    @jorden123 ปีที่แล้ว +4

    Thanks for your video and explanation!
    From a DevOps perspective... you are creating a monolith application, which you can not scale the front and the back separately, I guess this is the biggest downside. The other big downside is that you can not use multiple clients (front-ends) and using the same server (back-end).

    • @rjlacanlaled9419
      @rjlacanlaled9419 10 หลายเดือนก่อน

      turborepo? you create reusable components for each client (assuming they all use typescript/javascript)

    • @Thikondrius
      @Thikondrius 8 หลายเดือนก่อน

      Yeah that is what I am not a fan of server action. There are made to be used by your nextjs front ONLY.

  • @ianc6418
    @ianc6418 8 หลายเดือนก่อน +1

    another great class. thank you

  • @NeilGebhard
    @NeilGebhard ปีที่แล้ว +2

    Appreciate the way you explain things

  • @spas.z.spasov
    @spas.z.spasov 9 หลายเดือนก่อน

    Hello, thank you for the tutorials. What I'm searching for for complex form validation - i.e. a tutorial that puts together the 1) server actions + 2) react-hook-form + 3) zod.

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd หลายเดือนก่อน +1

    Thank you so much

  • @martg0
    @martg0 6 หลายเดือนก่อน +1

    very interesting! clear explanation 👏 Would this apply for a datagrid too?

  • @hibachouchene
    @hibachouchene 3 หลายเดือนก่อน +1

    Best explanation on TH-cam 🤩

  • @phsopher
    @phsopher ปีที่แล้ว +3

    Helpful explanation thanks! Does this only work for forms? Suppose I just want to have a single button that does something, e.g., liking a comment on a social media site. Should I go through the whole process of wrapping it in a form, then making the button a separate child component etc. Seems easier to just make an api endpoint and call it on onClick. Or is there a more Nextonic (a word I just made up) way?

    • @ByteGrad
      @ByteGrad  ปีที่แล้ว +1

      Yes, works outside forms too but you have to invoke the server action differently (not with ‘action’ attribute)

  • @dawid_dahl
    @dawid_dahl 9 หลายเดือนก่อน +1

    Subscribed to this channel so hard! 👌🏻

  • @alvaro1728
    @alvaro1728 9 หลายเดือนก่อน

    So on the surface it may seem simpler but in practice it still makes the same number of network trips and now you have to deal with NextJS and having client vs server components. BTW, you can easily abstract away the fetch calls inside utility classes (eg, api.todos.add(value)). It's a nice way to separate the concerns.

  • @alexnelson2119
    @alexnelson2119 8 หลายเดือนก่อน +1

    I've really been enjoying server actions. Nice not to have to make an api route. One thing I found out recently that's a bit annoying with respect to form data is there are no actual boolean type values you can get from HTML forms. Checkboxes only have 'on' when checked and no value at all if unchecked. Also, input forms always have string values when you get their value from formData, never a number, even if the input is type=number. Of course you can always do a combo of state and server actions.

  • @satyak1337
    @satyak1337 12 วันที่ผ่านมา

    Can you rate limit server acrions like api ? 😊

  • @learner8084
    @learner8084 4 หลายเดือนก่อน

    I'm confused. Do I use React Hook Forms or use Server Actions ? Does React Hook Forms also use server action ? If I use React Hook Forms, I give up the benefit of server actions ? Any advice any one ? Thanks very much in advanced.

  • @mahdimotallebi7207
    @mahdimotallebi7207 11 หลายเดือนก่อน +1

    Thank you

  • @mekelilyasa9561
    @mekelilyasa9561 4 หลายเดือนก่อน

    what's the diffirent with php

  • @baliramgiri2877
    @baliramgiri2877 7 หลายเดือนก่อน

    what if we have server in node and from there, we are storing cookies to browser and using in server components, so I am not possible
    get access of cookies to node server. is there any way?

  • @AnkitSharma-mu3oj
    @AnkitSharma-mu3oj 11 หลายเดือนก่อน

    In previous video you told importing something inside "use client" component then whatever is imported also runs on client side ?

  • @appstuff6565
    @appstuff6565 9 หลายเดือนก่อน

    can we use server actions for sign in , currently using action='/auth/sign-in' with method = 'post' where my sign-in route.ts in in app/auth/sign-in/route.ts?

  • @devarshihazarika4871
    @devarshihazarika4871 ปีที่แล้ว +12

    am I the only one who thinks "progressive enhancment" is bs ?

    • @codedusting
      @codedusting ปีที่แล้ว +2

      Yes 😂

    • @ray-lee
      @ray-lee 9 หลายเดือนก่อน +2

      Yes

    • @gubocci
      @gubocci 9 หลายเดือนก่อน +1

      Yes

    • @Sube_Gordas
      @Sube_Gordas 7 หลายเดือนก่อน +1

      Yes

    • @loveboat
      @loveboat 6 หลายเดือนก่อน

      Useful in 0.0001% of cases and has a fancy name

  • @coders_rant
    @coders_rant ปีที่แล้ว +1

    Good explanation

  • @SR-zi1pw
    @SR-zi1pw ปีที่แล้ว +1

    Nice comparison

  • @brancode404
    @brancode404 11 หลายเดือนก่อน +1

    When are you releasing you Next Js course?

    • @ByteGrad
      @ByteGrad  11 หลายเดือนก่อน

      It’s super close. Make sure you’re subscribed to the email newsletter :)

  • @boyywnkobe
    @boyywnkobe 11 หลายเดือนก่อน

    is it work only for app folder ?

  • @stevebendersky2056
    @stevebendersky2056 11 หลายเดือนก่อน

    How do you reset the form without using useState for each input field?

    • @MrBrandenS
      @MrBrandenS 11 หลายเดือนก่อน

      Well if you need the whole form reset, html forms have a reset method for wiping out inputs.

  • @yigitardaunsal7269
    @yigitardaunsal7269 ปีที่แล้ว

    what is the name of vs code theme?

  • @stevebendersky2056
    @stevebendersky2056 ปีที่แล้ว +1

    Thanks, how do I do it with dashboard and get data? outside of forms

    • @ByteGrad
      @ByteGrad  ปีที่แล้ว

      Best to use fetch in a server component to get data