NextJS 12.1 SSR & SSG: Everything you need to know

Ғылым және технология

Server Side Rendering, Static Site Generation, and Client Side Rendering are all supported with NextJS 12.1. Let's go through all the different modes and explore the new revalidation features in 12 and 12.1.
Code: github.com/jherr/nextjs-pokem...
Deployable data set: github.com/jherr/pokemon
Mountain Duck: mountainduck.io/
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:00 App Walkthrough
2:00 App Setup
2:52 Client-Side Rendering
9:44 Client-Side Rendering Explained
11:16 Client-Side Rendering Usecases
11:39 Deployment
12:49 Server-Side Rendering
17:21 Server-Side Rendering Usecases
17:41 Static-Site Generation
21:18 Deploying Static Sites
22:25 Revalidation
25:58 Forced Revalidation
30:03 Static-Site Generation Usecases
30:56 Outroduction
#nextjs

Пікірлер: 261

  • @dgcp354
    @dgcp3542 жыл бұрын

    Your thumbnail it's the american war poster, hilarious

  • @mattgic42
    @mattgic422 жыл бұрын

    I just wanted to take the time to show appreciation and say thank you for everything you do for us with your videos, sharing your knowledge and helping people like me to grow in the process. You're greatly appreciated.

  • @Bliqu1
    @Bliqu1 Жыл бұрын

    Thank you very much for the straightforward and clear explanations. You've fitted in 30 minutes everything that's really needed. Wish you and your channel all the best!

  • @demiann4160
    @demiann41602 жыл бұрын

    Started following you since your tRPC video. Like your style that explains so much in only a couple of minutes. Might be worth mentioning that the first revalidation technique (time-based) shown here is what next.js calls ISR, Incremental Static Regeneration. Congrats on all your amazing content!

  • @kevinzunigacuellar
    @kevinzunigacuellar2 жыл бұрын

    amazing video Jack, literally summarized data fetching in 30 minutes

  • @netharian_
    @netharian_2 жыл бұрын

    Jack, you’re my favorite instructor right now. Every single video is very interesting and so well explained. Also, you bring examples with pokemon, which makes it even better hahaha.

  • @pim8268
    @pim8268 Жыл бұрын

    Wow, the quality of this channel is just wonderful. The timing of the explanations seams flawless to me too, not too fast, not too slow, just right. Thank you, Jack, for sharing your knowledge like this!

  • @alexr3d
    @alexr3d2 жыл бұрын

    I was trying to do this a few hours before you published. Best explanation on KZread. Congrats.

  • @ayush612
    @ayush6122 жыл бұрын

    PROS: Course Quality Brilliant Explanation Beautiful Animations CONS:

  • @mithatercan
    @mithatercan2 жыл бұрын

    I had been struggling to understand the differences between these 3 terms then I came across your channel and this video. I just want to appreciate you. Thanks a lot for this awesome explanation, everything is super clean now. ✌🙏

  • @mohamedsafwat6696
    @mohamedsafwat6696 Жыл бұрын

    I've been struggling with this for a few days and I can confidently say this is the best explanation of all time, thank you man

  • @mcylinder
    @mcylinder2 жыл бұрын

    This was mucho crazy awesome! Clear, concise, pertinent. Best I've seen. Glad to subscribe.

  • @Delba
    @Delba2 жыл бұрын

    Awesome video Jack! I like how you built on and explained each method 🤩

  • @davidkezi6086
    @davidkezi60862 жыл бұрын

    Thanks again Jack, absolutely love this video. This has to be the best explanation and comparison i have seen of SSR and SSG.

  • @theepan27
    @theepan27 Жыл бұрын

    This is a must watch video for anyone to understand about CSR, SSR and SSG's. No lags and very crisp with a nice and easy example. You have got a happy subscriber

  • @universecode1101
    @universecode11012 жыл бұрын

    This is huge Jack 🤯Thanks for the explanations, as always amazing

  • @vladandreit
    @vladandreit2 жыл бұрын

    You could create videos 3 hours long and i would watch every second. I was waiting for a good video explanation for SSG on demand. Now i have good understanding for all methods. Thank you! Keep up the good work.

  • @jwickerszh
    @jwickerszh2 жыл бұрын

    Small clarification at the end: You do need to "run a server" when using revalidation (aka ISR) as this does SSR (and you obviously have a server API route to call for forced revalidation). However it is still very cool as the SSG content is still there if the server or DB crashed. Could have spent a few minutes on mixing the methods, eg: * in SSG what happens if you added a new pokemon id, would the route do SSR on the first hit. * on the list page you could use SSG for a limited list of pokemons like the first 20 instead of generating it for the whole 800+, then use CSR to fetch on scroll for example

  • @aqua123670

    @aqua123670

    2 жыл бұрын

    ok Mr. Expert then please make the video

  • @centereddev

    @centereddev

    2 жыл бұрын

    Not sure why you got that rude response, these are good points.

  • @clausstilborg8330
    @clausstilborg83302 жыл бұрын

    I absolutely love you content Mr Herrington

  • @dariuspranskus
    @dariuspranskus Жыл бұрын

    Thank you for the great demonstration of Client, SSR and SSG features. I also liked the terminal prompt customisation.

  • @jonathanvandenberg3571
    @jonathanvandenberg35712 жыл бұрын

    That room-flip-transition at the end was freaking mucho mega awesome!

  • @pratikbankar4757
    @pratikbankar47572 жыл бұрын

    You are awesome Jack. Thank you for keeping up with such a wonderful content always.

  • @t0mmx
    @t0mmx2 жыл бұрын

    Mucho awesome explanation! I already knew most of it from before, but it was a great recap with a sprinkle of new info such as revalidate!

  • @BetulKaplan
    @BetulKaplan Жыл бұрын

    This was the neatest explanation I have had for SSR - CSR. Thanks a lot!

  • @vasiovasio
    @vasiovasio2 жыл бұрын

    It's a real showcase of how flexible is Next.js! Really useful video! Thank you, Jack!

  • @axe-z8316
    @axe-z83162 жыл бұрын

    geeeezus was just looking at that ! great content man, keep it up with the extended jsx world.

  • @SpaghettiRealm
    @SpaghettiRealm Жыл бұрын

    I'm senior web developer but new to NextJS, and this video explains those concepts in the best way I can find. Also, all your content is just on the point! Thank you Jack 💙

  • @zombiefacesupreme
    @zombiefacesupreme Жыл бұрын

    WOW!! What a great video! I'm just learning, and I knew every term, but this hammered in the concepts so well. I'm really glad I subscribed to you and decided to check out some older videos!

  • @jonatanmark7557
    @jonatanmark75572 жыл бұрын

    Really cool next.js tutorial.... 👍👍👍After watching this video, I could understand easily about the CSR, SSR and SSG. Thanks Jack!

  • @seymurmammadov3868
    @seymurmammadov38682 жыл бұрын

    you’re an amazing teacher so happy I stumbled on your channel

  • @SunilSkanda
    @SunilSkanda Жыл бұрын

    Fantastic explanation of all the different rendering methods available in Next.js. 🔥

  • @kentay4460
    @kentay44602 жыл бұрын

    Just started to work on SEO migrating my React App to a Next App, that's the best explanation I've seen through my researches as I started from zero on SSG and SSR. Thanks a lot !

  • @dantownsend0
    @dantownsend02 жыл бұрын

    Amazing video - one of the best programming tutorials I've seen.

  • @usmanmughal5916
    @usmanmughal59162 жыл бұрын

    I already knew the rendering method but, after watching this I wished it was there before. Video was refreshing and it is the best short introduction with perfect example.

  • @DavidCCR
    @DavidCCR2 жыл бұрын

    Jack every video is getting better. Love it! "CLEAN ARCHITECTURE" is a nice and interesting topic for sure those days. I would like to see some videos about it. Thank you so much!

  • @Billy_98
    @Billy_982 жыл бұрын

    Thank you so you much, Jack! Greetings from Romania!

  • @shesharaopuli8887
    @shesharaopuli8887 Жыл бұрын

    Simply the best video of Next.Js rendering methods 💕

  • @lucaszanek6204
    @lucaszanek6204 Жыл бұрын

    Awesome!!! Finally i really understood the core differences and where use one of each, thanks for this video!

  • @SuperPompey77
    @SuperPompey77 Жыл бұрын

    Very good explanation on the different methods of rendering pages.

  • @atosupriyanto6990
    @atosupriyanto6990 Жыл бұрын

    My understanding is clear when landed to this video, thanks!

  • @TheOlian04
    @TheOlian042 жыл бұрын

    Ohh.. The production quality has really gone up recently! Well done!

  • @shubhamlatiyan7972
    @shubhamlatiyan79722 жыл бұрын

    Very detailed and awesome video, thank you Jack

  • @maysamtayyeb4552
    @maysamtayyeb4552 Жыл бұрын

    Jack, I never regret watching your rich content. You explain it the way I need to learn stuff. Thank you so much

  • @vincentsolon3216
    @vincentsolon3216 Жыл бұрын

    Wow thank you so much! I have a task to build an ecommerce site and your tutorial help me a lot to understand

  • @sean_dev
    @sean_dev2 жыл бұрын

    Awesome explanation and showcase, thank you!

  • @duketip2010
    @duketip20102 жыл бұрын

    How are you only at 61k subs? Your videos are fantastic and you explain things perfectly!

  • @raqibnur
    @raqibnur Жыл бұрын

    This was the easier explanation I have seen ever. now SSR and SSG are fully clear to me. special thanks for force revalidating

  • @simonedwards7101
    @simonedwards71012 жыл бұрын

    I love it when it goes wrong! As i'm learning I like to take the content I watch and apply it to something I'm working on (I'm not a web dev by trade). What was wrong: One of the entries in my json had an incorrectly ordered key/value pair! This caused some lovely misleading errors that took me a while to pin down. Funny thing is on the surface it looked like it was running in dev but come build time it would error out. Turns out in dev it was only partially working with the second part of the list having slugs and posts that didn't match. Basically everything after the "typo" was broken but only in as much as the slug and post didn't match! Actually, it was a random console.log that caught my eye in as much as it had an empty array at the end of the returned json response. So again, everything looked ok until the last entry in the return. All good fun. Thanks Jack, content like this keeps me inspired and motivated to push through the issues I experience as a learner.

  • @MrBox4soumendu
    @MrBox4soumendu2 жыл бұрын

    Thank you very much. This is the best one to understand the use cases. Thanks a lot!!!

  • @ryanle4059
    @ryanle40592 жыл бұрын

    Thank you Jack for your awesome explanation.

  • @krishgarg2806
    @krishgarg28062 жыл бұрын

    Great! By the way, you can use the "Rest Client" extension so you don't have to write raw curl requests but also keeping it minimal by design.

  • @venicebeachsurfer

    @venicebeachsurfer

    2 жыл бұрын

    You mean something like postman or insomnia?

  • @edouardsouan6330
    @edouardsouan63302 жыл бұрын

    Your video is mucho crazy awesome ! Watching your video is a real pleasure. Thank you.

  • @sanjitselvan5348
    @sanjitselvan5348 Жыл бұрын

    Very well explained. Thanks!

  • @hamzahmd_
    @hamzahmd_ Жыл бұрын

    Thanks, Jack for this amazing content. Easy Explanation.

  • @MrKeliv
    @MrKeliv2 жыл бұрын

    Awesome tutorial and explanation about SSR and SSG. Thanks

  • @kcapt96
    @kcapt962 жыл бұрын

    This was the best video about NextJs. Perfect!

  • @al-doori2392
    @al-doori2392 Жыл бұрын

    Just waw, thank you so much, may god bless you and your family, you really reminding me of my dad. Appreciate everything you post.

  • @TheHoinoel
    @TheHoinoel2 жыл бұрын

    This is a terrific explanation, thank you :)

  • @subhadeepchowdhury5244
    @subhadeepchowdhury52445 ай бұрын

    Tomorrow, I have an interview for Next .js developer position. This video is really helpful to understand the core concepts of Next 12.

  • @sasonbraha4599
    @sasonbraha45992 жыл бұрын

    Really great explanation! Thank you.

  • @froggerabc
    @froggerabc Жыл бұрын

    Brilliant course. Thanks very much

  • @mahdizohrevand9294
    @mahdizohrevand92942 жыл бұрын

    Awesome video, well examples and descriptions

  • @Boy_genivs
    @Boy_genivs2 жыл бұрын

    always here to know whats new and always getting better....thank ypu jack

  • @johnpatrickmadrigal477
    @johnpatrickmadrigal4772 жыл бұрын

    This is a great explanation Jack

  • @wandersonsousa1891
    @wandersonsousa18912 жыл бұрын

    Great content, as expected from your channel, thank you.

  • @rajankonar90
    @rajankonar902 жыл бұрын

    Thanks a lot for the detail explanation.

  • @anuj7286
    @anuj7286 Жыл бұрын

    Finally i understand the concept. Thankyou

  • @halyapin
    @halyapin2 жыл бұрын

    Thanks! Really good explanation

  • @bythealphabet
    @bythealphabet2 жыл бұрын

    Great video Jack, Thank you.

  • @amershboul9107
    @amershboul91072 жыл бұрын

    Amaaaazing explanation! Thanks a lot 💯🔥

  • @wendanny6732
    @wendanny6732 Жыл бұрын

    Really awesome explanation!

  • @farzadmf
    @farzadmf2 жыл бұрын

    NextJS is sooo cool!, and thank you for another great video 🚀

  • @yashiel
    @yashiel Жыл бұрын

    One of the best explanation.

  • @liffidmonky1216
    @liffidmonky1216 Жыл бұрын

    Incredible video, finally, explained amazing made my day. :D

  • @TheLastNinja
    @TheLastNinja2 жыл бұрын

    A great way to demonstrate the server side rendered step is the preview of the first request in the network tab (change filter to all)

  • @tomascarignano5002
    @tomascarignano50022 жыл бұрын

    I love how you explain!

  • @mahdiaghaei8154
    @mahdiaghaei81542 жыл бұрын

    Just what I needed, Thanks

  • @toiageddes1710
    @toiageddes1710 Жыл бұрын

    This content was SO helpfull thank you so much!!! :)

  • @kamichikora6035
    @kamichikora6035 Жыл бұрын

    Great stuff as always

  • @opm95
    @opm95 Жыл бұрын

    Insane video, thank you

  • @oosswwaalldd
    @oosswwaalldd2 жыл бұрын

    Amazing video! Thanks!

  • @jose6183
    @jose61832 жыл бұрын

    Thanks Jack! Great content!

  • @lironavineri
    @lironavineri Жыл бұрын

    Great stuff! thank you!

  • @AshishKumar-ft6wv
    @AshishKumar-ft6wv5 ай бұрын

    This is just awesome. Thanks

  • @codernerd7076
    @codernerd70762 жыл бұрын

    Next.js, gotta server render 'em all, it's you and me I know it's our destiny Next.js, oh, you're my best friend In a React.js world we must defend!

  • @zeeshan4341
    @zeeshan43412 жыл бұрын

    Amazing 🤩 just loves ur content and way of teaching 😉

  • @sergnio
    @sergnio2 жыл бұрын

    What!!! Wow what a fantastic overview and especially demonstration of NextJS. Easy subscribe for me!! Couple questions: 1. What do you mean by "I would use SSR for search if things are dynamic", woudln't you use CSR (client side rendering) for this since there are many unknowns? 2. If you have an app that's mostly static with videos / audio, with a few dynamic elements like user accounts, user preferences, etc. this feels like a strong case for SSG, but I would love to hear your perspective. Something like a personal website that has tutorials of some sort where you upload videos / courses maybe once a month (I honestly don't have one, but it's a simple example)

  • @antonsvyatchenko8876
    @antonsvyatchenko8876 Жыл бұрын

    Mucho crazy awesome video, thx 😊

  • @bythealphabet
    @bythealphabet2 жыл бұрын

    😂, Jack when you said "that to changed the code for SSG was going to take a lot of work, I paused the video and went to do some arrents. You got me😅 so funny!

  • @SocksWithSandals
    @SocksWithSandals2 жыл бұрын

    Very useful. Thank you.

  • @buraksurumcuoglu8303
    @buraksurumcuoglu8303 Жыл бұрын

    Absolute masterpiece content

  • @aqua123670
    @aqua1236702 жыл бұрын

    Thank you, Sir. You are a hero.

  • @fcurcic
    @fcurcic2 жыл бұрын

    This is exactly what i needed, awesome

  • @hui2414
    @hui2414 Жыл бұрын

    nice video! thanks for sharing!

  • @adityanuar
    @adityanuar2 жыл бұрын

    pretty cool explanation, i'm auto subscribing

  • @MrEasyFlying
    @MrEasyFlying2 жыл бұрын

    awsome explaination. thanks a lot.

  • @think-forge
    @think-forge2 жыл бұрын

    Thank you so much. I really mean it!

  • @tomastorres5050
    @tomastorres5050 Жыл бұрын

    This was awesome!

  • @mahdielhajuojy1112
    @mahdielhajuojy1112 Жыл бұрын

    thank you so much you are amazing 💕💕

  • @marco_r80
    @marco_r80 Жыл бұрын

    Thank you, really good guide

Келесі