Please be aware that the new functionality is only in beta stage, they are not stable. Better not use those in production and stick with current approach, which is NOT DEAD. It might be dead in 6 months or so, but not now.
This is what I needed! Just started learning NextJs and couldn’t figure out the difference between server component fetching and using getServerSideProps- there’s no difference! Lol. Wish NextJs tutorial mentioned this smh
Have been using the pages and API routes for a long while, having migrated from the typical mern stack and that was a level up. But this combined with prisma. My goodness me. Its an absolute gamechanger for production speed. Not without some drawbacks but overall they are outweighed by the speed at which you can build some pretty complex apps. Seperation of concerns seems to be becoming a thing of the past haha
Hello i have a few knowledge with react and is now exploring next js in parallel. May I know what is the content of your imported component for it to accept the key={} and product={}? Thanks!
How do you deploy this? im getting an error with vercel " Type error: Page "app/page.tsx" does not match the required types of a Next.js Page. "fetchNasaImages" is not a valid Page export field."
Ok, we know that frontends goes to fully CQRS. Actually I see the needs for frontend state is for just things like loading bar... And yeah, we have all this in angular, plus reactivity. But, todays frameworks puts the reactivity part behind their runtime, useSwr, useReactQuery, solidjs and decoupling of the state from the component, etc, u name it. So we lost 10plus years for crap tooling and things on frontend, just so we back to simple actions dispatching (not redux, but cqrs).
How do I make my components server components if I'm not using the beta app directory? I tried getServerSideProps function but when I console.log the fetched data it logs both on the console and terminal.
So meaning fetchproducts is being used with async await and The website is still Server side renderred? Can someone please expain. Also what if I want to make api request to a backend with id that is coming from url inside server componemt,
how's your Async functional component working??? because if i do the same in jsx it threw the error "objects are not valid as child". It tells you not to render an object. Adding the async-operator to our function makes it return a Promise. And a Promise is an object. But React does not know how to render an object.But in you case its working normallly.Can you please explain?
so is {cache: "force-cache"} literally the same as SSG such that it would need to rebuild again to fetch the updated data, in case the data is updated/changed?
Got a few question; 1, Can I use Axios instead of fetch for this? 2, If for example I want to fetch the user data in the navbar, but also in the page, 2 different component of course, will it be efficient? in compare to SSR -> prop drilling (1 request at all vs 2+). 3, In SSR you can use functions like MySQL queries and etc., why its different with the new approach? It means I will have to make a new endpoint for each? 4, They are rendered in the server side- means it wont send a fetch request from the client? or will it? 5, How its different other than using useSWR hook or React Query and just put the component stuff on "loading" state until the data is fetched? thanks!
Axios team need to add support for this feature, if they wanna keep up with the React. Cause even React new docs is recommanding Next JS instead of CRA.
@CoderOne Be aware - SSR does work ONLY when u manually/hard refresh the page and not when u navigating back and forward with Link component from next/link...(with Link component - entering the page first time witll SSR, but reentering the same page SSR doesnt work anymore) This hurts me so much. How do we solve this?
@avfr I dont want the data i fetch to be displayed in json file wehn u inspect the network tools. I want the backend to send a complete HTML with filled in data. Dont want to expose ANY data to the user excepts predefined HTML with content. And yeah im just trying out NEXTjs13 and not implementing in production. Just playing around and learning for the future + contribute with potential bugs so they get fixed as soon as possible - Thats a community job in general :)
So it is not actually exported as static pages, its just caching the response. Does this works when deployed on any platform other than vercel? And also if I just want to export it as stagic and just upload it on s3, how can I do it using the app folder? If possible
This caches the fetch request but is there any way to get it to cache the entire function? say if we were doing some computationally intensive calculations within the function?
I think we can create a separate function/component for that calculation, use useMemo hook and then import it so that entire page doesn't switch to client side rendering because of it
Starting the video by claiming they are 'dead' is completely irresponsible as a content creator. It puts pressure on newer developers (your exact audience as a UA-camr) to feel like they need to catch up on all the latest trends and always be on the bleeding edge. Please consider the wider spectrum of people who might watch your videos when making bold, blanket statements like this.
Hey, @CodeOne, I'm wondering--is there a way to determine the user's device type server side so that I don't need to make my site responsive? I'd rather serve an alternate component upon learning of the user's device type (i.e., desktop vs. mobile). Sure, I could employ some combination of media query and dynamic imports, but I'm guessing that wouldn't do me much good in terms of SEO. Maybe you know a way to accomplish what I desire.
My company is using next version 12 and I don't know why people say data fetching is complex or hard using the 'old ways'. It may not be say as performant as the latest bleeding edge approaches -- but to claim it's difficult to understand, I find is a poor argument. The docs are pretty straightforward to me and it's done everything I have ever needed it to do as well as many other top tier companies out there who use nextjs.
I agree. In fact I'd say nextjs 12 gave me a lot more control on the way I wanna fetch data. Nextjs 13 seems to abstract away a lot of the lower level stuff that was present in version 12, and it makes me feel like I'm losing complete control of my app.
Click bait. It's not dead, just abstracted so that you can work without worrying about those details. They still SSR and SSG on your behalf, there are even configuration objects to get some control over the provided abstraction. 🤔
They are not completely dead lol The app directory is EXTREMELY buggy still, routes tend to go kinda' crazy, the css is not loaded properly and etc. It is still far from production ready, even though it will be amazing.
Server Side Rendering vs Static Site Generation. One will fetch datas for each request server side, the second will generate a static page once and return it. You can use ISG too that will do a static generation each x seconds.
@@karjanieluj3135 Be aware - SSR does work ONLY when u manually/hard refresh the page and not when u navigating back and forward with Link component from next/link...(with Link component - entering the page first time witll SSR, but reentering the same page SSR doesnt work anymore) This hurts me so much.
It was a great vidéo and tnq for that. I Just Wanted to Ask you to make à video on your vs code extensions bcuz I found them so use full and cool like folder icons and when you scrolled down name of the function stayed on top of the page.. Tnq so much
All the rhetorics on the latest data to be fetched so simple does not work as Next13 relying hard on caching and there is no way to manage it, if you use server components.
It's scary to think how the frameworks and libraries have dominated the world of coding that people will no longer bother to learn the actual coding language and instead learn how to use the frameworks/libraries. "Oh no I'm not a JavaScript developer, I only do React and Next"
@@johwel340 No it's not. You can achieve speed and performance with raw languages too if you know things. These libraries were also made using raw languages afterall. But that's totally out of the context here. I'm not saying it's a bad thing that people are using frameworks and libraries, they are meant to be used afterall. It's about how a lot of people tend to just start diving into these popular library bandwagon. You are not learning JavaScript, you are just learning the syntaxes of the said library and assemble them. I made this comment cause everyday there is a new JS library released, it's too saturated already.
I don't think this makes sense, since u must absolutely know the language even if ur using a framework... it just makes things faster. This is the same as saying: omg it is a shame people use javascript and don't even bother to know assembly nowadays. Embrace new tech my friend, that's how we evolve lol
@It's Aaron now delete works but I can only delete single item. Not multiple. Like users/uid/todos/id1,id2 . How can I delete this multiple. With query?
@It's Aaron I have selectedID array [id1,id2] and these I'd are generated by Firestore and How can I get Firestore autogenerated Id. It is just id or Document Id
![How To Create Globe Using Threejs With React [Video 1]](http://i.ytimg.com/vi/zPe-YHENvO0/mqdefault.jpg)
They were not killed. There's backwards compatibility and incremental adoption oportunity on nextjs. You can still go the old way route.
found a "well actually" dude... lol
@@VoyceAtlas that was not the tone of my comment. But if that's all you have to add, sure thing
@@VoyceAtlas nah this is important to know
Thanks
@@VoyceAtlas he wasn't fighting lol
Please be aware that the new functionality is only in beta stage, they are not stable. Better not use those in production and stick with current approach, which is NOT DEAD. It might be dead in 6 months or so, but not now.
6 months, more like 6 years. Ok, not 6 years maybe atleast 2-3 years.
im reading this exactly 6 months later lol, ill stick with 12 lol, im not taking any chances
stable now !
Well the Next CLI already forced me to use 13 so I just went with it
@@merotuts9819 its dead lol
This is what I needed! Just started learning NextJs and couldn’t figure out the difference between server component fetching and using getServerSideProps- there’s no difference! Lol. Wish NextJs tutorial mentioned this smh
clear and concise. thats what i was looking for.Thanks
How do we manage global states using SSG or any other methods (SSR, ISR)?
Hi guy ! nice video and thank so much. Beside , What extension do you use to suggest code ?
If I use axios for data fetching, this "cache" and "next" properties, will work?
I'm wondering the same
Any idea if the revalidate() function will still work in Next13? What if you change the title of a blog post in your CMS for example?
FYI Next.js 13 is still in Beta and it's *completely* backward compatible with v12.
@@ahmedsami7378 Classic clickbait tech UA-cam video
what vs-code theme do you use?
second to this, i like the colors
Have been using the pages and API routes for a long while, having migrated from the typical mern stack and that was a level up. But this combined with prisma. My goodness me.
Its an absolute gamechanger for production speed. Not without some drawbacks but overall they are outweighed by the speed at which you can build some pretty complex apps.
Seperation of concerns seems to be becoming a thing of the past haha
Hello i have a few knowledge with react and is now exploring next js in parallel. May I know what is the content of your imported component for it to accept the key={} and product={}? Thanks!
How do you deploy this? im getting an error with vercel " Type error: Page "app/page.tsx" does not match the required types of a Next.js Page.
"fetchNasaImages" is not a valid Page export field."
great explanation, keep up the good work!
Ok, we know that frontends goes to fully CQRS. Actually I see the needs for frontend state is for just things like loading bar... And yeah, we have all this in angular, plus reactivity. But, todays frameworks puts the reactivity part behind their runtime, useSwr, useReactQuery, solidjs and decoupling of the state from the component, etc, u name it. So we lost 10plus years for crap tooling and things on frontend, just so we back to simple actions dispatching (not redux, but cqrs).
U have both
How do I make my components server components if I'm not using the beta app directory?
I tried getServerSideProps function but when I console.log the fetched data it logs both on the console and terminal.
So meaning fetchproducts is being used with async await and The website is still Server side renderred? Can someone please expain.
Also what if I want to make api request to a backend with id that is coming from url inside server componemt,
how's your Async functional component working??? because if i do the same in jsx it threw the error "objects are not valid as child".
It tells you not to render an object. Adding the async-operator to our function makes it return a Promise. And a Promise is an object. But React does not know how to render an object.But in you case its working normallly.Can you please explain?
It's working only in Next.js 13 in SSR mode
so is {cache: "force-cache"} literally the same as SSG such that it would need to rebuild again to fetch the updated data, in case the data is updated/changed?
Out of topic
Its middleware next 12 and next13 same?
Because the middleware docs in nextjs13 not available
Great explanation! Thanks! You help me!
Got a few question;
1, Can I use Axios instead of fetch for this?
2, If for example I want to fetch the user data in the navbar, but also in the page, 2 different component of course, will it be efficient? in compare to SSR -> prop drilling (1 request at all vs 2+).
3, In SSR you can use functions like MySQL queries and etc., why its different with the new approach? It means I will have to make a new endpoint for each?
4, They are rendered in the server side- means it wont send a fetch request from the client? or will it?
5, How its different other than using useSWR hook or React Query and just put the component stuff on "loading" state until the data is fetched?
thanks!
Bye, bye axios. Obviously, they wrapped fetching system in order to utilise caches.
Axios team need to add support for this feature, if they wanna keep up with the React. Cause even React new docs is recommanding Next JS instead of CRA.
7:03 Did you mean SSG instead of SSR, coupled with revalidation to get ISR?
Yes sir. The re-fetching task runs on background and updates the document with new data in ISR.
Pages have an api directory. in version 13 do the App directory have an api directory and do we still use it the same way
@CoderOne Be aware - SSR does work ONLY when u manually/hard refresh the page and not when u navigating back and forward with Link component from next/link...(with Link component - entering the page first time witll SSR, but reentering the same page SSR doesnt work anymore) This hurts me so much. How do we solve this?
@avfr there is no getServerSideProps in Nextjs13 appDirr... just server components with some configuration to enable SSR
@avfr I dont want the data i fetch to be displayed in json file wehn u inspect the network tools. I want the backend to send a complete HTML with filled in data. Dont want to expose ANY data to the user excepts predefined HTML with content.
And yeah im just trying out NEXTjs13 and not implementing in production. Just playing around and learning for the future + contribute with potential bugs so they get fixed as soon as possible - Thats a community job in general :)
So it is not actually exported as static pages, its just caching the response. Does this works when deployed on any platform other than vercel?
And also if I just want to export it as stagic and just upload it on s3, how can I do it using the app folder? If possible
It was always just caching the responses.
This caches the fetch request but is there any way to get it to cache the entire function? say if we were doing some computationally intensive calculations within the function?
I think we can create a separate function/component for that calculation, use useMemo hook and then import it so that entire page doesn't switch to client side rendering because of it
how come you can add async in react component ?
what theme do you use? 🙌
How does it compare with Remix now? Remix has been a winner in the past when it comes to performance.
Using async component causes type error if you are using typescript within your project unless you override the types
The project showcased in the video uses typescript. Next.js has support for that
github.com/ipenywis/nextjs-data-fetching
@@CoderOne I was pointing to when you mount a custom async component into another it complains about async component cannot be used inside a jsx
How would you utilize this with React Query?
I wonder the same, does this cache thing would replace React Query?
Starting the video by claiming they are 'dead' is completely irresponsible as a content creator.
It puts pressure on newer developers (your exact audience as a UA-camr) to feel like they need to catch up on all the latest trends and always be on the bleeding edge.
Please consider the wider spectrum of people who might watch your videos when making bold, blanket statements like this.
Well said
Hey, @CodeOne, I'm wondering--is there a way to determine the user's device type server side so that I don't need to make my site responsive? I'd rather serve an alternate component upon learning of the user's device type (i.e., desktop vs. mobile). Sure, I could employ some combination of media query and dynamic imports, but I'm guessing that wouldn't do me much good in terms of SEO. Maybe you know a way to accomplish what I desire.
Plaxico what’s happening man?
@@optymystyc Nice to encounter you here, Berato.
My company is using next version 12 and I don't know why people say data fetching is complex or hard using the 'old ways'. It may not be say as performant as the latest bleeding edge approaches -- but to claim it's difficult to understand, I find is a poor argument. The docs are pretty straightforward to me and it's done everything I have ever needed it to do as well as many other top tier companies out there who use nextjs.
I agree. In fact I'd say nextjs 12 gave me a lot more control on the way I wanna fetch data.
Nextjs 13 seems to abstract away a lot of the lower level stuff that was present in version 12, and it makes me feel like I'm losing complete control of my app.
what about handling errors ? how can we handle that ?
is there any way to implement redux with new app directory structure
Damn, this is indeed 100x simpler.
excellent knowledge
How can we use axios for the same
Not dead, it is still works, stop fake news for clickbait.
how can we used it in react query ?
How do you completely disable SSR?
Click bait. It's not dead, just abstracted so that you can work without worrying about those details. They still SSR and SSG on your behalf, there are even configuration objects to get some control over the provided abstraction. 🤔
It is so weird for me to write a api/await code, not including hooks directly on a component without wrapping something on it.
It's a server component.
They are not completely dead lol The app directory is EXTREMELY buggy still, routes tend to go kinda' crazy, the css is not loaded properly and etc. It is still far from production ready, even though it will be amazing.
You sound just like Mr. Mackey.
Questions
1. Diff between ssr and ssg
2. Can we use cache thing with axios?
Server Side Rendering vs Static Site Generation. One will fetch datas for each request server side, the second will generate a static page once and return it. You can use ISG too that will do a static generation each x seconds.
@@karjanieluj3135 Be aware - SSR does work ONLY when u manually/hard refresh the page and not when u navigating back and forward with Link component from next/link...(with Link component - entering the page first time witll SSR, but reentering the same page SSR doesnt work anymore) This hurts me so much.
@@iPankBMW But you can probably force SSR even with next/link ? And if you need to refresh data regularly better use ISG in this case, is'nt it ?
what about on demand ISR?
great tutorial
It was a great vidéo and tnq for that.
I Just Wanted to Ask you to make à video on your vs code extensions bcuz I found them so use full and cool like folder icons and when you scrolled down name of the function stayed on top of the page..
Tnq so much
super clear
All the rhetorics on the latest data to be fetched so simple does not work as Next13 relying hard on caching and there is no way to manage it, if you use server components.
thanks... what about On-Demand ISR Revalidation data fetching with next js 13 ??
I do not keeping up with all this stuff. I might abanadon front end and stick with PHP xD
GoodJob!
Thanks bro
I think it is also available in react js in some days...
Yeah but only for nodejs because reactjs is used with many different backend technologies
don't use any as a type bruh. You could've used GetServerSidePropsContext instead.
It's scary to think how the frameworks and libraries have dominated the world of coding that people will no longer bother to learn the actual coding language and instead learn how to use the frameworks/libraries.
"Oh no I'm not a JavaScript developer, I only do React and Next"
Those are the crapiest developers, I like to avoid talking about technologies.
Using Frameworks and Libraries is all about Speed and performance.
@@johwel340 Another dumb comment. Damn, go back to school and start writinig some binary trees.
@@johwel340 No it's not. You can achieve speed and performance with raw languages too if you know things. These libraries were also made using raw languages afterall. But that's totally out of the context here. I'm not saying it's a bad thing that people are using frameworks and libraries, they are meant to be used afterall. It's about how a lot of people tend to just start diving into these popular library bandwagon. You are not learning JavaScript, you are just learning the syntaxes of the said library and assemble them.
I made this comment cause everyday there is a new JS library released, it's too saturated already.
I don't think this makes sense, since u must absolutely know the language even if ur using a framework... it just makes things faster. This is the same as saying: omg it is a shame people use javascript and don't even bother to know assembly nowadays. Embrace new tech my friend, that's how we evolve lol
Hmmmmmm.they are still not dead😂😂😂
Proaps
Becoming worse with every update
how can I delete this firestore 'user/uid123/todos/todoid123'
@It's Aaron now delete works but I can only delete single item. Not multiple. Like users/uid/todos/id1,id2 . How can I delete this multiple. With query?
@@ThanHtutZaw3 use a map or for loop and delete every id if nothing else works
@It's Aaron I have selectedID array
[id1,id2] and these I'd are generated by Firestore and How can I get Firestore autogenerated Id. It is just id or Document Id
getStaticProps