When taking this approach, be very aware of layout shift. If the placeholder is not the same size as the final content it can lead to an even worse experience than loading everything server-side.
You can place a ghost skeleton with css in the size of the actual content that is waited for and being loaded. Not really an issue, am I missing anything?
Great introduction to Lazy Loading, here's what I think would be the next steps for intermediate to advanced Loading State handling: 1 ) Lazy Loading 2 ) React Query 3 ) Replicache-like product integration
@@jitxhere I haven't tested this case, but i think that since one of react query's key feature is cache handling, it would be better to keep that part of data on the client for easy handling of cache invalidation
2) is awesome for handling client-loading behaviour. I feel like 1) is more about performance than it is about handling loading, but your points are great if you wanna get into making the UX even better
@@jitxhere With some finagling you can fill up react query cache on the server and stream that to the client. I'm not sure how/if it works with app dir (yet, I'm sure when app is fully released and stable Tanner+team will think of something), but when using pages and getServerSideProps you can definitely do it. tRPC has this built in. Granted that's not a server component but getServerSideProps, but again, when appDir is stable there will probably be some function you can call to prefetch query cache and stream that, so you'd get the benefits of both suspense/server components/ssr, and client side react query for refetching and mutations and all that. TL;DR works great with /pages and getServerSideProps in nextjs, /app and server components will likely come soon
Instead of a text saying Loading... you could also use a component for example" "and in the Loader component have for example a loading animation from Chakra UI
It all depends on the situation, and the result you are striving for. 1. A query that runs for 5 seconds is a terrible query that needs to be redone. 2. We had a similar "good implementation" on the old project and there were many problems with optimization and performance improvement. Now we have a new project, we made it according to a "bad implementation" and all the indicators are at their height, all requests are in one place and they are easy to track and thus all requests are asynchronous, i.e. the page is loaded according to the longest request. I.e. if the author says that this is bad and this is good, you do not need to run and do as the author says, you need to think with your head and decide what is best for your project.
It really is. The current direction of web dev and react certainly is not without criticism (especially regarding server components) but the general tendency is awesome
yes, but why would you use a client component over a server component when you can benefit from running things on the server (you can fetch data easily with SSR)? wouldn't make your page slower with client components (no need for hooks or states which make it slower)?
all of this code is running on the server, suspense is sending out the loading state in html, and when the promise resolves it sends out the images, without ever needing to transport the js bundle, hence faster
Hi! I actually implemented something similar on my next app with Suspense and it works perfectly when I reload the page. However, whenever I navigate to the page from some other page, it still waits for all the data to fetch before showing me any content 😢.
At 04:05 I would highly recommend you write "export default Recommendation as unknown as (props: Props) => JSX.Element" instead of ignoring the typescript error. Otherwise you also wont see any typescript errors if you pass invalid props to that component.
hi ! is it necessary to not use material UI with next js inorder to take advantage of next js server components ? || because material UI needs to use a lot's of context providers such as the theme provider !!
So the recommendations are user/client specific and only needed on the client right? So why did you not use 'use client' for the recommendation component?
Because data fetching is more intuitive in server components, you ship a smaller bundle size, and handling loading and error states like this is also easier than doing it client-side. Even if react-query does an awesome job at making that easy too
It's a react feature, not NextJS - so yeah. You can split components from your bundle by importing them dynamically and specify the loading behavior very granularly using suspense
ปีที่แล้ว
Wow!! You really keep things simple man!! [... AWESOME]; Thank you very much!!
I wonder what benefits this has over client-side loading? I guess the benefit is that its a server component and thus less JavaScript is needed on the client. Anything else?
The whole thing about server components and their loading state was unclear to me for a pretty long time. The loading.tsx is just on a per-page basis, so this is so cool for super granular control over your server component loading states
@@joshtriedcoding That's true. But the part you load lazily at the bottom could've also been loaded client side with something like SWR. I'm wondering if a server component + suspense boundary has major benefits over client-side loading. I wonder if search engine crawlers can see the section that's "behind" a suspense boundary 🤔
@@codinginflow Ah I get what you mean, good question. To me it feels more intuitive to write on the server side, and either way they'd have to wait for the data to arrive
So i would basically have to recreate a Image component which can be wrapped with a suspense right? what about handle it with state with onLoadingComplete to show a skelleton while waiting? It works with one image, but rendering an array of images is not working right for me as I am testing it right now.
Forgive me if this is a stupid question; but what if you're working with a solution like hitting a rest API or using an ORM to get data where you might not know individual keys ahead of time (getting all posts from a database or getting all github repos from the github rest api) and you fetch all of your data at once anyway?
Do you think React-Query still nessesary when NextJS is such powerful like this? NextJS + ReactQuery to me is a little bit overkilled. What is your opinions?
In my opinion absolutely not. React query is AWESOME in Next for any client-side data fetching. Love it. Goes super well together. I'd recommend giving it a shot, I think you might just like it too!
I’d still use React Query to fetch data from client events like on click or on submit for example. That being said, I think it’s difficult to find use cases for useQuery in Next JS
didnt know about the react suspense component :b I do remember that the images has a lazy loading property as default as well (recommendation.tsx when returning an image)
hey josh can you make video on authentication I next 13.4 with custom credentials provider and also how to make layout for admin routes and login route
Do we not fall into this issue if we are using plain react and not next js? Just wondering because after the DOM is painted then we fetch the data using useEffect
That’s nice, but I kind of thought you were going to propose a new UX rather than the fallback skeleton. That would be neat, like a brand new color or something.
but wouldn't it be better to have all of the data finished loading then show them to the user, this will show the user the complete fetched data instead of a bunch of loading states around the page
@@joshtriedcoding great explaination man. Is there a way to use Sanity to make a blog using NextJS but when I write the articles I wanna save them as .md files so that they load faster into the page? does that make sense? Because I want an easy way to modify the posts and save them as .md files so that they load much faster than fetching them from api and getting a json back. I hope I'm clear on my question
@@mohammed.haydar Ahh I get what you mean. That's something I've never tried out with sanity actually. But that seems like a good use-case, even if sanity should not support that, there surely is a way to do this
Thanks for this wonderful video... I'm getting the below error while using suspense in my Nextjs project and with React 18 Error: ReactDOMServer does not yet support Suspense.
![ประสบการณ์ จ้าง Developer ที่ผมจะไม่มีวันลืม [ภาค2]](http://i.ytimg.com/vi/pZbsSDRrmXA/mqdefault.jpg)
NOOO I accidentally deleted the top comment trying to remove a spambot 😭😭 sorry to the person who wrote that, it was so kind too.
lol
When taking this approach, be very aware of layout shift. If the placeholder is not the same size as the final content it can lead to an even worse experience than loading everything server-side.
Thanks
You can place a ghost skeleton with css in the size of the actual content that is waited for and being loaded. Not really an issue, am I missing anything?
@@botan1996 But how do you know the height of the content? And if it changes you'll have to keep changing the height then...
@@joshuasingh854 exactly lol, i'd rather see a loading spinner
Great introduction to Lazy Loading, here's what I think would be the next steps for intermediate to advanced Loading State handling:
1 ) Lazy Loading
2 ) React Query
3 ) Replicache-like product integration
I am curios about is there any place for react query in server components
@@jitxhere I haven't tested this case, but i think that since one of react query's key feature is cache handling, it would be better to keep that part of data on the client for easy handling of cache invalidation
2) is awesome for handling client-loading behaviour. I feel like 1) is more about performance than it is about handling loading, but your points are great if you wanna get into making the UX even better
@@jitxhere With some finagling you can fill up react query cache on the server and stream that to the client. I'm not sure how/if it works with app dir (yet, I'm sure when app is fully released and stable Tanner+team will think of something), but when using pages and getServerSideProps you can definitely do it. tRPC has this built in.
Granted that's not a server component but getServerSideProps, but again, when appDir is stable there will probably be some function you can call to prefetch query cache and stream that, so you'd get the benefits of both suspense/server components/ssr, and client side react query for refetching and mutations and all that.
TL;DR works great with /pages and getServerSideProps in nextjs, /app and server components will likely come soon
now I understand the suspense well, thanks josh 👊
It’s a pretty simple concept really with such a big payoff. Cheers dude!
ngl I was literally trying to make this work on my project! Thanks man!
Instead of a text saying Loading... you could also use a component for example" "and in the Loader component have for example a loading animation from Chakra UI
yessir. Personally prefer skeletons over loading spinners but I guess it's preference
@@joshtriedcoding i havent thought of using skeleton, good idea :)
It all depends on the situation, and the result you are striving for. 1. A query that runs for 5 seconds is a terrible query that needs to be redone. 2. We had a similar "good implementation" on the old project and there were many problems with optimization and performance improvement. Now we have a new project, we made it according to a "bad implementation" and all the indicators are at their height, all requests are in one place and they are easy to track and thus all requests are asynchronous, i.e. the page is loaded according to the longest request. I.e. if the author says that this is bad and this is good, you do not need to run and do as the author says, you need to think with your head and decide what is best for your project.
I just found the channel few days back, and now I am addicted....❤❤❤❤
Hey you should make a video on parallel routes and intercepting routes
Is there any use case you’d think fits well into a video?
Have /login rendered in a modal if the link has been clicked manually
@@joshtriedcoding Also an instagram-like post modal that's its own page when refreshed/linked directly
@@CanRau ah that is actually a cool use-case, cheers man
@@joshtriedcoding @Cau Rau Gave A Good Idea
Data streaming is so badass. I feel like we're experiencing prime of web development
It really is. The current direction of web dev and react certainly is not without criticism (especially regarding server components) but the general tendency is awesome
If we would use a client component, wouldn't that also solve the problem ?
yes, but why would you use a client component over a server component when you can benefit from running things on the server (you can fetch data easily with SSR)? wouldn't make your page slower with client components (no need for hooks or states which make it slower)?
If you wanna get into more granular client-loading-behaviour, I 100% recommend react query (or similar) for that
all of this code is running on the server, suspense is sending out the loading state in html, and when the promise resolves it sends out the images, without ever needing to transport the js bundle, hence faster
Hi! I actually implemented something similar on my next app with Suspense and it works perfectly when I reload the page. However, whenever I navigate to the page from some other page, it still waits for all the data to fetch before showing me any content 😢.
At 04:05 I would highly recommend you write "export default Recommendation as unknown as (props: Props) => JSX.Element" instead of ignoring the typescript error.
Otherwise you also wont see any typescript errors if you pass invalid props to that component.
Latest Typescript beta supports async TSX Components 😊
Lol the way he was going on about thought it would be something more interesting than suspense 😂
Don’t you dare call suspense boring 🤨📸
hi ! is it necessary to not use material UI with next js inorder to take advantage of next js server components ? || because material UI needs to use a lot's of context providers such as the theme provider !!
This channel is REALLY underrated
cheers dude
+1 for the non-clickbait (and the content). Thank you
cheers!
Why not iterate over the array of images itself?
1:55
Images.map(….
added them later on, yeah works too
🔥🔥🔥 man youtube was lacking u , hope u keep up the amazing vids and good luck on your way
That’s very nice of you, cheers man
So the recommendations are user/client specific and only needed on the client right? So why did you not use 'use client' for the recommendation component?
Because data fetching is more intuitive in server components, you ship a smaller bundle size, and handling loading and error states like this is also easier than doing it client-side. Even if react-query does an awesome job at making that easy too
loading states are killing your user experience so let's implement loading states XD
PROPER loading states!
Can't we use Parallel route here? It's recommended in the docs too.
Does suspense also work for the pages directory 🤔
It's a react feature, not NextJS - so yeah. You can split components from your bundle by importing them dynamically and specify the loading behavior very granularly using suspense
Wow!! You really keep things simple man!! [... AWESOME]; Thank you very much!!
you are right.the first sucks. your solution is nice.thank you it was really helpful .i am taking your next courses .
Should we use the axios and react query in nextjs app directory OR native fetch?
Excellent video, why don't you mention the loading.tsx file for this purpose?
Good point, guess I've used it so much at this point I assumed it as known. Probably isn't though
am i correct that loading.tsx is for the whole page? so the whole page will be loading... until all datas are fetched?
I wonder what benefits this has over client-side loading? I guess the benefit is that its a server component and thus less JavaScript is needed on the client. Anything else?
The whole thing about server components and their loading state was unclear to me for a pretty long time. The loading.tsx is just on a per-page basis, so this is so cool for super granular control over your server component loading states
@@joshtriedcoding That's true. But the part you load lazily at the bottom could've also been loaded client side with something like SWR. I'm wondering if a server component + suspense boundary has major benefits over client-side loading.
I wonder if search engine crawlers can see the section that's "behind" a suspense boundary 🤔
@@codinginflow Ah I get what you mean, good question. To me it feels more intuitive to write on the server side, and either way they'd have to wait for the data to arrive
Super helpful - many thanks!
Happy to hear that. Cheers
This is the same as using dynamic in Next right?
So i would basically have to recreate a Image component which can be wrapped with a suspense right? what about handle it with state with onLoadingComplete to show a skelleton while waiting? It works with one image, but rendering an array of images is not working right for me as I am testing it right now.
I knew about the Suspense and Lazy loading
in react but i would never know i could use it this way
Forgive me if this is a stupid question; but what if you're working with a solution like hitting a rest API or using an ORM to get data where you might not know individual keys ahead of time (getting all posts from a database or getting all github repos from the github rest api) and you fetch all of your data at once anyway?
Do you think React-Query still nessesary when NextJS is such powerful like this? NextJS + ReactQuery to me is a little bit overkilled. What is your opinions?
In my opinion absolutely not. React query is AWESOME in Next for any client-side data fetching. Love it. Goes super well together. I'd recommend giving it a shot, I think you might just like it too!
I’d still use React Query to fetch data from client events like on click or on submit for example. That being said, I think it’s difficult to find use cases for useQuery in Next JS
so that still using server side component? I thought only client side components can use loading like that
Nope, this works amazing for server components
Haven't they already fixed asynchronous components?
Thought so too??!
didnt know about the react suspense component :b I do remember that the images has a lazy loading property as default as well (recommendation.tsx when returning an image)
Suspense and loading.jsx are different in nextjs?
Suspense allows you to handle loading behavior for individual components, loading.tsx is for a certain route
@@joshtriedcoding thanks my friend I subscribe now.
Suspense is like usetransition I think.
Can you please teach about parallel routes and intercepting routes in the nextjs... I can't understand how it works
hey josh can you make video on authentication I next 13.4 with custom credentials provider and also how to make layout for admin routes and login route
Super cool. thanks :)!
You’re welcome champ
Do we not fall into this issue if we are using plain react and not next js?
Just wondering because after the DOM is painted then we fetch the data using useEffect
can i do this in react with vite?
yeah suspense is a react feature, not specific to next
I thought the async server type error was fixed? (Not a next js / react dev)
I thought so too?? No idea why this happened again. Just very recently too
4:02 They have it already for so long time.... I'm disappointed that typescript didn't fixed that yet.
Great vid man thanks for sharing that knowledge. Those thumbs kinda sucks though 😅
That’s nice, but I kind of thought you were going to propose a new UX rather than the fallback skeleton. That would be neat, like a brand new color or something.
You're amazing man
Cheers dude
Show Skeleton Instead And Boom U got it
Simple but this boy is right
Awesome as always
Cheers dude
4:54 wow
but wouldn't it be better to have all of the data finished loading then show them to the user, this will show the user the complete fetched data instead of a bunch of loading states around the page
Then you page load will be substantially longer, resulting in a worse UX. Of course you can, I wouldn’t recommend it tho
@@joshtriedcoding great explaination man. Is there a way to use Sanity to make a blog using NextJS but when I write the articles I wanna save them as .md files so that they load faster into the page? does that make sense? Because I want an easy way to modify the posts and save them as .md files so that they load much faster than fetching them from api and getting a json back. I hope I'm clear on my question
@@mohammed.haydar Ahh I get what you mean. That's something I've never tried out with sanity actually. But that seems like a good use-case, even if sanity should not support that, there surely is a way to do this
Thank You.
This still has loading states though? 😂 am I not understanding the video title?
"Improperly handled loading states might be negatively affecting your user experience"
Dope content!
thanks champ
sir more project tutorials please
amzing
banger
Awesome
Suck counter: 8 😅
I dare you to turn this into a drinking game
Super
Wrong title: How to unsuck your UX
👍
супер!
Sorry was disappointed. There was no indication this is just a React solution.
useTransition is also very powerful for these cases ^_^
Thanks for this wonderful video... I'm getting the below error while using suspense in my Nextjs project and with React 18
Error: ReactDOMServer does not yet support Suspense.