Asset loading in React

[@ashleyredman]

Absolute quality content, looking forward to React 19.

[@RyanToronto]

Thanks! I can't wait for React 19

[@xorlop]

Your excitement is contagious!

[@RyanToronto]

Woohoo, thanks! :)

[@thisweekinreact]

Greatly explained! I thought maybe using a larger high-res image on the details page could be a cool demo too since we'd see the image appear after navigation and the transition could also fix it?

[@RyanToronto]

Wow thank you! I'm a huge fan of this week in React! Yes an image component that suspends is a great idea! I think I can make that work, sounds like a great idea for my next video :)

[@mryechkin]

Great stuff! Clever way to show that loading spinner with "data-transitioning" too - I'll have to remember that :)

[@RyanToronto]

Thanks Mykhaylo! That data-transitioning styling is a little trick Sam showed me. It's very handy!

[@jitxhere]

Thank you for awesome explanation. Easy clear and concise. I have also taken your buildui course. It was very helpful

[@RyanToronto]

Thank you, that's great to hear! Are there topics on RSCs you'd like to see covered?

[@RodrigoMallmann1]

one issue I dont know would happen is this onClick conflicting with the link. does it is able to still work as a link, opening in a new tab and such?

[@RyanToronto]

Good question! It still functions as a link (can cmd click, open in new tab, etc). That's the reason we use , so all the normal behavior still works, but we can intercept the normal "clicks" with onClick to start a transition.

[@xNReaperx]

Love your videos!

[@LutherDePapier]

Would you argue that "dynamic CSS stylesheets" like these are an example of something that couldn't be as efficiently achieved with Tailwind? I was to believe Tailwind would replace stylesheets altogether, but this seems to be a clear example where they would be preferrable.

[@RyanToronto]

Great question! I think you could build these sorts of dynamic pages using Tailwind as well. It's really up to you!

[@aaronvandenberg5863]

Really helpful vid! 👏

[@RyanToronto]

Thanks!

[@Ali-sc6dh]

Actually wouldn't the stylesheet not unloading be a concern regardic tailwind css ? Eventhough it is atomic css, the order of css declaration will matter especially for media query styles. Wouldn't this break if for exemple you had a md:text-green in your previous css but then you load a new tailwind css stylesheet that only has text-red which will take priority regardless of the media query ?

[@dealloc]

Yes it would be a problem. The solution is to serve your Tailwind CSS from a global CSS file. It's OK to do so, because Tailwind scales linearly as it doesn't contain duplicate CSS. This is the beauty of utility class names. Additionally that CSS can be cached by the browser. This means you avoid duplication and can ship only the necessary CSS for the given page through assets loading, resulting in less bandwidth and faster load times for the user. But rethink using asset loading at first, because it can negatively impact the user experience where it doesn't need to. This is not unique to Tailwind either, you should always try to keep your common CSS global, even if it may contain classes that are used a few places; as long as they are part of the overall design. Asset loading is only really necessary for specific cases where that additional CSS is used infrequently, or user customizable (the books example here is not such a good example IMO).

[@Ali-sc6dh]

@@dealloc Yeah great take, thanks for the tips !

[@RyanToronto]

Good to know about tailwind's responsible styles needing a specific load order. And I agree, tailwind should be loaded once globally. Tailwind is not a good candidate for asset loading. Why is books not a good example? The CSS that's loaded through asset loading is only specific to that book and it's used infrequently... seems to meet of your criteria?

[@dealloc]

@@RyanToronto You're right, it would be a good example at scale. I was too quick on the keys before thinking about the potential use-cases beyond a few books. My apologies.

[@RyanToronto]

@@dealloc User specific/customized styles is a great example too, really like that idea