NOOO I accidentally deleted the top comment trying to remove a spambot 😭😭 sorry to the person who wrote that, it was so kind too.

@19.pritamgiri73

2 ай бұрын

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.

@jeankaelaugustin641

10 ай бұрын

Thanks

@botan1996

8 ай бұрын

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?

@joshuasingh854

2 ай бұрын

@@botan1996 But how do you know the height of the content? And if it changes you'll have to keep changing the height then...

ngl I was literally trying to make this work on my project! Thanks man!

I just found the channel few days back, and now I am addicted....❤❤❤❤

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

@jitx2797

Жыл бұрын

I am curios about is there any place for react query in server components

@abhiramsatpute

Жыл бұрын

@@jitx2797 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

@joshtriedcoding

Жыл бұрын

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

@helleye311

Жыл бұрын

@@jitx2797 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 👊

@joshtriedcoding

Жыл бұрын

It’s a pretty simple concept really with such a big payoff. Cheers dude!

🔥🔥🔥 man youtube was lacking u , hope u keep up the amazing vids and good luck on your way

@joshtriedcoding

Жыл бұрын

That’s very nice of you, cheers man

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?

@joshtriedcoding

Жыл бұрын

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

@codinginflow

Жыл бұрын

​@@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 🤔

@joshtriedcoding

Жыл бұрын

@@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

Should we use the axios and react query in nextjs app directory OR native fetch?

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 !!

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

@joshtriedcoding

Жыл бұрын

yessir. Personally prefer skeletons over loading spinners but I guess it's preference

@XxbankerboomxX

Жыл бұрын

@@joshtriedcoding i havent thought of using skeleton, good idea :)

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?

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.

you are right.the first sucks. your solution is nice.thank you it was really helpful .i am taking your next courses .

Super helpful - many thanks!

@joshtriedcoding

Жыл бұрын

Happy to hear that. Cheers

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 😢.

Great vid man thanks for sharing that knowledge. Those thumbs kinda sucks though 😅

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?

@joshtriedcoding

Жыл бұрын

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!

@daydreamer9469

11 ай бұрын

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

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.

@christiangoebel8895

Жыл бұрын

Latest Typescript beta supports async TSX Components 😊

Can't we use Parallel route here? It's recommended in the docs too.

This channel is REALLY underrated

@joshtriedcoding

Жыл бұрын

cheers dude

+1 for the non-clickbait (and the content). Thank you

@joshtriedcoding

Жыл бұрын

cheers!

I knew about the Suspense and Lazy loading in react but i would never know i could use it this way

Can you please teach about parallel routes and intercepting routes in the nextjs... I can't understand how it works

Data streaming is so badass. I feel like we're experiencing prime of web development

@joshtriedcoding

Жыл бұрын

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

Awesome as always

@joshtriedcoding

Жыл бұрын

Cheers dude

Lol the way he was going on about thought it would be something more interesting than suspense 😂

@joshtriedcoding

Жыл бұрын

Don’t you dare call suspense boring 🤨📸

Super cool. thanks :)!

@joshtriedcoding

Жыл бұрын

You’re welcome champ

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)

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?

@joshtriedcoding

Жыл бұрын

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

You're amazing man

@joshtriedcoding

Жыл бұрын

Cheers dude

Dope content!

@joshtriedcoding

Жыл бұрын

thanks champ

Hey you should make a video on parallel routes and intercepting routes

@joshtriedcoding

Жыл бұрын

Is there any use case you’d think fits well into a video?

@CanRau

Жыл бұрын

Have /login rendered in a modal if the link has been clicked manually

@TeaganAtwater

Жыл бұрын

@@joshtriedcoding Also an instagram-like post modal that's its own page when refreshed/linked directly

@joshtriedcoding

Жыл бұрын

@@CanRau ah that is actually a cool use-case, cheers man

@MDKhan-ww5tp

Жыл бұрын

@@joshtriedcoding @Cau Rau Gave A Good Idea

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

This is the same as using dynamic in Next right?

loading states are killing your user experience so let's implement loading states XD

@joshtriedcoding

Жыл бұрын

PROPER loading states!

Excellent video, why don't you mention the loading.tsx file for this purpose?

@joshtriedcoding

Жыл бұрын

Good point, guess I've used it so much at this point I assumed it as known. Probably isn't though

@zhongtom2625

11 ай бұрын

am i correct that loading.tsx is for the whole page? so the whole page will be loading... until all datas are fetched?

If we would use a client component, wouldn't that also solve the problem ?

@kawtar1505

Жыл бұрын

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)?

@joshtriedcoding

Жыл бұрын

If you wanna get into more granular client-loading-behaviour, I 100% recommend react query (or similar) for that

@aryankumar87771

Жыл бұрын

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

Thank You.

Does suspense also work for the pages directory 🤔

@joshtriedcoding

Жыл бұрын

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

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

amzing

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.

Suspense and loading.jsx are different in nextjs?

@joshtriedcoding

Жыл бұрын

Suspense allows you to handle loading behavior for individual components, loading.tsx is for a certain route

@kenshinhimura3140

Жыл бұрын

@@joshtriedcoding thanks my friend I subscribe now. Suspense is like usetransition I think.

Awesome

banger

so that still using server side component? I thought only client side components can use loading like that

@joshtriedcoding

Жыл бұрын

Nope, this works amazing for server components

Super

Haven't they already fixed asynchronous components?

@joshtriedcoding

Жыл бұрын

Thought so too??!

sir more project tutorials please

I thought the async server type error was fixed? (Not a next js / react dev)

@joshtriedcoding

Жыл бұрын

I thought so too?? No idea why this happened again. Just very recently too

4:54 wow

can i do this in react with vite?

@joshtriedcoding

Жыл бұрын

yeah suspense is a react feature, not specific to next

4:02 They have it already for so long time.... I'm disappointed that typescript didn't fixed that yet.

Why not iterate over the array of images itself? 1:55 Images.map(….

@joshtriedcoding

Жыл бұрын

added them later on, yeah works too

👍

Simple but this boy is right

супер!

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

Жыл бұрын

Then you page load will be substantially longer, resulting in a worse UX. Of course you can, I wouldn’t recommend it tho

@mohammed.haydar

Жыл бұрын

@@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

@joshtriedcoding

Жыл бұрын

@@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

This still has loading states though? 😂 am I not understanding the video title?

@joshtriedcoding

Жыл бұрын

"Improperly handled loading states might be negatively affecting your user experience"

Wrong title: How to unsuck your UX

Suck counter: 8 😅

@joshtriedcoding

Жыл бұрын

I dare you to turn this into a drinking game

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.