Making Fetch Happen

🤩

An attempt to implement render-as-you-fetch with Next.js

Anthony Morris

@amorriscode

writewithwrabit.com

Loading...

React Suspense allows showing some of a UI without waiting for all of it to be ready.

 

Joe Savona

React Conf 2019

Render Then Fetch

Download Code

Render Fallback (<Suspense>)

Fetch Data

Render Component

Fetch Images

Render With Images

What if we could fetch code and data at the same time?

🤔

Render Then Fetch

Render As You Fetch

Load everything at once
(code, data, images)

+

Show loading state sooner
(handled by the parent instead of the component)

=

Better UX!

Relay + GraphQL

Next.js

⚠️

Warning: You have enabled experimental feature(s).

Use them at your own risk.

Developer experience in service of a great user experience

Thanks!

🎉

Made with Slides.com