Learn SSR for NEXT.JS in 10 Minutes (Server Side Rendering for beginners)

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
This video is designed to get you familiar with Server Side Rendering in Next.js where we cover topics such:
👉 What Server Side Rendering is?
👉 How is SSR different to a normal React app?
👉 The Benefits of having a Server Side Rendered Page & Website!
👉 Building your first Server Side Rendered Page!
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:19 Brilliant Sponsor
01:31 Server Side Rendering Explanation
03:26 Creating a Next.js project with Fetching API Data Client Side
06:33 Implementing Server Side Rendering with Fetching API Data Server Side
08:58 Server Side Rendering Summary + Comparison
09:22 Outro
Let’s get it PAPAFAM 🔥.
#reactjs #nextjs #ssr #serversiderendering #react #javascript #tutorial #beginners

Пікірлер: 147

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

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @StrikerEureka85
    @StrikerEureka852 жыл бұрын

    i'm a back-end developer reading up on front-end development. you do a very good job of explaining SSR in a more digestible way. thank you so much for uploading this.

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

    I like that you are explaining what something like the map() function does in detail. It makes the code less cryptic and easier to remember for newcomers.

  • @robertotieno7414
    @robertotieno74142 жыл бұрын

    Great work Sonny! That was so simple! I thought it was going to be complicated. Thank you so much!

  • @gabrielvrldev
    @gabrielvrldev10 ай бұрын

    What if the API response is super slow? The user will probably see nothing until the next.js server returns something, right? Is there some workaround this?

  • @haochen816
    @haochen8162 жыл бұрын

    You’re awesome!!! I spent lots of time to learn SSR, you just help me figure it out in ten minutes!! Thanks!

  • @dart_ariz604
    @dart_ariz6042 жыл бұрын

    Hey Sunny!! Great content and easy explanations. Just thanks man. BTW your new setup is looking super cool🔥

  • @raiyanthedeveloper
    @raiyanthedeveloper2 жыл бұрын

    We want more tutorials like this on next js. 🔥🔥🔥🔥🔥

  • @Furki4_4
    @Furki4_411 ай бұрын

    Thank you for quick intro into SSR, it helped me a lot

  • @correctcode367
    @correctcode3672 жыл бұрын

    The SSR for Next.js was very useful for me! Thank you Sonny ❤❤❤

  • @yoJuicy
    @yoJuicy2 жыл бұрын

    Keep up the great content! Love the intermediate to advanced stuff you put out! I want to see you build a mom & pop store site from scratch, no clone, next. ;)

  • @oladipupoakorede
    @oladipupoakorede2 жыл бұрын

    mehn sonny , this year is going to be lit for the papafam, great content as always

  • @Mikewendwosen
    @Mikewendwosen4 ай бұрын

    i have been wandering in the wilderness looking for someone to help me understand this NextJs thing finally i got you thank you bro

  • @xcrxwadda8287
    @xcrxwadda82872 жыл бұрын

    Your content is always amazing :) keep up the good work

  • @mohammadabujaradeh6993
    @mohammadabujaradeh69932 жыл бұрын

    Great and clear explanation . As always, Best content

  • @ravi007002
    @ravi00700213 күн бұрын

    Very easy to understand. Goos job man

  • @shanmugavadivelug7236
    @shanmugavadivelug7236Ай бұрын

    Well explained. Thanks mate

  • @ICy42
    @ICy422 жыл бұрын

    Kabhi bhul nahi payenge aapko, SSR Sir! You will always remain in our hearts!❤️😔❤️😔❤️

  • @navinkodam412
    @navinkodam4122 жыл бұрын

    Much needed videos like this....thanks sonny🤩🤩....keep up like this 🤟

  • @jamespoda5621
    @jamespoda56212 жыл бұрын

    SSR explained in ten minutes wow 😲 thanks alot much love from Zambia

  • @Devaitechs
    @Devaitechs2 жыл бұрын

    Love you Sonny 💘! keep it up. We love watching next js content

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

    Thank you ! It’s very clear for me now 🎉

  • @danishansari5746
    @danishansari57462 жыл бұрын

    Please bring More videos on SSR. This was one best video on SSR

  • @yoursyasuo5868
    @yoursyasuo58682 жыл бұрын

    Amazing video Sonny! Please don't stop the consistency and please bring us more educational NextJS videos. Could you also start NestJS(Architectural Express JS framework)?

  • @sicario55

    @sicario55

    2 жыл бұрын

    Nextjs is more than enough to become successful.... lets just wash rinse repeat.. If anything CI/CD skills & testing the builds yields bigger returns

  • @junior2441
    @junior24412 жыл бұрын

    Thanks Sonny! Shot out from brazil!

  • @arunsunny734
    @arunsunny7342 жыл бұрын

    This was very helpful. Thanks a lot

  • @MilindaAbeykoon
    @MilindaAbeykoon2 жыл бұрын

    great explanation! 👌🔥

  • @michelgerges2678
    @michelgerges26782 жыл бұрын

    I love the explanation 🔥🚀

  • @madhousenetwork7765
    @madhousenetwork77652 жыл бұрын

    Can't thank you enough. Subscribed!

  • @shahmirfaisal8162
    @shahmirfaisal81622 жыл бұрын

    Sonny, I'm learning next and kindly keep uploading these small tutorials about nextjs

  • @ItzMeHaRiSuDHan
    @ItzMeHaRiSuDHan11 ай бұрын

    crisp and clear thanks a lot

  • @SonnySangha

    @SonnySangha

    11 ай бұрын

    You're welcome!

  • @donewithwork
    @donewithwork10 ай бұрын

    Great video!

  • @arnav_0397
    @arnav_03972 жыл бұрын

    You're awesome Sonny 🤟

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

    great explanation!

  • @PraveenKumar-ft2kr
    @PraveenKumar-ft2kr2 жыл бұрын

    Wow.. Super brother 👏🏻👏🏻👏🏻👏🏻

  • @rohitkf8474
    @rohitkf84742 жыл бұрын

    LOVE NEXT JS !!! Thanks for teaching a short part of it :) Looking forward for quick lessons for all other features of NEXT.JS Also, Do you have an ND filter ? Would help with the over exposure of your face :)

  • @VivekKumar-ov8sg
    @VivekKumar-ov8sg Жыл бұрын

    Awesome explanation

  • @awaisraza2285
    @awaisraza22852 жыл бұрын

    you are doing awesome sonny

  • @RakKhoshGaming
    @RakKhoshGaming2 жыл бұрын

    I like this small and informative videos

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

    Thank You So Much !

  • @marimuthur9456
    @marimuthur94562 жыл бұрын

    Nice explanation 👌🏼👌🏼👌🏼

  • @bencarter8108
    @bencarter81082 жыл бұрын

    Awesome video Sonny! Very clear explanation for the beginners!

  • @joshuachris1419
    @joshuachris14192 жыл бұрын

    Aiit, so I made the 1000th like. Gotta drop a comment. The Intro was really dope, Sonny.

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

    Best Explanation.

  • @evergreen7781
    @evergreen77812 жыл бұрын

    Sonny in a Sunny background with absolutely Stunning content ❤️❤️❤️

  • @kimokimo-se3ur
    @kimokimo-se3ur2 жыл бұрын

    Keep the good work mate ! Consider doing crash courses instead of long project videos please , thank you

  • @sanjarerkinov1865
    @sanjarerkinov18652 жыл бұрын

    Awesome! 🤩🤩🤩

  • @vishaltp6083
    @vishaltp60832 жыл бұрын

    Nice explanation brodha...

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

    Man u are the goat and there is not even close 🐐 🐐 🐐 🐐 🐐

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

    clear , thank

  • @Kagura12118
    @Kagura121182 жыл бұрын

    thanks Sonny for telling me how👍

  • @user-kd2rx5lg2n
    @user-kd2rx5lg2n5 ай бұрын

    Very cleear ,, huge thanks

  • @syedmunawwarali5999
    @syedmunawwarali59992 жыл бұрын

    Love and support from India

  • @skverskk
    @skverskk2 жыл бұрын

    Well done.

  • @shishiragrahari6412
    @shishiragrahari64122 жыл бұрын

    This was needed

  • @azula9714
    @azula97142 жыл бұрын

    Thank you!!!

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

    Thanks!

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

    Thank you for the content. Which extension you are using for code suggesstions?

  • @syedhassanraza6605
    @syedhassanraza660511 ай бұрын

    this make ssr very easy to understand

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

    Best explaination

  • @flippy88ify
    @flippy88ify27 күн бұрын

    Sheesh thanks u broke down SSR in 10 min for me. Thanks

  • @Baraka0369
    @Baraka03692 жыл бұрын

    Si we have to name the function as you do ? Is the function name part of the SSR process or is it rather the destructured props passed to the component function ?

  • @Amarwaha31
    @Amarwaha312 жыл бұрын

    Papa React... The Best

  • @avisterdeveloper1120
    @avisterdeveloper11202 жыл бұрын

    You're my heroe, love your videos! Let's build more apps please!

  • @alipasha7275
    @alipasha72752 жыл бұрын

    Ohhh sonnny, welcome to middle east. New set up is awesome ❤❤

  • @belkocik
    @belkocik2 жыл бұрын

    Hope you focus your content on Next.js and give us more advanced stuff with it :)

  • @chatorebulletye869
    @chatorebulletye8692 жыл бұрын

    Roll the intro 🔥👍🏻

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

    good explanation, i wish you may give more examples, I have a question what if there is no data in array then it will stuck on loading,. just a suggestion, write code like you would do in your professional project. so we can also learn clean coding from you.

  • @craigronald
    @craigronald11 ай бұрын

    Would've been interesting to see how the code behaved when a timeout was also put in the server-side rendering component

  • @alabhyajindal
    @alabhyajindal2 жыл бұрын

    Let's go papa fam

  • @waleedsharif618
    @waleedsharif6182 жыл бұрын

    Which one should we use and why ? getserversideprops or getstaticprops?

  • @ajaysatish8720
    @ajaysatish87202 жыл бұрын

    What is the extension ur using for auto complete?

  • @jhonbrixbrion8030
    @jhonbrixbrion80307 ай бұрын

    I have a question, so I'm trying to make a thesis on our website builder, Im creating an external HTML along with its css on a for example Output Folder, and I want to Render the file into my React application using next, the objective of it is to create and delete sections (stackable) and as im doing that' its updating the external HTML and CSS files source code. now the question it, will the HTML and CSS files update along with the source code while adding elements like a preview to it or you need to reload the application?? talking about if its possible with server side rendering using NextJS

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

    how to fetch our own .json arrays that we stored in our project folder? i want to access them in a function in a jsx file. 'fetch' is not compatible for .json.

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

    How is SSR any faster in your example? You’re still making an API call to an external API from your server. Why should that call be any faster?

  • @solomonakinbiyi
    @solomonakinbiyi2 жыл бұрын

    Thanks sunny

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

    What if I want to refetch again if something changes? For eg. in the useEffect I can pass something in dependency array and when it changes I will fetch again but how can I do it getServerSideProps()?

  • @zambianyoutuberx
    @zambianyoutuberx2 жыл бұрын

    Yo! I have smashed the thumbs up button! Thanks for sharing! But now I want to know how to use this SSR with Redux Thunk and useSelector, can you do a Video on that?

  • @alijawwad1763
    @alijawwad17632 жыл бұрын

    Awesome sunny. Just ind thing that How are you getting those predictions?

  • @jesseneon1896
    @jesseneon18962 жыл бұрын

    I love your videos so much Sonny. So calm and smart. Nice video. #Sonny in a Sunny video

  • @kirillbaryba746
    @kirillbaryba7462 жыл бұрын

    Nice! Would add i18n!

  • @nabeelahmed8179
    @nabeelahmed81792 жыл бұрын

    Awesome video. I have a question: getServerSideProps just returns undefined, no matter what I do. Any help?

  • @christopherfinn8202
    @christopherfinn82022 жыл бұрын

    Can you do a breakdown of your streaming setup? The quality is so good! What camera are you using?

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Sure thing!

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Sony A7S III

  • @christopherfinn8202

    @christopherfinn8202

    2 жыл бұрын

    @@SonnySangha Thanks!

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

    what is the extension you use to suggest code ??

  • @npf21
    @npf212 жыл бұрын

    bit of a long shot but any chance you''ll be doing backend like Prisma ORM, Nexus SDL, Apollo Client/Server, graphql codegen and material UI in typescript? oh boi that's a mouthful even thinking of it for me atm. Cheers for your quick vids keep it up

  • @JohanDG7
    @JohanDG72 жыл бұрын

    Nice! Can you use and empty getServerSideProps, I mean one that doesn't return anything, just to get the SEO benefits on a static page? Will it still be SSR? I hope you understand my question haha :)

  • @cephaschapa9581
    @cephaschapa95812 жыл бұрын

    Sooooooonny my man. 💥💥💥💥💥 How's it.

  • @srf4257
    @srf42572 жыл бұрын

    Yesss!!

  • @podSnippets_10
    @podSnippets_102 жыл бұрын

    can i use getServerSideProps with my internal api, i mean i have an API who is runnin on localhost 500, can i fetch it using getServerSideProps

  • @souptiknath4668
    @souptiknath46682 жыл бұрын

    If we want to load data in chunks then how does SSR works in that case?

  • @josinjojy4268
    @josinjojy42682 жыл бұрын

    Please do a video on CSR of React.js vs CSR of next.js

  • @mansoorabdullah
    @mansoorabdullah2 жыл бұрын

    Which mic model are u using, the voice is very much clear without single noise

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Shure SM7B (something like that lol)

  • @user-xz8bp5eb4d
    @user-xz8bp5eb4d6 ай бұрын

    clean

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

    How did you put SetTimeout() without typing it? At 6:12 Can anyone explain that to me?

  • @kiyoshitanaka4023
    @kiyoshitanaka40232 жыл бұрын

    Regarding React 18, which is just about to come out. Can you please make a tutorial about SSR Streaming with Next.js?

  • @alialavizadeh2775
    @alialavizadeh27752 жыл бұрын

    can u do some video for app that built on react and interacting it with ssr

  • @omarhassan2548
    @omarhassan25482 жыл бұрын

    Thanks Papa React

  • @mansoorabdullah
    @mansoorabdullah2 жыл бұрын

    Hi Sonny, please create a video on, how to create a SEO friendly app with Nextjs

  • @kulvirsingh4568
    @kulvirsingh45682 жыл бұрын

    U have great skills Dude 😎😎. I am currently building Facebook clone but when I am using next js image for session.user.image, it is giving me error. But if I use normal img tag it is working fine Can u suggest something 🙏🙏

  • @projektblue108
    @projektblue1082 жыл бұрын

    can you learn detail of respose and request and https?