Тёмный

Client-Side VS Server-Side Rendering - Data Fetching with Next.js 

freeCodeCamp Talks
Подписаться 64 тыс.
Просмотров 183 тыс.
50% 1

Next.js is a hybrid React framework allowing you to choose your data fetching strategy on a per-page basis. In this talk, you’ll learn more about CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static-Site Generation), ISR (Incremental Static Regeneration), and when to use each one. I’ll also give a quick introduction to Next.js and share some of the main features of the framework.
Presenter: Lee Robinson

Опубликовано:

 

3 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 71   
@DodaGarcia
@DodaGarcia 3 года назад
He’s so fun to watch, I wish he’d taught a whole course
@amagiddmxh11
@amagiddmxh11 3 года назад
He has, check leerob.io
@DodaGarcia
@DodaGarcia 3 года назад
@@amagiddmxh11 sweet, thank you!!
@vasiovasio
@vasiovasio 2 года назад
@@amagiddmxh11 thank you!
@cmja09
@cmja09 2 года назад
If you wanna watch more, he's in Transformers
@shahzadaalihassan_raw
@shahzadaalihassan_raw 2 года назад
He does have a full course
@chiragparyani462
@chiragparyani462 2 года назад
I have been reading, watching concepts around server side rendering from quite some time now, almost everywhere there's theoretical explanations. This explanation is spot on i.e, Theory + Code. For developers Theory is ok but the curiosity of how to write code for it / what is it really doing under the hood is what gives them sleepless nights. I'll sleep well because of this video! Superb stuff!
@thedigitalceo
@thedigitalceo 2 года назад
I love NextJS so much. Such a wonderful framework to use for React. This presentation really demonstrates it as well. Great job!
@yashkhd1100
@yashkhd1100 2 года назад
This was most clear explanation for the topic. Wish this guy has lot more to share..!!
@boysisig8260
@boysisig8260 Год назад
Clear and concise explanation. Thank you Lee.
@Chris-gz4ie
@Chris-gz4ie Год назад
I was so confused but this guy just summed it up thanks so much
@iliatalebzade8751
@iliatalebzade8751 2 года назад
Cheers, Lee! I've watched more than 10 videos that explain the concepts of data fetching and rendering with Next.js and none of them were as deep and yet simple as your explanation! keep up the great work 🍻🍻
@enkindel
@enkindel 3 года назад
Awesome explanation. Very succinct and helpful not like those other tutorials.
@codewsohan
@codewsohan 2 года назад
This video is the best out there to understand the basics of NextJS and to have a good idea about it before learning it, thank you so much!! keep up the good work
@dzagIT
@dzagIT 2 года назад
Short, clear and nice explanation.
@prashantjoshi5763
@prashantjoshi5763 3 года назад
Really liked the pace at which you explained man. amazing 👏
@andresvalenzuela
@andresvalenzuela 3 года назад
Great explanation. I've seen a number of videos about Next and this is the first that mentons revalidate, very useful to replace getServerSideProps in some cases.
@shahzadaalihassan_raw
@shahzadaalihassan_raw 2 года назад
It's so fun to watch lee. Love the work!
@shivamsrivastava2645
@shivamsrivastava2645 Год назад
very easily differentiating concept. Thanks
@mohansaiteki8012
@mohansaiteki8012 3 года назад
You made me to understand of Next JS
@kaisbenrhouma
@kaisbenrhouma 2 года назад
Make a full course man, it's really clear and well done ++
@efkang.9116
@efkang.9116 3 года назад
Amazing work Lee !
@user-qf2ed1wj3u
@user-qf2ed1wj3u 3 года назад
Great explanation! Thanks a lot
@victordeoliveira344
@victordeoliveira344 3 года назад
Amazing explanation!
@kylemckell
@kylemckell 3 года назад
I love Lee!
@thequang9234
@thequang9234 Год назад
extremely well done
@damislav
@damislav 3 года назад
Really good talk next is amazing 👍
@nietocurcio
@nietocurcio 3 года назад
Thank you, very good explanation
@user-bq4xc2yy3m
@user-bq4xc2yy3m 3 года назад
this was very helpful thank you
@albirtarsha5370
@albirtarsha5370 3 года назад
Excellent presentation. I recently watched videos about react-query. I am curious now about if they could work together or if in situations where the client needs frequent updates that react-query may be superior.
@armena2866
@armena2866 2 года назад
Hey it would be great if you could touch more on the use cases of each rendering method
@Ehsan-d7g
@Ehsan-d7g 2 года назад
Thanks Bro , Awesome 🔥
@AshtonMotana
@AshtonMotana Год назад
The arguments I've come across so far for server side rendering, don't compel me to go that route. Among a couple things, I'm using a dashboardUXc8btroller fir handling class changes so that I can animate the UI which I don't think would work on SSR as the js file needs to run on the client.
@iamdeveloper2580
@iamdeveloper2580 3 года назад
Lee what about dynamic routes with ISG? i mean posts/[id]
@avneet12284
@avneet12284 3 года назад
So good
@mohammadraufzahed
@mohammadraufzahed 2 года назад
nice man.
@Mo.Faried
@Mo.Faried 2 года назад
Awesome
@muhammadyusoffjamaluddin
@muhammadyusoffjamaluddin 2 года назад
8:39 I'm not sure why he click on the "refresh" button when he just explaining the refresh thing (cache validation etc.). Why press the refresh button when the page should validate itself? Can someone explain what is he explaning actually about?
@firstignitor
@firstignitor 2 года назад
Lee Robinson .. I have a simple question for you. How old are you, and how long didn't take you to grasp all that technology stack in your head?
@lionardo
@lionardo 2 года назад
this was very helpfull to me. So CSR is over useEffect() and SSR is with getServerSideProps() correct?
@jamalxd5647
@jamalxd5647 Год назад
Why i can't use DOM selector, useState, and more in nextJS? i'm new anyway.. thanks for everyone who can answer my question simply👍🥰
@nouribenz
@nouribenz 2 года назад
I'm in love with..
@emonymph6911
@emonymph6911 2 года назад
What are the cost differences between CSR SSR SSG!? Is client side rendering cheaper for your AWS to run? What if you use your own PostgreSQL database is it still cheaper? And by how much!?
@Shawn-Mosher
@Shawn-Mosher 3 года назад
How would you go about shared data, say you’re pulling data from a graphql and need the data fetched in a header and footer layout on all pages? How would you go about that without query each page and avoiding prop drilling? That would be a cool video to see and understand
@AdvancedNoob40
@AdvancedNoob40 3 года назад
I am not sure but you can use swr for it.
@rl6382
@rl6382 Год назад
Contextually wrap all the components you want to pass those props to, then just set props on the target component then set a variable to equal that, then use that variable or directly deconstruct from the functions argument field
@showbikshowmma3520
@showbikshowmma3520 2 года назад
can next js (server side render) manages the routing dynamically without refreshing the page every time a user requests a different route?? plz ans this
@moosegoose1282
@moosegoose1282 3 года назад
seems like ssr is better in all cases for google indexing no?
@kirillpavlovskii8342
@kirillpavlovskii8342 2 года назад
Does next js use express under the hood to rebuild the new page if you use ISR? How does the ISR work under the hood I don't understand how it can understand how to build a new page ,I thought after build you just ship your static files to hosting server and that's it.
@TokyoXtreme
@TokyoXtreme 3 года назад
solutions architect
@fulstak
@fulstak 3 года назад
@Kimbra Bedient why do you want to do that? It is like you are a thief and stealing from your close ones, right? And you're boasting about it. Be honorable human being and honor others right for privacy.
@kyrierevival3658
@kyrierevival3658 3 года назад
@@fulstak thats a scam.
@kyrierevival3658
@kyrierevival3658 3 года назад
@Frederick Justin thats a scam
@waqasrana5734
@waqasrana5734 3 года назад
all my work between suspense tag is not showing in page source(cntrl + U )
@bhuvaneshdesai3053
@bhuvaneshdesai3053 3 года назад
Hi, i already have a react app, i want to make a particular route in react app as separate next.js app for SEO. please can you tell me how to do or where to start from
@MrPlaiedes
@MrPlaiedes 2 года назад
Are there plans to support material ui makestyles?
@vzlomer1000
@vzlomer1000 3 года назад
Help, how to make a root store and substores using mobX in next js
@lushanjayanath3834
@lushanjayanath3834 3 года назад
can we use next.js with asp.net core api (azure)
@musadulislam3128
@musadulislam3128 Год назад
Please focus on the discussion topic. This could save time.
@lukaakhalbedashvili7167
@lukaakhalbedashvili7167 3 года назад
something like vercel
@benwyse
@benwyse 2 года назад
I took many tutorials on Next. The idea of having React SSR was exciting. But the page route was quickly a disappointment from beginning. and reason why I decided not use Next for any project and even waste my time on it. Page routing is a disaster that PHP tried to fix using some MVC patterns coupled with various server settings. I don't see why Next thought this was a good way to go. I am glad to learn that there is another option. I will check that out. But there so many great options, for me bother with Next's poor choice. Page routing is simply bad programming, and no framework should allow it, let alone enforce it as Next does.
@RikzB
@RikzB 2 года назад
why page routing is a disaster?
@okidokiyowyow356
@okidokiyowyow356 3 года назад
Im beginner at react. Is it good to learn nextjs? In react everytime I fetch it takes me 3-6secs before i see the data.
@ahmadalfan9022
@ahmadalfan9022 3 года назад
Is that a really big sized data to load? I think understanding the React completely first would be better before jumping into Next.js. Just to make sure you're not confuse about different file structures. Next is simpler especially for the routing, not only that, you'll also get more features than regular React. You need to understand React to understand the benefit of Next features. That's my experience, it might be different with someone else.
@mohammedsaad0761
@mohammedsaad0761 3 года назад
@@ahmadalfan9022 Nicely Explained ❤️
@spectredox
@spectredox 2 года назад
What can't you do with Webpack that NextJS has?
@tharakadoo
@tharakadoo 2 года назад
cute guy 😜
@chesshooligan1282
@chesshooligan1282 9 месяцев назад
"Solutions Architect" sounds like a bullshit job title.
@Ihavetoreturnsomevideotapes
@Ihavetoreturnsomevideotapes 2 года назад
Yeah
Далее
Do you REALLY need SSR?
18:15
Просмотров 172 тыс.
The Story of Next.js
12:13
Просмотров 580 тыс.
Women’s Free Kicks + Men’s 😳🚀
00:20
Просмотров 2,5 млн
TRENDNI BOMBASI💣🔥 LADA
00:28
Просмотров 680 тыс.
iPhone 16 & beats 📦
00:30
Просмотров 157 тыс.
Modern Data Fetching in React (Complete Guide)
16:41
Просмотров 51 тыс.
Fetching Data Doesn't Get Better Than This
6:58
Просмотров 121 тыс.
Next.js App Router: Routing, Data Fetching, Caching
14:32
NextJS 12.1 SSR & SSG: Everything you need to know
31:18
WTF Do These Even Mean
13:44
Просмотров 88 тыс.
10 Rendering Patterns for Web Apps
6:55
Просмотров 336 тыс.
Women’s Free Kicks + Men’s 😳🚀
00:20
Просмотров 2,5 млн