Remix + Single Fetch Demo

Single Fetch + Defer

Pink dots denote artificially delayed responses for demo purposes:

Shipping estimate → 200ms
Recommended products → 500ms
Reviews → 600ms

Single Fetch uses turbo-stream to send promises over the network to the client so we can delay the response on the server.

How it works:

Blocking data is server immediately, while the rest is being fetched and streamed in.
Once non-blocking data is streamed to the browser, holes are filled with the UI using the correct data.

Try refreshing the page to restart the demo.

@sergiodxa

View code

Expires in 2 days

-10%

37.8

$42

Get it Oct 20 by 5pm

Donec sit elit

Morbi eu ullamcorper urna, a condimentum massa. In fermentum ante non turpis cursus fringilla. Praesent neque eros, gravida vel ante sed, vehicula elementum orci. Sed eu ipsum eget enim mattis mollis.

Recommended Products for You

Based on your preferences and shopping habits

Fusce commodo porta posuere

Get it tomorrow, Oct 19

Best Seller

Praesent tincidunt lectus

Expires in 7 days

-30%

204.4

$292

Get it Oct 20

Morbi at viverra turpis

212

Get it Oct 20

Maecenas interdum

287

Get it Oct 22

Only 1 left in stock

Customer Reviews

Nullam Duis

Phasellus efficitur, nisi ut varius ultricies, tortor arcu ullamcorper nisi, eu auctor enim est ut enim. Sed fringilla, nulla ut tincidunt hendrerit, risus tortor laoreet tortor, non mattis arcu elit vel ante.

Donec Nulla Velit

Nullam fermentum nisl non mattis fringilla!!!!

J Tempus

Pellentesque faucibus quam eu vehicula pulvinar. Integer cursus fringilla metus.