Deferring Data + Streaming in Remix
Vložit
- čas přidán 29. 06. 2024
- Learn how to reduce your website's load time by deferring and streaming data using defer, Suspense, and Await.
Play with this demo 👉 remix-movies.pages.dev/
Checkout the code 👉 github.com/remix-run/example-...
00:00 - Project overview
00:45 - Previewing the deployed site
01:45 - Real-world profiling with WebPageTest
02:46 - What are we waiting on?
03:55 - Using defer to improve the page speed
07:32 - Previewing the site with deferred data
10:21 - Deferred explained
12:06 - Real-world profiling with deferred data
Learn more at remix.run - Věda a technologie
i do owe this framework an apology
You're forgiven
😁@@Remix-Run
These videos are so good. Ryan is such a great teacher.
Very cool demo. Its explanation is so clear
Amazing as usually!
This is really cool! Thanks for posting.
This API is so brilliant. I love it.
I know it's an escape hatch, but loader context is great ❤
Special thanks for doing the explainer videos in just javascript and not TS. Less overhead!
i wish at my work there were using remix lmao.
How can we reproduce the defer ? it is any way to do it ?
I love the videos, thanks for that. great format, short and really friendly
How did you get these breadcrumbs and move the close window row into the top top bar?
thanks to makes me trust on react again
Nice video Ryan 👍 Can you get thesame effect with an external backend service??
yes, i am using tmdb api with defer
You can defer any promise. As long as that service is called through a promise (like a fetch request) defer it
Can you do a video on integrating remix with an external backend api with features like authentication?
Look at the Remix Stacks. Several of them have authentication with various database services.
hi ryan, I'm learning remix and a doubt came up, since I've seen that in several demos you disable javascript, do you think it should be a goal that any page should work without js? I've seen myself trying to get the same functionality in both scenarios but I'm not sure if it makes sense, I would like to know what you think. thanks!
Yes and no. Barely any user disables JavaScript today; however, optimizing for "before JS loads" makes totally sense. E.g. imagine you're on a train and the internet is suuper slow - should the slow JS block you from submitting a form, clicking a link, ...? Probably not. So making sure things work before JS loads enhances user experience for users with slow internet and/or slow devices.
very cool, and then they said, server rendering should have all the data streamed in the html already :)
Defer still good for SEO ?
I was try it and what in pagesource it seem that show loading... component
Cloudflare, nice!
@Remix any idea why the ui is blocked until the deffered promise is resolved ?
how do i add the type saftey like why don't i am getting suggestion for the env ? in the context and to the particular schema?
What code editor is it?
VS Code, but not sure about the config
Is "defer" only available for Cloudfare?
Nope! Your host just needs to provide streaming. From the docs
"Ensure your hosting provider supports streaming, not all of them do. If your responses don't seem to stream, this might be the cause."
Can you address the time out issue we are getting with defer in your github issues? We can't use this feature because of it @Remix-Run
wish i could use remix in react native/expo
remix being bought be a tier 2 tech company like shopify has made it lose a lot of steam. should have stayed independent.
what an insane take lmao