Next.js 13 Data Fetching - The Ultimate Guide
Vložit
- čas přidán 2. 08. 2024
- #nextjs #nextjs13 #fetchdata
Next.js App router introduced a new, simplified data fetching system built on React and the web platform.
In this video, I will take you through every concept when it comes to fetching data inside of the app router.
We will go over fetching data on the server using server components, fetching dynamic data inside of dynamic route segments, using React Suspense to display loading states, data being deduplicated and much more.
Private 1 on 1 Help 👇
calendly.com/dabrettwestwood/...
Join my FREE Discord to talk and network about web development! 👇
/ discord
Data fetching an important topic when it comes to web development and Next.js 13 makes the development process smooth and easy to achieve.
Next.js 13 Docs for data fetching 👇
nextjs.org/docs/app/building-...
GitHub Source Code 👇
github.com/bwestwood11/data_f...
Here is a link to the article I wrote for on fetching data in Next.js 13 App router 👇
www.brettwestwood.dev/posts/N...
Here is a link to the typicode.com 👇
jsonplaceholder.typicode.com/
Here is a link to the dog API 👇
dog.ceo/dog-api/
Time Stamps
0:00 Intro
0:21 Core Concepts for Data Fetching in Next.js 13
1:59 Set up environment
4:12 Fetching Data on Server from Dog API
10:24 How To Always fetch fresh data
11:48 Cleaning up our files/folder structure
14:04 Server Side Data Fetching of ALL Users
19:23 Fetching Dynamic Data
26:18 Fetching Data in parallel
33:01 Using React Suspense/Loading
39:02 Outro - Jak na to + styl
Thank you so much, I have been looking for new Nextjs tutorials, and this is the perfect one ! trust me, you are the only one that answered the questions in my head, all other suggestions by the docs/chatgpt/websites were either wrong, out of date or incomprehensible, keep going !
I have searched everywhere for a guide like this and nobody has came close to this. Thank you! You are the only person who seems like they know what they are doing with app router on youtube
Thank you so much! I am glad you were able to find me!
Just found your channel and subscribed, i like how your tutorials are long and in depth about concepts to understand instead of just project tutorials(those are great every now and then), and i dont think 10 or 15 minute short videos can do the same.
Thank you for the kind words!
This is exactly what i was looking for. A recent Next.js 13 Data Fetching tutorial. Thanks God, thanks Brett.
No problem! Glad I can help!
Great video Brett! Always putting out quality content 🔥 thank you!
Thanks!
I appreciate you using the docs. Thanks for what you do
Thank you! and no problem!
Thank you. I like how you explain each step slowly so a beginner like myself can follow and understand.
Thank you so much Brett, for sharing such a wonderful tutorial, you did not even a miss a single thing in the tutorial. It may be a long tutorial for some guys but you explained each and everything for pro and beginners. Keep generating the tutorials. Subscribed you.
Thank you for the kind words! Appreciate it.
40 mins but worth it. Everything is explained really good. Thanks a lot for video!
Thank you so much! and thanks for tuning in!
I couldn't help it but I must subscribe, like and comment because the one thing I was looking for all these days you are the only one that explained it to my satisfaction thank you. I wish many people knew about this channel.
Thank you so much!
Thank you Brett! Your channel helps me a lot for my job.
Happy to help!
I am so thankful the video is amazing.....
I watched a lot of videos and only this one helped so far Thanks buddy.
best tutorial😍
Thank you!
Very well explained!! This was exactly what I was looking for
Awesome! Thanks for tuning in!
Simply the best!! Thumbs up Brett!!!
Thank you!
Nice video, have been looking for a tutorial like this, all topics were very clear, new sub
Thank you for the sub! Glad you enjoyed it!
Thanks Brett that was very well explained!
You are welcome! Thanks for tuning in!
Thank you very much man, greetings from the Dominican Republic. - Subscribed!
Thanks!
Very well explained. Thank you! Great tutorials. Subscribed
Thank you so much!
Great video! Thanks
Great tutorial, just what I was looking for. 😉
Glad I could help!
Awesome video!! Thank you so much!!
You are welcome! Thanks for tuning in!
Today I discovered your channel, its amazing bro. Btw we are working on same board thx everthing.
Thanks and welcome!
Great video that delivers on its promise (pun intended)
Would have liked to see content around route handlers since this is still a confusing topic for someone coming from a non-nextjs react app.
I would also love to see an advanced video covering the more complex problems such as launching the app with search/query params, how to securely authorize with third party endpoints using OAuth, keep sessions open/reconnect when expired and after establishing a secure connection, pull data into a component.
One area of improvement I saw in the video is that some of the development bugs could have been caught earlier by installing ESLint and I'd recommend all beginners (and really anyone who wants to take an app to production) use ESLint and ideally TypeScript as well to make their lives easier when debugging.
Thanks!
Thank you so much!
Very concise explanation. You're Awesome thanks
Thank You! Glad I can help!
Just found out this video and subcribed, thanks alot, keep up the good work
Thanks for the sub!
Thanks,very useful video!
No problem, thanks for tuning in!
The best tutor fetch api in next js🎉🔥🔥
Many many thanks
Was Helpful. Great Content.
Thank you so much!
Great job bro ... tks 🎉
very nice tutorial, thanks a lot ❤
You're welcome 😊
Your amazing man !!
Thank you soo muchhhhhhh
good teaching, keep it up !
Thank you!
Can i use next js loading page instead of suspense in my code?
good introduction to fetch in next13
Thank you! Glad you liked it!
Hi, I have a question: I am trying to convert a regular React application over to Next.js. In my original application I use CancelTokens (axios) with useRef hook to clear out cancelled api calls, but of course using a useRef hook requires the component be rendered by the client ("use client"), which defeats the purpose of server side rendering. Do I just not need to cancel aborted calls when doing server side rendering? Or is there another way to do it that still allows me to use server side rendering?
Hey, Great tutorial.
But do you know they an issue with the next js 13.4 that after the build, dynamic path [id] won't work. Static export is not supported.
thank you :)
You are welcome!
Hello Brett. Instead of using dummy JSON API, can we use direct data fetching from Database and implement "revalidate" time? Please sugegst.
THANKS SO MUCH
You're welcome!
thanks man,god bless you
You are welcome!
can you show a fix for CORS while using localhost API , getting an fetch error from strapi backend
How would we fetch local data like from an ORM like prisma? Create a separate backend? Are you supposed to fetch your own api routes? Caching custom prisma functions never worked for me
Can any tell me one thing he's fetching data with get api but I have post api how to implement and also have Authorization in header and usertoken save in redux we can not use hook in server component tell so I stuck pls tell me solution
how about jest unit test async server components,? and how solve route handler fetch URL when run local npm run build, its require absolute path online, how solve when actually I don't have ?
what extension are you using at 15:49 that gives you those code suggestions in the gray color on the editor?
Github copilot
hi can someone help me please i want to send data from root page to child of another child can use redux state management?
What will happen, if the endpoint return 404, 401 or any error?
Sir you saved my ass thank u very much .... Appreciate it 👍
You are welcome!
Hi Bret can you please tell whether this fetch that stores only cache data will also cache data for our rest api as well where in we fetch data from database or this caches data only when we call api from external sources?
It should cache all data by default, external or not.
Hey Brett, what extension were you using for the code completion that was populating in 6:44?
Hi, that is GitHub Copilot
Hello Brett, how can I have access to redux states as well as dispatch actions in a server component?
Not 100% sure, never tried it, but since its state maybe not
Subbed
Thanks!
How can i refatch on demand the data ? Let's say I want a button that will trigger a refresh on the getDogs, how can I do that ?
You can do this multiple ways. You can use a window.location.reload() or other methods as well.
Thank you for this video, I have a question, how i do handle the dynamic route if write url /users/11 but there are only 10 users? How I show that the page not exist?
you can create an error.jsx file or notFound file as well. I can make a video going over that, but nobody should be manually typing 11. The docs currently go over those 2 file conventions
fallback is not being displayed for me. the three second timeout happens but does not show the user name with "Loading..." before loading the data, it does nothing. I even cloned your code to test but got the same result. Thoughts?
I would honestly have to see the code. I wouldn't be able to tell you.
Client side fetching ?
I noticed that the Suspense program did not have a "use client". Thought that all react import will require client...
Hi! You saved my life, i've been watching a lot of videos and posts on how to do data fetching and most of them weren't working. I have only a small question.
Im using nextUI table to try and render some users, the issue is that for the table to work the component must be "use client" (client side) And due to this, i can't make the component asynchronous, so in this kind of situation, how can you make a fetch from client side on demand?
You can make a fetch in the api folder and then make a call to your backend from your client component. This will fix your problem. So, make a fetch request in a useEffect to your backend api route. /api/users and then create your server side code there.
Thank you soo much for explaining everything in detail. i Just have one question what if we want to filter the data in server side .I am using use Effect that make it obvious it become a client side but i want to do it in server side way so what should i do? should i make another Api request or what. please provide your feedback thankyou 💝
First off thank you for subscribing to my channel! And you can us the filter method in your server side code instead of the useEffect Hook. You would want to use the filter higher order function and then send the filtered data to client side through json data (NextResponse.json(filtereddata)
thanks bro
You are welcome!
Hey, great tutorial.
I have a question: how to handle input on change data fetching without routing or using link. Basically data should be visible on the same page without redirecting on the same page just update the url(single page app)
Should be able to use a router.refrsh(). This should be placed in a finally block or the try block. Hope this makes sense
hi, i dont remember but nextjs13 have a thing like hover a link and it auto fetch before access the page, could you help me find out ? thank you. and sorry for my english
Yes I have a video on it. It's my Link & Router video about Next.js 13. You will only be able to prefetch data and hover a link if application is in production not in development.
@@brettwestwooddeveloper thank you sir
Please create a tutorial video on deploying a Next.js app to a Digital Ocean Droplet. This would be very helpful.
Thanks for tuning in but I have never done this before.
@@brettwestwooddeveloper If it's possible for you, please give it a try.
The fetch in the beginning is not cached. Returns new dog image on reload. Is this expected in next js latest version ? or am i missing something here ?
By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. You would have to specify you don't want the data cached
@@brettwestwooddeveloper Thanks. I think caching only works in production. How is it working in dev for you ?
During deployment on vercel, i got a typeError on user variable. Seems the user is null or undefined initially and can't have the map array method on it.
Please why is this?
sounds like a TypeScript error, so you need to have a condition before the error like if (user) {your code}. Something like that.
@@brettwestwooddeveloper okay
I'll try that now.
i wrapped my in layout.js file with a context provider in which I pass fetched data from server (I use GET function with fetch). Down in the app I update that data on the server with another POST function (uses fetch). Why the layout is being triggered to rerender every time the POST function fetches data to the server?
Providers must be defined in client outside and then imported into layout file
@@brettwestwooddeveloper thanks. My project was set up this way. The problem was due to my fetch function on the API route having been writing to file which was triggering file watcher to rebuild the entire project ☠
Great video! But I have one question: do we always get params as a default prop on every page ? Or do we have to specify and pass it in like in other react components?
You must specify like react components
@@brettwestwooddeveloper I see thanks.
how did he just create that url for fetching posts out of thin air? Would be nice if someone could explain this to me
which URL, I used a few URLs, I can explain which one
@@brettwestwooddeveloper /post?userId=${id}
"For more content just like this" sounds so familiar 😂
what is the difference between fetching data in server side and client side?
There is a lot of differences, fetching data server allows for a quicker response time, hides keys on the servers, better for cyber protection and much more. Here is a link to the Next.js 13 docs as well that lists the benefits of both: nextjs.org/docs/app/building-your-application/data-fetching
How do I fetch server side rendered data from a component that lives on the client side? Please make a video in it
If you have to fetch it that way, then just make an api backend and run a GET request to it
@@brettwestwooddeveloper thanks sir❤
Hi Brett. Do you perhaps have a video on how to do updates without having to mess with rest api?
what do you mean updates?
@@brettwestwooddeveloper making post / put requests (updating a resource)
I am reading the docs and it says "Second, you can move data fetching lower in the component tree to only block rendering for the parts of the page that need it. For example, moving data fetching to a specific component rather than fetching it at the root layout." I am looking at the data-fetching docs for app router. Is that what you showed at 33:00? Great Video btw!
Thank you! And I yes I think you are referring to the concept of fetch data where needed even if it has been already fetched.
Can some body help me ? I have to create an filter, and call an api with the filter element. So how can i call server side api call with client side state ?
params defined by client : const [filter, setFilter]= useState([])
call server api : const data = getProducts(filter)
you must use the filter higher order function. That will just store the filter information into state
What about error state?
error.js file
Would it be better if we use ReactQuery for data fetching ?
The fetch web api is recommended based on docs for this specific framework
Please show us, how to handle error at the time of data fetching. like, 404, 500, 400
please do PUT, PATCH and POST also. And how can I revalidate data fetching after a POST request?
export const revalidate = 60 // revalidate this segment every 60 seconds
Are you using Copilot or something similar?
yes I am using copilot
How to catch errors and do not prevent the whole site from loading?
Sorry confused on what you are trying to ask
@@brettwestwooddeveloper Error catching
Please make video how to fetch Twitter trending data using nextjs
Great vidoe man, and great explination i have trouble before even with nextjs docs, keep it up sub from me and notifaction on also.
WHERE IS REVALIDATE?????????
And booom, just like that I threw away 15 minutes of my life. Thank God I skipped through the video and didn't watch all 40 minutes cause he didn't show the most crucial thing- how to combine async and hooks (server and client). At 11:25, instead of constantly reloading the page there should be some useState, and some button that we can click on and each time we click we get the new image. That's actually the real issue that we have with the new router not this bs...
I’m glad I contributed to wasting 15 minutes of your life. Maybe your whole life is a waste?🤔
@@brettwestwooddeveloper thanks dude, I'm good-looking at least. You know, that's when you don't need to have funny haircuts or favorable lighting to not look like tiny $h1t. Cheers
@@brettwestwooddeveloper Well that's a very gay thing to say dude... (dont delete replies I've read that)
terrible audio, I hear popping and crackling in my speakers, I am out
bye
Hi Brett, I watched your tutorial and it is perfect, thank you very much, but there is a small problem, the userPage page works but {user.name} does not work for me, you have a solution I can't see the detail page, I would be very grateful if you could help me. :)
Thanks for watching my video! And yes I can help you out. It can be a few issues. First I would console log the user.id to make sure you are getting a value. If you aren't getting a value then maybe the url for the fetch request is wrong. Let me know and keep me updated
One of the cleanest explaination i have ever heard in English 🤍its that good uk....
Thank you! Glad you liked it!