Deferring Data + Streaming in Remix

Поделиться
HTML-код
  • Опубликовано: 11 июл 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
  • НаукаНаука

Комментарии • 35

  • @ibrahimmohammed3484
    @ibrahimmohammed3484 5 месяцев назад +35

    i do owe this framework an apology

  • @DEV_XO
    @DEV_XO 5 месяцев назад +10

    These videos are so good. Ryan is such a great teacher.

  • @yomaru_1999
    @yomaru_1999 5 месяцев назад

    Very cool demo. Its explanation is so clear

  • @AlexBlack-xz8hp
    @AlexBlack-xz8hp 4 месяца назад

    This is really cool! Thanks for posting.

  • @mateuszbuskiewicz2115
    @mateuszbuskiewicz2115 5 месяцев назад

    This API is so brilliant. I love it.

  • @NunoCostapt
    @NunoCostapt 5 месяцев назад

    Amazing as usually!

  • @landonyarrington7979
    @landonyarrington7979 5 месяцев назад +1

    I know it's an escape hatch, but loader context is great ❤

  • @StingSting844
    @StingSting844 5 месяцев назад +1

    Special thanks for doing the explainer videos in just javascript and not TS. Less overhead!

  • @apidas
    @apidas 5 месяцев назад

    very cool, and then they said, server rendering should have all the data streamed in the html already :)

  • @IllusionIRL
    @IllusionIRL 5 месяцев назад

    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

  • @arewa_coder
    @arewa_coder 5 месяцев назад +2

    Nice video Ryan 👍 Can you get thesame effect with an external backend service??

    • @twitchizle
      @twitchizle 5 месяцев назад

      yes, i am using tmdb api with defer

    • @soywarmon
      @soywarmon 5 месяцев назад +3

      You can defer any promise. As long as that service is called through a promise (like a fetch request) defer it

  • @arewa_coder
    @arewa_coder 5 месяцев назад +4

    Can you do a video on integrating remix with an external backend api with features like authentication?

    • @BradWilliamsDFW
      @BradWilliamsDFW 5 месяцев назад

      Look at the Remix Stacks. Several of them have authentication with various database services.

  • @claus4tw
    @claus4tw 5 месяцев назад

    How did you get these breadcrumbs and move the close window row into the top top bar?

  • @ronindevninja
    @ronindevninja Месяц назад

    thanks to makes me trust on react again

  • @sergioccarneiro
    @sergioccarneiro 5 месяцев назад

    Cloudflare, nice!

  • @user-kt1iz4vc3x
    @user-kt1iz4vc3x 5 месяцев назад

    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!

    • @JacobGextrem
      @JacobGextrem 5 месяцев назад

      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.

  • @codewithnws3544
    @codewithnws3544 5 месяцев назад

    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?

  • @SikarinPunsawat
    @SikarinPunsawat Месяц назад

    Defer still good for SEO ?
    I was try it and what in pagesource it seem that show loading... component

  • @MouhsineBakhichdev
    @MouhsineBakhichdev 5 месяцев назад

    @Remix any idea why the ui is blocked until the deffered promise is resolved ?

  • @Augustine_354
    @Augustine_354 3 месяца назад +1

    What code editor is it?

    • @CostGranda
      @CostGranda Месяц назад

      VS Code, but not sure about the config

  • @willsmith4140
    @willsmith4140 5 месяцев назад

    wish i could use remix in react native/expo

  • @6qat
    @6qat 5 месяцев назад

    Is "defer" only available for Cloudfare?

    • @Remix-Run
      @Remix-Run  5 месяцев назад

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

    • @rnwonder107
      @rnwonder107 2 месяца назад

      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

  • @nonefvnfvnjnjnjevjenjvonej3384
    @nonefvnfvnjnjnjevjenjvonej3384 5 месяцев назад

    remix being bought be a tier 2 tech company like shopify has made it lose a lot of steam. should have stayed independent.