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

Рет қаралды 96,180

Күн бұрын

🚨 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

Пікірлер: 146

@SonnySangha Жыл бұрын

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

@RafaelUlloa85 2 жыл бұрын

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.

@robertotieno7414 2 жыл бұрын

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

@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.

@dart_ariz604 2 жыл бұрын

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

@haochen816 2 жыл бұрын

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

@yoJuicy 2 жыл бұрын

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. ;)

@correctcode367 2 жыл бұрын

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

@raiyanthedeveloper 2 жыл бұрын

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

@Furki4_4 11 ай бұрын

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

@oladipupoakorede 2 жыл бұрын

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

@xcrxwadda8287 2 жыл бұрын

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

@Mikewendwosen 4 ай бұрын

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

@mohammadabujaradeh6993 2 жыл бұрын

Great and clear explanation . As always, Best content

@Devaitechs 2 жыл бұрын

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

@jamespoda5621 2 жыл бұрын

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

@ICy42 2 жыл бұрын

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

@quietstorm6896 Жыл бұрын

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

@navinkodam412 2 жыл бұрын

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

@danishansari5746 2 жыл бұрын

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

@rohitkf8474 2 жыл бұрын

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 :)

@shanmugavadivelug7236 27 күн бұрын

Well explained. Thanks mate

@arunsunny734 2 жыл бұрын

This was very helpful. Thanks a lot

@yoursyasuo5868 2 жыл бұрын

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 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

@shahmirfaisal8162 2 жыл бұрын

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

@gabrielvrldev 10 ай бұрын

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?

@junior2441 2 жыл бұрын

Thanks Sonny! Shot out from brazil!

@michelgerges2678 2 жыл бұрын

I love the explanation 🔥🚀

@ItzMeHaRiSuDHan 11 ай бұрын

crisp and clear thanks a lot

@SonnySangha 11 ай бұрын

You're welcome!

@madhousenetwork7765 2 жыл бұрын

Can't thank you enough. Subscribed!

@donewithwork 9 ай бұрын

Great video!

@MilindaAbeykoon 2 жыл бұрын

great explanation! 👌🔥

@kimokimo-se3ur 2 жыл бұрын

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

@chrisdietrich1533 Жыл бұрын

great explanation!

@arnav_0397 2 жыл бұрын

You're awesome Sonny 🤟

@joshuachris1419 2 жыл бұрын

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

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

Awesome explanation

@jacerchetoui709 Жыл бұрын

Thank You So Much !

@PraveenKumar-ft2kr 2 жыл бұрын

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

@marimuthur9456 2 жыл бұрын

Nice explanation 👌🏼👌🏼👌🏼

@awaisraza2285 2 жыл бұрын

you are doing awesome sonny

@bencarter8108 2 жыл бұрын

Awesome video Sonny! Very clear explanation for the beginners!

@devbyishtiaq Жыл бұрын

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

@umairahmed9827 Жыл бұрын

Best Explanation.

@Kagura12118 2 жыл бұрын

thanks Sonny for telling me how👍

@vishaltp6083 2 жыл бұрын

Nice explanation brodha...

@RakKhoshGaming 2 жыл бұрын

I like this small and informative videos

@sanjarerkinov1865 2 жыл бұрын

Awesome! 🤩🤩🤩

@shishiragrahari6412 2 жыл бұрын

This was needed

@azula9714 2 жыл бұрын

Thank you!!!

@evergreen7781 2 жыл бұрын

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

@skverskk 2 жыл бұрын

Well done.

@user-kd2rx5lg2n 4 ай бұрын

Very cleear ,, huge thanks

@zambianyoutuberx 2 жыл бұрын

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?

@malikkurosaki Жыл бұрын

clear , thank

@barscandogan3772 Жыл бұрын

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

@belkocik 2 жыл бұрын

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

@avisterdeveloper1120 2 жыл бұрын

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

@chatorebulletye869 2 жыл бұрын

Roll the intro 🔥👍🏻

@viditchawda4268 Жыл бұрын

Best explaination

@yuvrajsoneja1789 Жыл бұрын

Thanks!

@Amarwaha31 2 жыл бұрын

Papa React... The Best

@alabhyajindal 2 жыл бұрын

Let's go papa fam

@syedhassanraza6605 11 ай бұрын

this make ssr very easy to understand

@syedmunawwarali5999 2 жыл бұрын

Love and support from India

@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.

@Baraka0369 2 жыл бұрын

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 ?

@flippy88ify 11 күн бұрын

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

@alipasha7275 2 жыл бұрын

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

@ajaysatish8720 2 жыл бұрын

What is the extension ur using for auto complete?

@jesseneon1896 2 жыл бұрын

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

@nabeelahmed8179 2 жыл бұрын

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

@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.

@craigronald 11 ай бұрын

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

@waleedsharif618 2 жыл бұрын

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

@alijawwad1763 2 жыл бұрын

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

@jhonbrixbrion8030 6 ай бұрын

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

@npf21 2 жыл бұрын

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

@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()?

@JohanDG7 2 жыл бұрын

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 :)

@solomonakinbiyi 2 жыл бұрын

Thanks sunny

@cephaschapa9581 2 жыл бұрын

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

@super_kenil7941 Жыл бұрын

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

@kirillbaryba746 2 жыл бұрын

Nice! Would add i18n!

@josinjojy4268 2 жыл бұрын

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

@atovan3236 Жыл бұрын

what is the extension you use to suggest code ??

@podSnippets_10 2 жыл бұрын

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

@alialavizadeh2775 2 жыл бұрын

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

@mindset.magician2 2 жыл бұрын

can you make a full tutorial on nextjs next-auth SSR and firebase. and please show us how to store session data with next-auth firebase adapter. If you can do that it will be so appreciated

@kulvirsingh4568 2 жыл бұрын

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 🙏🙏