Next.js 13 - Server & Client Component Basics

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 65

  • @TomDoesTech
    @TomDoesTech 2 года назад +17

    Super underrated channel! Keep up the good work, loving these Next videos

  • @not-me45288
    @not-me45288 Год назад

    Wow!!!!!! This is guy is good. Am now in love with next js. My next app will be built with next JS. Thanks sir, u just gain yourself a new subscriber.

  • @dark_fibre4186
    @dark_fibre4186 2 года назад +1

    Enjoying these simple explanation, Next 13 vids

  • @utkarshseth3082
    @utkarshseth3082 2 года назад +1

    Bro this really simple explanation of client and server components.

  • @nurhamsah_tech
    @nurhamsah_tech Год назад +1

    so much easy to understand, great work 💪💪

  • @angzar
    @angzar Год назад +1

    Excellent Tuomo! love your clear explanations. More nextjs13 please!

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  Год назад +1

      Thank you Ang Zarr! Will so, got couple of nextjs13 videos planned already!

  • @shawn.builds
    @shawn.builds Год назад

    super simple and easy to follow. thanks tuomo

  • @joepetrillo6185
    @joepetrillo6185 2 года назад +4

    So how would a basic todo list app work with server components (if at all). When the data needs to be updated (by the user adding a todo), how would the data get updated? is there a proper way to do this?

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +4

      That is a good question! This is something I am thinking of tackling in a future video so stay tuned!

  • @EricOnYouTube
    @EricOnYouTube Год назад

    This was so good. Thanks for explaining.

  • @jaybedeau4882
    @jaybedeau4882 Год назад

    Thank you for the video, really helpful.

  • @alextonev4145
    @alextonev4145 Год назад

    Awesome vid. Thank you so much!

  • @patite3103
    @patite3103 2 года назад +1

    Great job! Your video is awsome! Could you do a video explaining the concepts "await", "async". Could you please build this example by integrating the use of MongoDB? Thank you!

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад

      Cheers! Thanks for the feedback and suggestions, I will take them into consideration planning next videos!

  • @jamessiebert764
    @jamessiebert764 Год назад

    Exactly what I was looking for 👌 Thank you 😁

  • @karthicktech
    @karthicktech Год назад

    All components inside the app directory are React Server Components.
    What about the components we import from external directory? Like libs/ui in a yarn workspaces monorepo?

  • @postoronnii__
    @postoronnii__ 2 года назад +1

    Hi Tuomo, you are doing a great job! Can you please add a few videos about nextjs 13 vs mongodb/mongoose or firebase? It's not clear for me now, if we remove api folder then should it be manually created in the app folder?

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад

      Thank you! And thanks for the feedback, I’ll see what we can do!

  • @salikjamal3536
    @salikjamal3536 Год назад

    Great tutorial.

  • @amancharlamanas3812
    @amancharlamanas3812 Год назад

    Thanks a lot brother !

  • @junaidalam7371
    @junaidalam7371 Год назад

    Awesome !!!

  • @js2511
    @js2511 Год назад

    I lose 2 days checking documentation and stackoverflow trying to implement a handle in card product button and have the same error because a server component in a client component... your video help me too much thank you!!!!

  • @yoyo26-34
    @yoyo26-34 2 года назад

    very interesting, thks

  • @utkarshseth3082
    @utkarshseth3082 2 года назад +1

    Can you make a video about, how I can fetch data with searching in Nextjs 13, like privously we use useffect and every onchange we fetch data from API, so How we can do this in optimal way in Nextjs 13 ?

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +1

      I'm planning on making a todo app video that has some data fetching for the todos! About the search functionality, I need to look into that more to see what would be the best way.

    • @utkarshseth3082
      @utkarshseth3082 2 года назад

      @@TuomoKankaanpaa Thankyou 😀

  • @Kadotus
    @Kadotus 2 года назад

    Tuomo, you should consider making a bigger Next.js tutorial on some site like Udemy. I'm sure you could produce cool example projects to help people learn and you could make some extra money like that. Maybe you could at least consider that as a future goal, when your RUclips channel grown a bit (which it totally deserves to do.)

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +1

      That is something that would be cool to make! Definately will have that as a goal for the future!

  • @rodz
    @rodz 2 года назад

    omg. Good content!

  • @연습-v9x
    @연습-v9x 2 года назад

    Is SSR possible in client components?

  • @rr2r2r2ra
    @rr2r2r2ra Год назад

    Hello, why do I get this when I add 'use client'; at the top of page.tsx
    Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse ()

  • @303pix
    @303pix 2 года назад

    Hi very interesting! did you try yet in a client component the "use" hook? don't figure out how to stop looping :/

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +1

      Yeah I played around with it a little, but I also got some weird looping issues or something like that, might be that there is some beta bugs in it.

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +1

      Looks like we are not alone, there is an issue also reported about it github.com/vercel/next.js/issues/42469

  • @borisevraev8190
    @borisevraev8190 Год назад

    tnx

  • @henriquematias1986
    @henriquematias1986 2 года назад

    On Next.js 12 the client components will also render on the server for SEO compatibility… It doesn’t happen on 13?

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад

      I'd say yeah, they can also be "rendered" in the server and then use hydration to get the interactivity

  • @alessandroscimone5463
    @alessandroscimone5463 Год назад

    good job! Could you improve the video quality? Thank you!

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  Год назад

      Thanks for the feedback! Is the resolution bad or how would you improve it?

  • @majklzumberi1761
    @majklzumberi1761 2 года назад

    How can you recreate isr rendering within nextjs 13?

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +1

      Planning on making video about this too! But in short you can pass parameters for fetch to achieve ISR, read more here: beta.nextjs.org/docs/data-fetching/fetching#revalidating-data

  • @techknowledgebase4504
    @techknowledgebase4504 2 года назад +1

    How SEO will work ?

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  2 года назад +1

      It should work actually better with server components, because the component html is rendered on the server and no client side javascript is needed to render the page!

  • @nikhil182
    @nikhil182 Год назад

    I'm in the process of migrating my nextjs to use the appDir(v13.4) and the experience has been terrible so far:(

  • @joeltan15
    @joeltan15 Год назад

    You literally just read from the documentation and provided 0 explanation...

    • @TuomoKankaanpaa
      @TuomoKankaanpaa  Год назад

      Sorry to hear that you feel that way, hopefully you at least liked the coding example!