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

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

[@DodaGarcia]

He’s so fun to watch, I wish he’d taught a whole course

[@amagiddmxh11]

He has, check leerob.io

[@DodaGarcia]

@@amagiddmxh11 sweet, thank you!!

[@vasiovasio]

@@amagiddmxh11 thank you!

[@cmja09]

If you wanna watch more, he's in Transformers

[@shahzadaalihassan_raw]

He does have a full course

[@chiragparyani462]

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]

I love NextJS so much. Such a wonderful framework to use for React. This presentation really demonstrates it as well. Great job!

[@iliatalebzade8751]

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

[@yashkhd1100]

This was most clear explanation for the topic. Wish this guy has lot more to share..!!

[@andresvalenzuela]

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.

[@codewsohan]

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

[@enkindel]

Awesome explanation. Very succinct and helpful not like those other tutorials.

[@boysisig8260]

Clear and concise explanation. Thank you Lee.

[@Chris-gz4ie]

I was so confused but this guy just summed it up thanks so much

[@prashantjoshi5763]

Really liked the pace at which you explained man. amazing 👏

[@shahzadaalihassan_raw]

It's so fun to watch lee. Love the work!

[@dzagIT]

Short, clear and nice explanation.

[@kaisbenrhouma]

Make a full course man, it's really clear and well done ++

[@mohansaiteki8012]

You made me to understand of Next JS

[@shivamsrivastava2645]

very easily differentiating concept. Thanks

[@albirtarsha5370]

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.

[@efkang.9116]

Amazing work Lee !

[@kylemckell]

I love Lee!

[@victordeoliveira344]

Amazing explanation!

[@user-qf2ed1wj3u]

Great explanation! Thanks a lot

[@armena2866]

Hey it would be great if you could touch more on the use cases of each rendering method

[@iamdeveloper2580]

Lee what about dynamic routes with ISG? i mean posts/[id]

[@damislav]

Really good talk next is amazing 👍

[@thequang9234]

extremely well done

[@nietocurcio]

Thank you, very good explanation

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

[@muhammadyusoffjamaluddin]

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?

[@user-bq4xc2yy3m]

this was very helpful thank you

[@lionardo]

this was very helpfull to me. So CSR is over useEffect() and SSR is with getServerSideProps() correct?

[@kirillpavlovskii8342]

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.

[@showbikshowmma3520]

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

[@Ehsan-d7g]

Thanks Bro , Awesome 🔥

[@emonymph6911]

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

[@MrPlaiedes]

Are there plans to support material ui makestyles?

[@avneet12284]

So good

[@bhuvaneshdesai3053]

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

[@firstignitor]

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?

[@moosegoose1282]

seems like ssr is better in all cases for google indexing no?

[@waqasrana5734]

all my work between suspense tag is not showing in page source(cntrl + U )

[@Shawn-Mosher]

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]

I am not sure but you can use swr for it.

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

[@vzlomer1000]

Help, how to make a root store and substores using mobX in next js

[@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👍🥰

[@lushanjayanath3834]

can we use next.js with asp.net core api (azure)

[@Mo.Faried]

Awesome

[@mohammadraufzahed]

nice man.

[@okidokiyowyow356]

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]

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]

@@ahmadalfan9022 Nicely Explained ❤️

[@nouribenz]

I'm in love with..

[@musadulislam3128]

Please focus on the discussion topic. This could save time.

[@TokyoXtreme]

ｓｏｌｕｔｉｏｎｓ ａｒｃｈｉｔｅｃｔ

[@fulstak]

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

@@fulstak thats a scam.

[@kyrierevival3658]

@Frederick Justin thats a scam

[@Ihavetoreturnsomevideotapes]

Yeah

[@spectredox]

What can't you do with Webpack that NextJS has?

[@lukaakhalbedashvili7167]

something like vercel

[@benwyse]

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]

why page routing is a disaster?

[@tharakadoo]

cute guy 😜

[@chesshooligan1282]

"Solutions Architect" sounds like a bullshit job title.