Client-Side VS Server-Side Rendering - Data Fetching with Next.js
HTML-код
- Опубликовано: 14 янв 2021
- 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
I love NextJS so much. Such a wonderful framework to use for React. This presentation really demonstrates it as well. Great job!
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 🍻🍻
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!
This was most clear explanation for the topic. Wish this guy has lot more to share..!!
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
Awesome explanation. Very succinct and helpful not like those other tutorials.
He’s so fun to watch, I wish he’d taught a whole course
He has, check leerob.io
@@amagiddmxh11 sweet, thank you!!
@@amagiddmxh11 thank you!
If you wanna watch more, he's in Transformers
He does have a full course
Clear and concise explanation. Thank you Lee.
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.
Short, clear and nice explanation.
It's so fun to watch lee. Love the work!
Amazing work Lee !
Really liked the pace at which you explained man. amazing 👏
I was so confused but this guy just summed it up thanks so much
Love you Lee! you are super helpful and time saving.
Amazing explanation!
Make a full course man, it's really clear and well done ++
Great explanation! Thanks a lot
I love Lee!
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.
You made me to understand of Next JS
very easily differentiating concept. Thanks
Thank you, very good explanation
Really good talk next is amazing 👍
extremely well done
this was very helpful thank you
Lee what about dynamic routes with ISG? i mean posts/[id]
Thanks Bro , Awesome 🔥
So good
Hey it would be great if you could touch more on the use cases of each rendering method
this was very helpfull to me.
So CSR is over useEffect() and SSR is with getServerSideProps() correct?
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.
all my work between suspense tag is not showing in page source(cntrl + U )
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
nice man.
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!?
Awesome
Are there plans to support material ui makestyles?
Help, how to make a root store and substores using mobX in next js
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
can we use next.js with asp.net core api (azure)
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.
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
I am not sure but you can use swr for it.
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
seems like ssr is better in all cases for google indexing no?
I'm in love with..
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?
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?
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👍🥰
Yeah
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.
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.
@@ahmadalfan9022 Nicely Explained ❤️
something like vercel
What can't you do with Webpack that NextJS has?
ｓｏｌｕｔｉｏｎｓ
ａｒｃｈｉｔｅｃｔ
@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.
@@fulstak thats a scam.
@Frederick Justin thats a scam
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.
why page routing is a disaster?
cute guy 😜
Please focus on the discussion topic. This could save time.
"Solutions Architect" sounds like a bullshit job title.