Next.js 13 - Data Fetching & Suspense Boundaries
HTML-код
- Опубликовано: 1 окт 2024
- Next.js 13 data fetching is the topic of this video. We will learn how to handle data fetching in the app folder and how to use React suspense boundaries to enable granular loading UI for data fetching. We will build a simple dashboard application that fetches data from two endpoints.
Next.js 13 - How to use App folder & Layouts: • Next.js 13 - How to us...
Learn Programming (Skillshare FREE trial): skl.sh/3cYxUP5
My courses:
React basics: skl.sh/2XAKn7u
HTML & CSS for beginners: skl.sh/34wvGUH
Draft.js basics: skl.sh/3cJ5Hw4
💻 MY GEAR
MY CODIGN LAPTOP: amzn.to/3MI90ci
MY MOUSE: amzn.to/3mr3no9
MY KEYBOARD: amzn.to/3GIoMjh
MY MICROPHONE: amzn.to/3KCDPfv
MICROPHONE BOOSTER: amzn.to/43trLWB
MY MICROPHONE ARM: amzn.to/3oaf5DW
MY CAMERA: amzn.to/3UxyvyJ
MY STREAMING LIGHT: amzn.to/3KE0PuE
Connect with me:
Website: tuomokankaanpa...
My newsletter: tuomokankaanpa...
Twitter: / tumee
Skillshare: www.skillshare...
#nextjs #suspense #react
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
How to solve this error?
Great job,the first to talk about this new NextJs 13.
It will be great if you could make a video explaining the error and template to, but amazing job ,new subscriber here!
Great to hear and thanks for the feedback!
Good demo. A bit slow to my taste, 1.75 worked. Or maybe more editing and skipping things eg. Fireship.
I'm not sure if the separation of loading states is a good design. The loading waterfall is a bit ugly imo.
Good job anyways & it's nice to see Finn dev channel.
Thanks for the feedback!
learned something new again, thanks! :)
btw, have you tried to show images with fetching? I'm trying, but can't get images loaded (pending status), are there any tricks with it in new app directory?
Great to hear! I actually haven't tried showing images while fetching, that is interesting that they aren't working. Gotta test that out!
Doesn't this break the single responsibility principle? In order for Suspense work you have to do the data fetching inside the component you are wrapping in Suspense, but that breaks the single responsibility principle, as the component is now responsible for data fetching AND rendering. Let's say I want to fetch an array of companies from the parent component, then pass them to the Companies component as a prop, is there a way that can be done? I tried it but it just hangs the entire page until the data fetches, probably because it's fetching inside the parent component.
How does that work with reusable components, to save duplication to multiple folders?
I wouldn't save it multiple times, I would just import it from the path it is in :)
im trying to do this in typescript but getting
return type 'Promise' is not a valid JSX element.
Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786)
how to use suspense with useEffect as we do not only need to bring data, we need to hit other apis too, i am struggling to use suspense with useEffect
Amazing 🔥🔥
Cheers!
Wow, first Finnish developer)
Yes sir!
i got this Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
still trying to figure it out.
Did u figure it out? From the looks of it might be that you are rendering the items before the promise is resolved
Dude sounds like Clank
Sup, amazing video! But I have a problem. VS Code showing a message:
'' 'Header' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. ". And it works fine in the browser, has this ever happened to you?
Thanks man! It’s hard to say without seeing the code but check out this thread hopefully it is helpful stackoverflow.com/questions/62702485/component-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not
can you still do this with local json data?
I can’t see why not!
Hello, thanks for the video, I have a question, at what point is it useful to use suspense rather than letting the component loading please? Is it specific to data? And last question, I'm building a site with strapi, can I put the fetch calls in the /api folder on the server or should I create a lib folder in the app and put all my fetch requests (I can also put it on the page like you did but it's to keep everything separate) thanks for your answer
too small look dude to watch on a mobile
Sorry to hear that, it’s prolly indeed better to watch on desktop!
thanks... what about On-Demand Revalidation data fetching with next js 13 ??
Good question! I’m planning to make a video about this!
No more need to use getServersideProps?
Yeah you dont need that with nextjs 13
Thnxs man. I needed a refresh on how that worked now. My lint was going frakking mad
Glad to help!
github Repo ????
Here: github.com/tumetus/next-js-13-data-fetching-test
Explained it very simply..thank you
Great to hear!
I had to give you a subscription cuz no one else is churning out content on these experimental features like you.
Thanks I appreciate it!
This is really cool! I do have one question though. Wouldn't having those loading components produce a lot of Cumulative Layout Shift issues? Google could really ding you
Good question, I would say that it also depends on what kind of stuff you display for loading states
@TuomoKankaanpaa is there any method to refetch the data after post reqest in client component? Cuz after router.replace() to server component where data is fetched i need to refresh to see new data.
There is a way to do refetching that is described here beta.nextjs.org/docs/data-fetching/mutating
There is a way to do refetching that is described here beta.nextjs.org/docs/data-fetching/mutating
Great video! Could you please add the code in Github? Where are the APIs stored, in which format? I'm stucked....thank you
Here is the code for the API server github.com/tumetus/json-api hope it helps!
@@TuomoKankaanpaa thanks! In your video we don't see where the folder api is saved. Is it in the app folder? is the Github code done with Next.js 13? In your video you have "users" defined as an object in Github you have a list defined as const users = [{....}].
@@patite3103 the github code is using next.js 13 also. You need to clone the repo and then run the server locally with e.g. "yarn dev" and you can then access it in localhost:3000 or 3001
Love your accent and teaching style bro
Thanks, great to hear! 🙌
user component is server side render or static page at production
I'm afraid I'm not sure what you mean
Great job Tuomo, your videos are amazing. want more videos for nextjs 13
Thank you Ashik! Anything specific about nextjs 13 you would like to see a video about?
You provided a great explanation, thanks
Glad to hear you liked it!
How to use relative fetch paths, so instead of fetch("localhost:3000/api/*" to just use fetch("/api/whatever");
I explain the use of relative paths later in the video so check out the end half of the video!
@@TuomoKankaanpaa thank you for the great content!
Can't find this point, can you please add timestamp for it?
I am struggling with performing fetch request to my secured api (using next-auth) from a server component , when using the full path the session is null
@@bennagar Hey Ben! It indeed isn't in this video, my bad! You can find how I handle it with rewrites in here: ruclips.net/video/Y1FwWlBFUi8/видео.html
Please explain “use client” coz I couldn’t use usestate normally as I would use. Thanks in advance
Planning on making video about server and client components. ”use client” will be used in that vid!
@@TuomoKankaanpaa thanks 🙏
@@hudheyfa the video on server and client components went just live!
Yours videos are great! Thank you for yours work.
Glad to hear that you like them!
Awesome explanation! Thanks a ton
Great to hear that you liked it!
Good job Tuomo! 👏👏👏💯
Thanks man!
What theme are you using? Nice one 🙂
bump
It's the Aura Dark theme :)
Suspense is cool 🔥🔥
Indeed!
The way you explain whole thing is also cool 🔥 😎
@@TuomoKankaanpaa can you make video about how to use search with api data in Nextjs 13 in optimal way ?
@@utkarshseth3082 Sorry I'm not 100% sure what you mean, can you elaborate a bit more? :)
@@TuomoKankaanpaa like in normal Nextjs projects if we want fetch some data with search condion we use useffect and Usestate with input onChage method ,
My question- is there any optimal way for this that you for production level app ? I don't have much experience with recat that's why or my be any simpler way in nextjs 13 that you might have any idea about this ... 😅