Moral of the story, if you can't use client side things directly inside the server components then make a separate component for them and just render them into the server side components and pass the data as the props whatever you want. Tysm for such a valuable info. Luckily I'm working on a huge Real Estate Project in Next JS and it would be really helpful.
With pages directory you can still write client side applications that are just publishable as a static app, but with the added benefits of file based routing, bundle splitting, preconfigured env, dehydrated html files for each page.
Exactly. Forget about PC even mobile devices have like 8 GB ram minimum nowadays, so apart from benfitting SEO I don't get why you'd use server side rendering especially considering that nowadays people are using Cloud like AWS which has pay-per-use method where doing things on server side will cost you more when there is a perfectly feesible client machine available. Also that SEO thing only works for marketing/portfolio sites. you don't do SEO for rest of the project like portals which requires login anyways. And I also don't get why'd you overkill/over-engineer by creating a marketing/portolio type of static/semi-static site with react/next in the first place when there are tons of better and easier options available.
I hate how people constantly dismiss arguments with arrogant or sarcastic comments (many times they don't even know what they're talking about). Some of the comments you replied to reminded me why I don't like following developers on Twitter or other social platforms. Great video, thanks for the explanation and looking forward to the new course!
It is a complex topic, because in a case which there are millions of requests, it is gonna reduce the performance of the server. So, even in client mode, we can use the browser and client memory and cpu, and the internet actually is so fast, we can download the whole bundle so fast, but I still think nextjs and the balance between client and server components are the key.
Yes, that's why it has both client and server components. We can use server components to load the ui (non-interactive) faster and use client components to add the interactivity. Here the result is html and js bundle (although there is so much for example react server component payload but we can understand it in this way). The html will be used to create the ui and js will add the interactivity. Since the javascript bundle is smaller than the old react it will take less time to make the page interactive.
I am actually working on a project wich will include 2 forms and I have developed one of them until now using client side rendering but as soon as I open my laptop and the code , I will change my code's structure to be using server side rendering. Really beneficial video.
I've used Remix for a project before and what this guy says is very much true. SSR practically eliminates the need for client side hooks like useState, useEffect, useContext, useReducer etc. Why would you manipulate data with state when you can just send any data you get to server for validation/storage? Likewise with fetching data, Remix doesn't even use useEffect for that. These full stack React frameworks have transformed the way to render data with components.
Well these hooks allow/simplify ui to be updated and performing complex and interactive ui based on events and user inputs . if I have to make round trip to server for each ui update what's the point of react , I can do the same with classic html and css and little js and write all logic at server right ? Am I missing something?
@@thorw2136 in my experience, for such cases the hook that I would use at the most would be useState, that's all. I wouldn't use any other state management more complex than useState. Use useState to conditionally render UIs, show warning text etc. For anything else that involves data validation, that's the responsibility of the backend, the raison d'etre of Next js and Remix.
The part that "SSR practically eliminates the need for client side hooks like useState, useEffect, useContext, useReducer etc" is misleading and false... to make your UI reactive, which is why React was built you need to handle events in a dynamic way. without useState, useEffect etc how can you manage to that? Also you must remember that without useState you will not be able to dynamically rerender the UI which means you will no longer have a Single Page Application but just a normal web application that visit the server for each and every request which is BASICALLY what SPA frontend solutions like React, Angular and Vue are solving above everything else. So that statement is misleading
This video is exactly what I've been thinking to myself for the last 5 months, and i can't understand how there are people who think nextjs is useless, how send less js to client is useless ? thaks for this video!
Probably one of the few, if not the only video, that really addresses this issue. I have seen tons of videos making their uppermost component a client component, basically making the whole application a client side application, which is not really what we're aiming for with the new App Router. If anyone has found a way to efficiently implement a user authentication and routing mechanism on a Server Component, therefore without implementing a context provider at the topmost component, throw me a comment. I would greatly appreciate.
The setup I used on my last project was I retrieved initial data server side and passed it into my client side which uses SWR to revalidate. SWR can then handle updates that happen from the user. For the most part the server side data fetching isn't completely necessary since SWR would work anyway without initial data but does bolster the accuracy and speed of the data given all possible situations. That's at least my understanding of it as of now. SWR handles client-side caching, which means that once data is fetched, it's stored in the cache and is quickly available for subsequent requests. - On a page refresh, the cache is cleared, which means SWR has to fetch the data again. This can lead to a delay in rendering if not handled correctly. - Using `initialData` from the server-side can provide an immediate fallback for SWR, ensuring that data is always available, even if the cache is cleared.
YES, We all can agree that NextJS is the future of web development, and don't forget about server actions when it becomes stable a lot will change about react and next :)
I have a doubt then what is difference in Astro and Nextjs features As I see what the things you mentioned today in the video are already stable features in Astro I am confused should I choose Astro or Nextjs Can u pls clarify
the word "stable" doesn't mean that you can not use server actions, you can absolutely use it, but the way you handle errors are form status is a bit hard, you can handle errors with redirect function, a lot of big companies And developers use NextJS and I will recommend that, but at the end it's you who decides which one is good for your use case. I will say do your research and pick one.
As a full-stack PHP developer... let me tell you we been doing this for ages, using PHP for server-side and JS/JQuery for frontend with ajax for dynamic content... so this new-age full stack making a circle to where we were 15 years back....
Another moral of this video is that , if you can make your website faster , with better SEO and user experience then why not doing it and just keep sticking to the client side and hating Next JS and server components. So many benefits.
I know this video is a bit old, but it helped me to understand this a bit confusing concept! Thank you. As one improvement, I would add a visual view of the coding example.. as I had not that much of an understanding yet of all the components and had to really focus and read carefully to understand what is doing what and what is missing when doing ssr vs. no ssr. Maybe highlight what could be done on the server in the first code and show the ui to get even those with little knowledge like me to understand easier. But otherwise, it's a very good video andunderstanable.. much love from Germany ❤️
Man keep going. You and your team are my reference. I recommend your channel to everyone around me. I tell them you're the god of good practices 😂. This channel is building my career so thank you and the team for that. I'm broke atm but once i get enough money i'll for sure buy the next course. Idk how much will it cost but any price is a good price after all you've done in here.
I dont have much idea about nextjs from whatever ive heard in this video, ive doubt. When server executes the javascript code all the load is on the server, but the output has to be sent to the client right ? If yes, then which process is more easier with slow internet, 1. To get the javascript and execute it on the client OR 2. to get the executed js code. Wudnt the executed js code require more data ?
@@sameerswankar back to the basic man, read again why we have servee. And why we dont just run thewhole chatgpt in your laptop, instead of running on the server? Whatdo you think will happen if u do that?
I only use Next, so I’m always server rendering focused, the problem is that nowadays almost every site uses, GSAP or framer motion. Even if you create components to handle anything that needs to be client based, you’ll have more than half the page that can’t be read by Google, so it’s a huge problem anyways. Unless you have a workaround for using an animation library, without using client rendering, there is not much you can do
❤ From India.... Took your react course and loved it Please keep next.js course affordable... Waiting for that..... Appreciate your hard work and simple explanation of complex topics... Really helpful content..
I need to learn MERN fullstack... Can you please do more of MERN fullstack youtube videos and even better if you can make an amazing MERN fullstack course just as in depth as Next 13.5 course is (and affordable too 🙂) ... That would really be helpful... Thanks in advance ❤👍
When you build your next app, you will notice the existing of js first load, as much the js is big, as much your app page will need time to be executed... This way you will notice how much this video is needed to explain that you have to apply your react in a next level to get the next js framework added benefits as react is just a outil not the framework
Also, technically speaking, react is just a small library that compares code using a diffing algorithm to do so efficiently. Other libraries like react dom are makes it usable in the browser. Going a step further, react router allows you to do navigation. All these packages and some others create a react ecosystem, aka a framework. NextJS is just Vercels approach at doing the same thing that many devs have already been doing with CRA and the packages listed above (and others). That said, NextJS does so very effectively, but it’s heavily opinionated on how you should code, which can be good, but can also be bad. It’s the same reason Ruby on Rails was so popular for a while, only to be thought of as “bad” down the road for beginners because it had so many abstractions that a beginner couldn’t actually learn (without great difficulty) what RoR was doing behind the scenes. Now it seems we’ve cycled back around and RoR style frameworks are popular again. Granted react only covers the UI. I could also talk about newer devs choosing to learn express over RoR too in order to cover the backend technologies.
hi there! im interested in making fullstack projects. i was dealing with express for the apis, but i nextjs caught my attention bc i saw that it can handle both sides. do you personally recommend it??
This video was really important! I always had this doubt in my mind that if we are anyways using hooks in component then how this page can load on the server. I broke the components just like you, still wasn't fully sure whether its the right way to write code or not! Thanks a ton for this video ❤ Another video request: if possible please create some projects based on event based architecture
I was learning React for couple of months, now i am learning Next.jS for about 3 weeks, and i am in love with Next.js. I know main difference between CSR and SSR, you've even explained it very well, but can i understand it the way, that CSR for React means it's purely for front-end, and when i want to add back-end to my app, i must use other options, such as express js. While SSR in Next.js means, it offers me way of creating back-end routes in my app in API folder, so basically it's built for creating full-stack apps. I am not very experienced, but why then use React to create pure front-end, when Next.js can create same front-end and as a bonus offers many more options (creating back-end to make it full stack, seo optimization, images optimization, easy routing). Why would anyone pick React, when Next.js can create what React creates, but offers many more great features? Sadly, in my country there are few to none Next.js job offers, it seems they did not "find" Next.js yet, so i guess i'll have to stick to React, if i want to land a job, even personally i like Next.js more. Thanks
Well sometimes you want to use react as a light front end because react alone is still really good and as a backend option use another thing like, django,java spring or php, also with react you can work with react native, so dont undermine vainilla react too soon
I know that I won‘t be able to buy the course… As a student with zero money, and living just with the parents money 😢 But I would love to have access to it, I know it will be PERFECT, just because it is you
this video is spot on ngl ! that's what i have been thinking when i first started using NextJs it felt like am just developing some reactApp but just under a different name framework and that brought to my attention that am not using NextJs as its supposed to be used but instead i used it like it was just react
I'm 100% into learning Next. But I want to know if this course is right for me. 1. I know basic Javascript 2. I'm 2 days into learning React Will I be able to grasp the contents provided in the course as an overall beginner? I'd really appreciate it if you could reply to this. Thanks in advance
Please make the most advanced tutorial u can think of, I have learned so much of the beginner information from you, but I think I speak for everyone, when I say, we want to learn more so we can build better.
Hey, please do a video of your website. I'm interested. I like your videos because 1. it shows you actually plan out what to present, thus not wasting time, and 2. they're detailed and easy to follow. Here's the thing. Client-server architecture has been around for ages. In fact, server side is all there was in the beginning (thus, dumb terminals). Over time clients get more powerful and stuff began to be shifted to the client. So, there should always be a mix between what's done on the client and what's done on the server. What, then? It's not as clear cut as what you suggested: what has to be on the client. Take the more interesting case of a busy server. If you do everything on the server, you tax it too much, so some clients will enjoy the fast response while others will have to wait. Thus, you want to be selfish: offload some of the duty to the client so you can serve more clients. The ultimate goal is you want the connection (not cheap on the server side) on the server to return as soon as possible so you can serve more clients. That should be the goal. Just think about it: why browsers over time have evolved to be able to do more things. As far as a bunch of front end developers mocking you, ignore most of them, since lots (if not most) of them don't even know what CS stands for, or what algorithm means.
Would love a series on thinking the NEXT way.. Like it could have various scenarios one would encounter during development.. say auth or registration... Data that updates very frequently etc
Something I wish I would see more is a youtube tutorial on migrating an existing project to new/better technology. It seems like every single tutorial is just "this is how you create a thing from scratch using the newest framework" but what if I already have a huge React project and want to start using Next on it to improve page loading time? I am not going to just abandon my whole project and start a new one.
I'm not sure but since the clients' systems are only getting better every day. By continuing that approach, we can off-load all these renderings from the server and just let it handle the backend data ops and other backend communications & processing. Just like mobile apps, anyway difference between Mobile apps & web apps is just fading away but using NEXT.js seems to be taking us back from where we started. We are not in the 2000s anymore, where client systems are weak or not really capable. Yes, I agree with the SEO & related stuff (last time I checked were better on SSRs). I still prefer keeping my FE and BE separate, 'Separation of concerns'. Maybe lack of experience or knowledge but as of today, I still advocate for CSR. Possibly, when I delve further, preferences might change.
Valid points, I had similar thoughts, but after diving into it deeper, the advantages are huge. Another video coming live on TH-cam today, and a full course on 22nd of September
you're exactly right. I myself still haven't got used to the way of nextjs and I do it in react way which I know I'm not using nextjs for it was meant to be
idk man, at the end of day only few components dont have 'use client' at the top and you just cant use styled components. Sometimes you get a annoying hidratation error, but yeah, that 10% of code that is SSR will be faster and bcs CRA doesnt exists anymore.. Thats why I use Next.
I totally agree with all that you said... But!!.. I really don't like the strict one page loading features in Nextjs.. If you want to display a Loader Skeleton for a particular component, You would be forced to use the old method of client side fetching. I might be wrong though, if there is an alternative, I would be glad to be informed.
Next is a framework. React is a very lightweight library that consists of a few little hooks and a more or less legacy class system. One of Next's libraries is react. what's all the confusion about? Y'all about that bunjs?
To me the biggest reason for a fullstack framework is type safety. Everything else is secondary and not that important for the kind of web apps I usually build which are more tools than showcases
this style of your videos are the best;it makes you just focus more on the subject therefore explanation is much more better than worrying about looking in the camera;
The problem is that as more and more is run on the server, the less compelling it is to use react (or js ) in general. It's really only good for its use case which is a single page app. Once someone starts adding jsx-like component based templating in other languages....I think you'll see more of that and only js frameworks for complicated front end
For me nextjs is just a react server. Since it is possible to combine nestjs for backend, nextjs for frontend with Nextauth for authentication using jwt and refresh token. With this you have a ready to scale complete Saas
You are absolutely amazing - thank you for the great explanation! And yes, it would be awesome to get insights into how your team thought when building your website with Next!
@@javascriptmasteryjust watched it. Man, you and your team have truly mastered the art of delivering VALUE in everything that you do. I will soon become a customer. I’m at a place where I’ve gotten so much value from your content that I WANT you to have my money😅 Doesn’t feel right getting all this for free. A true team of service. Inspiring - grateful!
Love the animations! Even tho I understand it means more work to put in the video. Do a couple tests and pick what suits you better for performance on your side and results! Re-use the most animation you can to boost up the editing time. At this point, you shouldn't be surprised to be a voice for the Next community! You are also inspiring a ton of creators doing carbon copy of your content and brand, so what you do over here, ends up resonating in a lot of places.
11:00 - just a thought, so if client is getting the rendered page, which also fetches data from an api. Wouldn't it take more time to return the HTML as opposed to the time take by react's initial load
Your content is good, I'm Brazilian, I still don't speak English, but the translation allows me to follow your content, does your course have the option of translation in the videos? And congratulations on the content and may it continue to improve more and more, thank you!
I didn't understand . All components in Nextjs are server rendered by default. Only when we needed interactivity we should convert that small leaf component into client component. Thats it. Am i doing wrong ?😊
Next js really awesome let me clarify today i am building blog card with feature of like it but i am facing little delay becoz of async nature then i use server action and useOptimistic hook and now its working fine🎉
I think it is inname to focus on full stack is the only way. Keep it simple, avoid magic. Keep cliënt and server side seperate, learn to build it without frameworks. Static can be static, without generating static, no server methods needed.
Almost 2 years working as a web dev directly thanks to Adrian. Super happy for your success man. Cheers for much more,
That's awesome!
Moral of the story, if you can't use client side things directly inside the server components then make a separate component for them and just render them into the server side components and pass the data as the props whatever you want.
Tysm for such a valuable info. Luckily I'm working on a huge Real Estate Project in Next JS and it would be really helpful.
Yes, you're right. Best of luck with the projects!
That's what it is.
Many years ago when react comes out you guys said about how great client rendering like using less resources, etc. We are getting back to php way
With pages directory you can still write client side applications that are just publishable as a static app, but with the added benefits of file based routing, bundle splitting, preconfigured env, dehydrated html files for each page.
crypto bros like "tech bros"
Cough cough 😷
Exactly. Forget about PC even mobile devices have like 8 GB ram minimum nowadays, so apart from benfitting SEO I don't get why you'd use server side rendering especially considering that nowadays people are using Cloud like AWS which has pay-per-use method where doing things on server side will cost you more when there is a perfectly feesible client machine available. Also that SEO thing only works for marketing/portfolio sites. you don't do SEO for rest of the project like portals which requires login anyways. And I also don't get why'd you overkill/over-engineer by creating a marketing/portolio type of static/semi-static site with react/next in the first place when there are tons of better and easier options available.
I hate how people constantly dismiss arguments with arrogant or sarcastic comments (many times they don't even know what they're talking about).
Some of the comments you replied to reminded me why I don't like following developers on Twitter or other social platforms.
Great video, thanks for the explanation and looking forward to the new course!
It's the internet, what can we expect :D
It is a complex topic, because in a case which there are millions of requests, it is gonna reduce the performance of the server. So, even in client mode, we can use the browser and client memory and cpu, and the internet actually is so fast, we can download the whole bundle so fast, but I still think nextjs and the balance between client and server components are the key.
Yes, that's why it has both client and server components. We can use server components to load the ui (non-interactive) faster and use client components to add the interactivity.
Here the result is html and js bundle (although there is so much for example react server component payload but we can understand it in this way). The html will be used to create the ui and js will add the interactivity. Since the javascript bundle is smaller than the old react it will take less time to make the page interactive.
I am actually working on a project wich will include 2 forms and I have developed one of them until now using client side rendering but as soon as I open my laptop and the code , I will change my code's structure to be using server side rendering. Really beneficial video.
Thank you!
I have learned so much from you Brother. Your the best Teacher online. Thank you so much.
I appreciate that!
I've used Remix for a project before and what this guy says is very much true. SSR practically eliminates the need for client side hooks like useState, useEffect, useContext, useReducer etc. Why would you manipulate data with state when you can just send any data you get to server for validation/storage? Likewise with fetching data, Remix doesn't even use useEffect for that. These full stack React frameworks have transformed the way to render data with components.
Exactly!
Well these hooks allow/simplify ui to be updated and performing complex and interactive ui based on events and user inputs .
if I have to make round trip to server for each ui update what's the point of react , I can do the same with classic html and css and little js and write all logic at server right ? Am I missing something?
@@thorw2136 in my experience, for such cases the hook that I would use at the most would be useState, that's all. I wouldn't use any other state management more complex than useState. Use useState to conditionally render UIs, show warning text etc. For anything else that involves data validation, that's the responsibility of the backend, the raison d'etre of Next js and Remix.
The part that "SSR practically eliminates the need for client side hooks like useState, useEffect, useContext, useReducer etc" is misleading and false... to make your UI reactive, which is why React was built you need to handle events in a dynamic way. without useState, useEffect etc how can you manage to that? Also you must remember that without useState you will not be able to dynamically rerender the UI which means you will no longer have a Single Page Application but just a normal web application that visit the server for each and every request which is BASICALLY what SPA frontend solutions like React, Angular and Vue are solving above everything else. So that statement is misleading
This video is exactly what I've been thinking to myself for the last 5 months, and i can't understand how there are people who think nextjs is useless, how send less js to client is useless ? thaks for this video!
Probably one of the few, if not the only video, that really addresses this issue. I have seen tons of videos making their uppermost component a client component, basically making the whole application a client side application, which is not really what we're aiming for with the new App Router.
If anyone has found a way to efficiently implement a user authentication and routing mechanism on a Server Component, therefore without implementing a context provider at the topmost component, throw me a comment. I would greatly appreciate.
The setup I used on my last project was I retrieved initial data server side and passed it into my client side which uses SWR to revalidate. SWR can then handle updates that happen from the user. For the most part the server side data fetching isn't completely necessary since SWR would work anyway without initial data but does bolster the accuracy and speed of the data given all possible situations. That's at least my understanding of it as of now.
SWR handles client-side caching, which means that once data is fetched, it's stored in the cache and is quickly available for subsequent requests.
- On a page refresh, the cache is cleared, which means SWR has to fetch the data again. This can lead to a delay in rendering if not handled correctly.
- Using `initialData` from the server-side can provide an immediate fallback for SWR, ensuring that data is always available, even if the cache is cleared.
YES, We all can agree that NextJS is the future of web development, and don't forget about server actions when it becomes stable a lot will change about react and next :)
Exactly!!! And we already use them in our code
I have a doubt then what is difference in Astro and Nextjs features
As I see what the things you mentioned today in the video are already stable features in Astro
I am confused should I choose Astro or Nextjs
Can u pls clarify
the word "stable" doesn't mean that you can not use server actions, you can absolutely use it, but the way you handle errors are form status is a bit hard, you can handle errors with redirect function, a lot of big companies And developers use NextJS and I will recommend that, but at the end it's you who decides which one is good for your use case. I will say do your research and pick one.
JavaScript on the backend was a mistake, react was also a mistake
@no1youknowzRSC and SA means?
Love the explanation. Perfectly broken down to bits that a newbee could comprehend. Kudos to this author, you deserved a like and a subscription!
As a full-stack PHP developer... let me tell you we been doing this for ages, using PHP for server-side and JS/JQuery for frontend with ajax for dynamic content... so this new-age full stack making a circle to where we were 15 years back....
Another moral of this video is that , if you can make your website faster , with better SEO and user experience then why not doing it and just keep sticking to the client side and hating Next JS and server components. So many benefits.
Exactly!
I know this video is a bit old, but it helped me to understand this a bit confusing concept! Thank you.
As one improvement, I would add a visual view of the coding example.. as I had not that much of an understanding yet of all the components and had to really focus and read carefully to understand what is doing what and what is missing when doing ssr vs. no ssr.
Maybe highlight what could be done on the server in the first code and show the ui to get even those with little knowledge like me to understand easier.
But otherwise, it's a very good video andunderstanable.. much love from Germany ❤️
I spent 3 months to convert my old Nextjs CMS project to server component but now I like it
Awesome!
Man keep going. You and your team are my reference. I recommend your channel to everyone around me. I tell them you're the god of good practices 😂. This channel is building my career so thank you and the team for that. I'm broke atm but once i get enough money i'll for sure buy the next course. Idk how much will it cost but any price is a good price after all you've done in here.
Thank you so much for your support!
I dont have much idea about nextjs from whatever ive heard in this video, ive doubt. When server executes the javascript code all the load is on the server, but the output has to be sent to the client right ? If yes, then which process is more easier with slow internet, 1. To get the javascript and execute it on the client OR 2. to get the executed js code. Wudnt the executed js code require more data ?
@@sameerswankar back to the basic man, read again why we have servee. And why we dont just run thewhole chatgpt in your laptop, instead of running on the server? Whatdo you think will happen if u do that?
@@sameerswankarplease read on how server client works. Seems like you only understand fromtend thingy.
And it's happening, Next 13 is growing at rapid pace here in India.
Every company is now using it.
Yep!
Any data to back up?
You are the greatest Teacher for that and I hope that I understand your course. English is very hard for me as a German.
I'm happy to hear that!
I only use Next, so I’m always server rendering focused, the problem is that nowadays almost every site uses, GSAP or framer motion. Even if you create components to handle anything that needs to be client based, you’ll have more than half the page that can’t be read by Google, so it’s a huge problem anyways. Unless you have a workaround for using an animation library, without using client rendering, there is not much you can do
Great point. Adapting to animations is definitely something that'll have to be addressed better.
❤ From India.... Took your react course and loved it
Please keep next.js course affordable... Waiting for that..... Appreciate your hard work and simple explanation of complex topics... Really helpful content..
I'll try to make it as affordable as possible!
I bought the course Adrian and loving it... Thanks for making such amazing content in that affordable price.... And bonuses are amazing ❤
I need to learn MERN fullstack... Can you please do more of MERN fullstack youtube videos and even better if you can make an amazing MERN fullstack course just as in depth as Next 13.5 course is (and affordable too 🙂) ... That would really be helpful... Thanks in advance ❤👍
Please make a video showing how you built your website... Thanks in advance and thanks for all the tips you have given through this channel... :)
Will do soon
I'm really waiting for it
You don't have to care about those negative comments, we love you Adrian , keep going ❤ , we know how much knowledge you've
No negative comments here ❤️
When you build your next app, you will notice the existing of js first load, as much the js is big, as much your app page will need time to be executed... This way you will notice how much this video is needed to explain that you have to apply your react in a next level to get the next js framework added benefits as react is just a outil not the framework
I like how you put it!
Also, technically speaking, react is just a small library that compares code using a diffing algorithm to do so efficiently. Other libraries like react dom are makes it usable in the browser. Going a step further, react router allows you to do navigation. All these packages and some others create a react ecosystem, aka a framework. NextJS is just Vercels approach at doing the same thing that many devs have already been doing with CRA and the packages listed above (and others). That said, NextJS does so very effectively, but it’s heavily opinionated on how you should code, which can be good, but can also be bad. It’s the same reason Ruby on Rails was so popular for a while, only to be thought of as “bad” down the road for beginners because it had so many abstractions that a beginner couldn’t actually learn (without great difficulty) what RoR was doing behind the scenes. Now it seems we’ve cycled back around and RoR style frameworks are popular again. Granted react only covers the UI. I could also talk about newer devs choosing to learn express over RoR too in order to cover the backend technologies.
hi there! im interested in making fullstack projects. i was dealing with express for the apis, but i nextjs caught my attention bc i saw that it can handle both sides. do you personally recommend it??
This video was really important!
I always had this doubt in my mind that if we are anyways using hooks in component then how this page can load on the server. I broke the components just like you, still wasn't fully sure whether its the right way to write code or not!
Thanks a ton for this video ❤
Another video request: if possible please create some projects based on event based architecture
Thank you!
I was learning React for couple of months, now i am learning Next.jS for about 3 weeks, and i am in love with Next.js. I know main difference between CSR and SSR, you've even explained it very well, but can i understand it the way, that CSR for React means it's purely for front-end, and when i want to add back-end to my app, i must use other options, such as express js. While SSR in Next.js means, it offers me way of creating back-end routes in my app in API folder, so basically it's built for creating full-stack apps. I am not very experienced, but why then use React to create pure front-end, when Next.js can create same front-end and as a bonus offers many more options (creating back-end to make it full stack, seo optimization, images optimization, easy routing). Why would anyone pick React, when Next.js can create what React creates, but offers many more great features? Sadly, in my country there are few to none Next.js job offers, it seems they did not "find" Next.js yet, so i guess i'll have to stick to React, if i want to land a job, even personally i like Next.js more. Thanks
I think sticking with nextjs is fine, if you know nextjs you definitely know react too
Well sometimes you want to use react as a light front end because react alone is still really good and as a backend option use another thing like, django,java spring or php, also with react you can work with react native, so dont undermine vainilla react too soon
I know that I won‘t be able to buy the course… As a student with zero money, and living just with the parents money 😢 But I would love to have access to it, I know it will be PERFECT, just because it is you
We'll try to make it as affordable as possible!
this video is spot on ngl ! that's what i have been thinking when i first started using NextJs it felt like am just developing some reactApp but just under a different name framework and that brought to my attention that am not using NextJs as its supposed to be used but instead i used it like it was just react
I'm 100% into learning Next. But I want to know if this course is right for me.
1. I know basic Javascript
2. I'm 2 days into learning React
Will I be able to grasp the contents provided in the course as an overall beginner? I'd really appreciate it if you could reply to this. Thanks in advance
You should dedicate some more time to learning React. Go through our TH-cam crash course.
Yes we need that video,and thanks for clarifying the concept ❤️
My pleasure 😊
Bro just made a 17-minute banger to prove his point
This video really helps me understand the difference between react and nextjs also the purpose of server components. 👌👌
Amazing!
Please make the most advanced tutorial u can think of,
I have learned so much of the beginner information from you, but I think I speak for everyone, when I say, we want to learn more so we can build better.
It is incredibly advanced :)
Hey, please do a video of your website. I'm interested. I like your videos because 1. it shows you actually plan out what to present, thus not wasting time, and 2. they're detailed and easy to follow.
Here's the thing. Client-server architecture has been around for ages. In fact, server side is all there was in the beginning (thus, dumb terminals). Over time clients get more powerful and stuff began to be shifted to the client. So, there should always be a mix between what's done on the client and what's done on the server. What, then? It's not as clear cut as what you suggested: what has to be on the client. Take the more interesting case of a busy server. If you do everything on the server, you tax it too much, so some clients will enjoy the fast response while others will have to wait. Thus, you want to be selfish: offload some of the duty to the client so you can serve more clients. The ultimate goal is you want the connection (not cheap on the server side) on the server to return as soon as possible so you can serve more clients. That should be the goal. Just think about it: why browsers over time have evolved to be able to do more things.
As far as a bunch of front end developers mocking you, ignore most of them, since lots (if not most) of them don't even know what CS stands for, or what algorithm means.
Couldn't agree more. The goal of this video is to clarify things for developers of newer generations.
Would love a series on thinking the NEXT way.. Like it could have various scenarios one would encounter during development.. say auth or registration... Data that updates very frequently etc
Love the idea!
Something I wish I would see more is a youtube tutorial on migrating an existing project to new/better technology. It seems like every single tutorial is just "this is how you create a thing from scratch using the newest framework" but what if I already have a huge React project and want to start using Next on it to improve page loading time? I am not going to just abandon my whole project and start a new one.
We need more information and usage of NEXTJs to its peak performance project plz
More coming soon!
They are going back to the traditional server side Frameworks. Nice explanation. It now released v14
Can’t believe I’ve spent 17 mins to watch an ad for a nextjs course 🤣
It was never meant to be an ad. Rather an educational/informational video. Did you get something from it?
I'm not sure but since the clients' systems are only getting better every day. By continuing that approach, we can off-load all these renderings from the server and just let it handle the backend data ops and other backend communications & processing. Just like mobile apps, anyway difference between Mobile apps & web apps is just fading away but using NEXT.js seems to be taking us back from where we started.
We are not in the 2000s anymore, where client systems are weak or not really capable. Yes, I agree with the SEO & related stuff (last time I checked were better on SSRs).
I still prefer keeping my FE and BE separate, 'Separation of concerns'. Maybe lack of experience or knowledge but as of today, I still advocate for CSR. Possibly, when I delve further, preferences might change.
Valid points, I had similar thoughts, but after diving into it deeper, the advantages are huge. Another video coming live on TH-cam today, and a full course on 22nd of September
Adrian.. thanks for this clear and what about talking about nestjs
Great suggestion!
you're exactly right. I myself still haven't got used to the way of nextjs and I do it in react way which I know I'm not using nextjs for it was meant to be
Professionally explained with simple terms and great info flow
From Yemen, Huge love for all your efforts.
Much appreciated!
I will personally buy the course for myself and my daughter. ❤
Wonderful!
So much work goes into every one of your videos, Adrian. Excellent job, keep it up!
Thanks a ton!
Great explanation. .Net developers have a somewhat similar learning curve in dealing with the Blazor framework.
Thanks, this explanation was real helpful. Why? Because in the sub reddit I thought it was a joke but thankfullly you posted about it.
Glad to hear that, that was the main reason why I decided to make it.
Whoa, how can a single video get so many likes and comments. You are very inspiring
Please make the video on how to use next js for building ssr
Coming really soon!
Just going put this here.
I appreciate this video 🫵
Thank you 🙏.
It has been needed. ✅
Thank you so much for the great explanation! This video really helps me understand the difference between react and next js
idk man, at the end of day only few components dont have 'use client' at the top and you just cant use styled components. Sometimes you get a annoying hidratation error, but yeah, that 10% of code that is SSR will be faster and bcs CRA doesnt exists anymore.. Thats why I use Next.
Well in short , react is CSR Development , and Next can offers both SSR and CSR.
Now it's just up to you that you need SSR or not.
Exactly
adrian....you explained very well about next.js 13
Thank you!
Thank you so much for the clear explanation.. Please explain how you created the js mastary page.
Will do soon
You make me a day better with next js ❤
Thank you!
I'm so glad that I switched to backend and I work with well established and mature tehnologies ohh :3
I totally agree with all that you said... But!!.. I really don't like the strict one page loading features in Nextjs.. If you want to display a Loader Skeleton for a particular component, You would be forced to use the old method of client side fetching. I might be wrong though, if there is an alternative, I would be glad to be informed.
Next is a framework. React is a very lightweight library that consists of a few little hooks and a more or less legacy class system. One of Next's libraries is react. what's all the confusion about? Y'all about that bunjs?
I agree, some bun content might come soon!
I posted this on Reddit to genuinely understand, not to stir up . Thank you for the explanation
So you're the OP, cool! :D
5:30 great explanation
Adrian's way of explaining is always better.
To me the biggest reason for a fullstack framework is type safety. Everything else is secondary and not that important for the kind of web apps I usually build which are more tools than showcases
That very well thanks and. I personally recommended to build a learning management system.
Excellent!
Thanks for clarifying. We are waiting for the video
Coming soon
Waiting for the next js course sir. And thank you for the video. My doubts are being cleared by this video
Glad to hear that
6:08
Interested to know how you built your new website using nextjs
Coming soon!
this style of your videos are the best;it makes you just focus more on the subject therefore explanation is much more better than worrying about looking in the camera;
You are the best mate. Don't mind with that type of people, keep up your excelent work! ⚡⚡
Thanks!
Yes we’d be glad to have that video Adrian 😊. I’m getting the concept and uses of server components now thanks to your videos
Coming soon!
The problem is that as more and more is run on the server, the less compelling it is to use react (or js ) in general. It's really only good for its use case which is a single page app.
Once someone starts adding jsx-like component based templating in other languages....I think you'll see more of that and only js frameworks for complicated front end
Interesting!
but you still need js in every languages to make component coz bowser only understant js
For me nextjs is just a react server. Since it is possible to combine nestjs for backend, nextjs for frontend with Nextauth for authentication using jwt and refresh token. With this you have a ready to scale complete Saas
Such a smart teacher.
i have learned more from your videos
your content is awesome
Thanks!
INCORRECT, i can make fully dinamic web pages based solelly on endpoints, apis and pure javascript. I need to React components to do this.
You are absolutely amazing - thank you for the great explanation!
And yes, it would be awesome to get insights into how your team thought when building your website with Next!
I just published it 30 minutes ago! :)
@@javascriptmasteryjust watched it. Man, you and your team have truly mastered the art of delivering VALUE in everything that you do. I will soon become a customer. I’m at a place where I’ve gotten so much value from your content that I WANT you to have my money😅 Doesn’t feel right getting all this for free. A true team of service. Inspiring - grateful!
Love the animations! Even tho I understand it means more work to put in the video. Do a couple tests and pick what suits you better for performance on your side and results! Re-use the most animation you can to boost up the editing time.
At this point, you shouldn't be surprised to be a voice for the Next community! You are also inspiring a ton of creators doing carbon copy of your content and brand, so what you do over here, ends up resonating in a lot of places.
Thank you for such a profound comment, highly appreciated!
BOOM 💥💥 Best Nextjs explanation video.
Thank you!
This has been my suspicion all along. Thank you for confirming this to me 👏
Yes please will like the course on how you built your website
Coking soon!
I want to learn next.js completely . which courses from TH-cam are good?
It seems like I can't get a section chance to join the masterclass after already applying before. I didn't meet a certain criteria then, but now I do
Gotta use 60fps for animation videos my guy, 25fps won't cut it, it looks choppy and laggy
Please show us how you built your site mostly on the server side!?
What will be the price of the new course? Can't wait 😢...need NOW 😅...also need to start saving my pennies so I can buy it 😂
We'll offer Purchasing Power Parity, to make it more affordable for countries with lower income :)
Thank you so much abdrian. Really appreciate your sincere sacrifices. ❤❤❤. Is the team still working on the remainder chapters of the next.js Ebook?
Yes, everything's coming soon!
Can you make a video on hosting Next.js 12 & 13 apps on cPanel, hPanel OR AWS?
Great idea!
11:00 - just a thought, so if client is getting the rendered page, which also fetches data from an api. Wouldn't it take more time to return the HTML as opposed to the time take by react's initial load
11:00 YES! we want it! :)
Coming really soon!
so as a beginner in react, when should i start learning next js? only after becoming proficient in react?
Correct!
Your content is good, I'm Brazilian, I still don't speak English, but the translation allows me to follow your content, does your course have the option of translation in the videos?
And congratulations on the content and may it continue to improve more and more, thank you!
I didn't understand . All components in Nextjs are server rendered by default. Only when we needed interactivity we should convert that small leaf component into client component. Thats it. Am i doing wrong ?😊
Yes! :)
Next.js 13 State Management Tutorial?, Hopefully it will come true :)
Great idea!
we would like to watch the video of your website development using nextjs 13.4
Will you recommend next js for a very big admin application which also has a dedicated REST api? Or React?
Yes
Is Refine js recommended to be used with Next? Refine features are heavily based on hooks, thus making components client ones 'use client'
Next js really awesome let me clarify today i am building blog card with feature of like it but i am facing little delay becoz of async nature then i use server action and useOptimistic hook and now its working fine🎉
Awesome
I think it is inname to focus on full stack is the only way. Keep it simple, avoid magic. Keep cliënt and server side seperate, learn to build it without frameworks.
Static can be static, without generating static, no server methods needed.
but tanstack router and tanstack query is better than next router and next error/loading management