🤯 The key insight here is that when you’re thinking in Next.js, you need to focus on server components and understand the paradigm of client components. By prioritizing server components and minimizing client components, you can improve interactivity, handle multiple layouts, and seamlessly intercept routes. Additionally, you need to consider caching and revalidation for a better Next.js development experience. #nextjs 🚀
[Music] hello welcome to Nexus playlist hope enjoying series today not going talk any any Hands-On rather we want focus important from nextjs which is about thinking nexj why why need it so with my experience in working days and reviewing a of code over the time I realized is are kind of developers need who need this video needs go through into end one you a developer get started nexj and back of mind believe that know react in and and you are to find really like a cream super easy and you are going to it probably of that a myth and why it is myth going to talk about this second you a react got started with you are finding it little difficult to get things going you are getting review comments which you really not and taking care factoring your is a while for you really finding it overwhelming because you are hearing netive jugun and building next days is hard especially with the app rout or things are really really messy and we are not able proceed with it so if you are of this video is for you so you going through it learn something from it if please give a like please subscribe to the because once you do I really feel to teach you much much better all right we are going learn with a story start one though everything that are going video are if it if you disagree it’s fine too story is about developer who a code to a code reviewer the code Reviewer is reviewing the code and is written in now in many cases it might happen code is really great and Nex days that is supposed to follow and NEX days is a framework provides a of and the are really of I hope that’s and that’s we should be doing stuff but let’s hypothetic think about as part of our that react submitted a code and once code reviewer seeing code opening guess what he or is just code wow for files eight files we see use client and in all files we use State use effect use reducer like hooks on hang what’s problem isn’t based NEX framework so are really really free to all things from and in react we are so in using US state use reducer use at least now we in future what’s to happen things going change till now are using them quite quite then the problem with why I use it problem one of the prominent problem understanding what client wants our client is nitty picky about search engine if this client Hooks doing things on client side you going to good SEO what you think so if you go to a reactjs application and if application running it’s perfectly fine click your browser and go ahead and see view Source what do you see well he will probably see things like this if you structure it well and focus in the area that is there your see a div route and an and your enter as a page application actually and that and this data fing all this HTML creation all script everything takes in the client if the case how are going achieve we’re going talk about it understand how react works and client side rendering model so your client side rendering react way what a to server start sending you as a response have that particular which going to show you the end output each these markers that you see over is kind of your loading like server response your UI is okay so has come browser starts the script again loading you have the script you you have the HTML structure you now react is to sprinkle magic on of it going to do this hydration and and finally have a fully interactive it’s high level view how side rendering is in a react application we have this for years of course there nothing with that the load might be slow once loaded it’s a page it be very very top of that we can use many other libraries to things like routing and the aspects problem with that now that’s CSR now that load matters to I really cannot my users and the to wait for it can always for Server site rendering so you get the initial quite though you don’t have this JavaScript all these but your initial page as a server render it is getting loaded quite faster your is not really facing the delay they were before with the and with the initial page coming up you are also downloading the scripts and is putting its magic and you have a fully interactive if it with the previous version you had many waiting and a fully interactive UI with CSR SSR you are getting the so is where probably doing this become fully interactive you to go for fetching you still make a network call and with network call don’t have any guarantee like the response is coming back incur the problems we have like the network waterfall issue one request is really for the previous request response and things like that you issue with web so things the when Nexes came into picture as a framework us things pre-rendering the static generation everything with app router we got special we introduced to term called server components thing though server components is part of is of next CH that’s something we need to understand it is days thing it react thing and in future a alone as a developer or not any other Frameworks react alone we are going feel we are realize the of react server components much but today today in the react the ecosystem people not components much it is when they’re stepping days they’re about react server component even next day’s talk about it that’s when they start and if they are skipping of server components and the understanding of it they are the the code that code reviewer seeing the beginning with full of use clients why I want dots first thing in thinking next days is what react server component all about about collocating your react your data store from side the of call the call make the and make our side components fully of with the problems that we have with network water fall the bad ux and things so getting with Nexus one to realize is that by all components in Nexes are server site so it means you have to bring in thought process in your mind when you are with NEX that I to maintain this Paradigm of components as much as and will be some occasions I have to in components what are those by the way the occasion when you need user interactivity for example a page that is lot of and at of it a button or a checkbox where you your user to maybe click on it check checkbox and certain to happen now a server cannot events components and there is is event are the client it’s the browser so it for any interactivity and the events to it has to happen on the client side component where you have to this mind map server you will fing that data will be components aware because your server components collocated data store they are to the data store so it those expensive Network everything you reduce your component is with data and you want some interactivity is the interactivity part you to bring the client that you be this use directory that is where you be using certain react hooks perfectly fine but use effect in a component to fetch data and forcefully make server component client component you are then abusing nexj you are not using nij as a framework that’s lesson number one that want to give you guys terms of thinking in server components really well because it’s powerful concept and understand the Paradigm of how client component can be used server component how can you pass server component a props to a client component and how they interact with other design concept pretty important as a who is just starting reactjs or getting the of not what exactly happening all then how about thinking in many we have spent in in react now I talking thinking in days so one thing thinking in never going thinking in in of breaking monolith doing component building the of component to do one very well remains same even client component these hooks the state in the client component managing event in everything remains along with that the thing that what you are going learn you’re is the of server components by the way you’re looking for an in-depth understanding of components already have video can that I hope that it solves lot of problem for you let’s talk another problem that I see in code and doing the review say the left is a homepage and header left side there is sidebar and there are are in orange you something you do something you the next page in page no header there’s only and then the components are aligned to header part we to things like use router want to get the of router after that see like what path I’m in am I home or I’m in the shopping cart path that I’m going to remove that header from get a used router have to it a that is provide and for that ins some cases you to make as client component because you have to use a your component and if you want use hook in your you to make that a but the philosophy just now spoke about to component as a server component much as possible whenever you need the bring client here you’re another page interactivity with the of nextjs itself that you have to your component component server component is that is no other interactivity then do have to make one a component now what can better of multiple layouts and with multiple root you solve this problem pretty documentation talk about that I made a on go ahead and it out that how handle multiple root so that you can any pages in every corner of application seamlessly so don’t client components wherever you don’t need do you use models in application you models a or a just comes up right on something but does the url it doesn’t url but see nowadays your are looking models it means you click on and particular model there will be a specific and if someone is copying that route with someone or bookmarking you can get the state which is almost to the view that you seeing inside the model you want to example me you on screen we are seeing an app called photoed this app is not complete I’m just building it the next I to where want to talk route intercepting so what is in this case like each of this images a thumbnail if I click on of this image it is going to pull a with few more information is like taken picture in a model but the part that I am interested to show you is the moment I this take the like what’s you URL is changing but usually case of model the is changing but this is having an added but first this on this with legs you that so there is a that’s up still some is but you see URL it got changed let’s do 3,000 it see the to/ photos103 so it means you are actually a this model State now what if you just this one and share it someone what exactly do you expect will be going to a route to show similar kind of not be model but an independent page so your user your end user is never ever to out of what exactly you wanted show a so it is the way that you are actually a sharable model something this I’m particular in another I see same image right so it means a route this particular image and information is available as model on the same route when you are in the state of the application you have same now think about doing in it’s really but you achieve and to achieve you have write a lot of code nextjs can do it simply few of code at same customers are for which you have know that there are certain ways model you got to do that got ad that if just hook onto it going release in few days so you can learn like how to do achieve kind of stuff yeah forget to subscribe so don’t lose on the notifications once comes oh let’s talk caching nextjs like by default cached means that if you response similar kind of you will be getting the similar kind of response is are you going to revalidate that cash the invalidate was the right way data think about that have a list of items create a to-do and you want to refresh your list of to-dos immediately your toos are being fetched from fetch from server that call is cached so where you going make this happen to on your s some kind of router. refresh or are you the cash somewhere that your get revalidate and get latest data what your these are you to in this the thought is going to make you much much better next days developer and much much better person to nexj as so this is another where have not thinking next and that’s what wanted to out that need to next there are few other places for sure fonts handling for handling accessibility area all these cases externalization the localization piece it authentication so in all these places you have to into nexj framework so call out is very simple use the like a not all that we discussed so far can consider that tip of the iceberg are more to it have discussed things a I spoke about just to make realize that when you are a framework have to really time understanding what that framework gives you the the framework to think terms that framework code reactjs is very popular a of developers and of there are lot of folks probably towards next year but everyone is thinking a way that how they should be thinking with year for this is to trigger in you so you can start thinking from those perspective that discussed this video so it was useful I request you please comment it was to you or anything that you to bring for discussion you can definitely this and don’t forget to because once do it feels really for support we’ll be back again with another next video very take
EN_GB