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

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

[@enkindel]

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

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

[@boysisig8260]

Clear and concise explanation. Thank you Lee.

[@dzagIT]

Short, clear and nice explanation.

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

[@efkang.9116]

Amazing work Lee !

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

[@shahzadaalihassan_raw]

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

[@ruchiarwal5614]

Love you Lee! you are super helpful and time saving.

[@prashantjoshi5763]

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

[@victordeoliveira344]

Amazing explanation!

[@user-qf2ed1wj3u]

Great explanation! Thanks a lot

[@Chris-gz4ie]

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

[@nietocurcio]

Thank you, very good explanation

[@kaisbenrhouma]

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

[@user-bq4xc2yy3m]

this was very helpful thank you

[@kylemckell]

I love Lee!

[@shivamsrivastava2645]

very easily differentiating concept. Thanks

[@mohansaiteki8012]

You made me to understand of Next JS

[@damislav]

Really good talk next is amazing 👍

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

[@thequang9234]

extremely well done

[@user-mq1zn1cn1j]

Thanks Bro , Awesome 🔥

[@avneet12284]

So good

[@iamdeveloper2580]

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

[@armena2866]

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

[@Mo.Faried]

Awesome

[@mohammadraufzahed]

nice man.

[@lionardo]

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

[@waqasrana5734]

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

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

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

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

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

[@MrPlaiedes]

Are there plans to support material ui makestyles?

[@nouribenz]

I'm in love with..

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

[@lushanjayanath3834]

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

[@vzlomer1000]

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

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

[@moosegoose1282]

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

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

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

[@Ihavetoreturnsomevideotapes]

Yeah

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

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

[@lukaakhalbedashvili7167]

something like vercel

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

[@musadulislam3128]

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

[@spectredox]

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

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