Evan Bacon – Fetch Once, Render Everywhere: React Server Components in Expo Router | App.js 2024
Summary
TLDREvan Bacon introduces Expo Router, a file-based framework that enables simultaneous web and native app development with familiar web APIs. It leverages React Server Components for cutting-edge server rendering across platforms, allowing for AI-driven UI generation and seamless client-server interactions. Expo Atlas, a new tool for visualizing and optimizing Expo bundle outputs, is also unveiled, promising faster iteration and better user experiences.
Takeaways
- 📚 React Native has evolved significantly since its inception nearly a decade ago, becoming a leading framework for building client-side applications.
- 📈 React Native powers hundreds of apps on the App Store's trending list daily, indicating its ongoing popularity and impact.
- 🛠 Evan Bacon introduced 'Expo Router', a file-based framework for creating apps that function seamlessly on both web and native platforms.
- 🔗 Expo Router utilizes familiar web APIs like 'link' and 'href' for navigation and supports nested routing for complex UI elements like tab bars and headers.
- 📱 It leverages native primitives for navigation on Apple devices, ensuring a truly native feel and gesture experience.
- ⚙️ With the collaboration with the Meta team, Expo Router benefits from the React compiler, reducing the need for 'useMemo' or 'useCallback' and simplifying code.
- 🌐 The script highlights the limitations of client-side applications and the potential of server-driven UIs for performance and flexibility.
- 🤖 The presenter demonstrates building AI-powered apps with Expo Router, showcasing server actions and concurrent routing with React Server Components (RSC).
- 🎨 Expo Router's server environment is multiplatform aware, dynamically rendering platform-specific UI components based on the device's platform.
- 🚀 The live demo illustrates the capabilities of Expo Router with AI integration, server-rendered elements, and interactive client-side components.
- 🛠️ Expo Atlas was announced as a new tool for visualizing and understanding Expo bundle output, aiding in optimization and development of universal RSC.
Q & A
What was the initial premise of React Native when it was first announced?
-React Native was first announced with a simple premise to bring the good parts of the web to mobile app development.
How has React Native evolved since its inception?
-React Native has grown to become one of the most impactful frameworks for building client-side applications, powering hundreds of apps in the App Store trending list every day.
Who is Evan Bacon and what is his contribution to React Native?
-Evan Bacon is an engineer and the creator of Expo Router, a file-based framework for building apps that work on both web and native platforms simultaneously.
What is Expo Router and how does it work?
-Expo Router is the first file-based framework for creating navigation for both native apps and websites by simply creating files in the app directory, using familiar web APIs like 'link' and 'href'.
How does Expo Router utilize native primitives for navigation?
-Expo Router uses native primitives like UI Navigation Controller on Apple devices to ensure that gestures and animations feel truly native.
Outlines
🚀 Introduction to React Native and Expor Router
Evan Bacon introduces the evolution of React Native, a framework initially announced nearly a decade ago with a simple premise to leverage the web's strengths for building client-side applications. Today, it powers numerous trending apps in the App Store. Bacon, an engineer and creator of Expor Router, discusses the first file-based framework enabling the creation of apps for both web and native platforms with robust navigation. Expor Router uses familiar web APIs and native primitives for a seamless native feel, enhanced by the React compiler's integration for a more declarative and less code-intensive approach. The talk also hints at the upcoming integration with the next version of XL CI.
🌐 Harnessing Server-Driven UI with Expor Router
The speaker delves into the attributes of building native applications, focusing on the limitations of client-side applications and the benefits of involving server capabilities for data fetching and server rendering. Popular apps like Lyft, Netflix, and Reddit utilize server-driven UI for A/B testing and rendering varied UIs based on user criteria. However, setting up such systems is complex and often inaccessible to indie developers. Expo router aims to democratize server-driven UI by incorporating React Server Components (RSC) for cutting-edge server rendering across platforms, requiring extensive reworking of libraries within the Universal ecosystem.
🎨 Demonstrating AI-Powered Apps with Expor Router
Evan Bacon showcases a demo of an AI-powered chat application, similar to Chat GPT, which utilizes React Server Actions for server-rendered text streaming. The demo illustrates the creation of a server action, the use of suspense for maintaining connection until promise resolution, and the recursive rendering of text. The multiplatform capabilities of Expor Router's server environment are highlighted, as it adapts the UI components based on the device platform. The demo expands to include more complex interactions, such as integrating with native APIs for calendar permissions and event creation, demonstrating the seamless integration of server-rendered and client-interactive elements.
🔄 Live Demo of Expor Router's Cross-Platform Capabilities
The presenter conducts a live demonstration of the app, showcasing its development server and client interaction on a mobile device. The demo includes features like listing new movies, server actions for data recursion, and interactive elements like menus and touchables. It also highlights the app's ability to integrate with various services like Spotify, Google Maps, and Uber, emphasizing the background data loading and the use of RSC for optimizing network requests. The live demo concludes with real-time currency conversion and location-based to-do list generation, demonstrating the app's dynamic capabilities.
📈 Introducing Expo Atlas for Bundle Optimization
Evan Bacon introduces Expo Atlas, a new tool for visualizing and understanding the output of Expo bundles. It provides an overview of compiled modules, allowing developers to identify and address large dependencies. Expo Atlas offers a unique feature of showing both import and output source code for any module within the project, enabling developers to trace dependencies and optimize their projects effectively. The tool has been instrumental in the development of universal React server components and has improved the performance of the Metro resolver. Expo Atlas is presented as a valuable asset for developers to iterate faster and build better user experiences.
Mindmap
Keywords
💡React Native
💡Expo Router
💡Native Primitives
💡React Server Components (RSC)
💡Server-Driven UI
💡File-Based Framework
💡Suspense
💡Concurrent Mode
💡Universal Code
💡Expo Atlas
Highlights
React Native has grown to become a highly impactful framework for building client-side applications.
React Native powers hundreds of apps in the App Store trending list daily, with no signs of slowing down.
Expo Router is introduced as the first file-based framework for building apps that work on both web and native platforms.
Expo Router uses familiar web APIs for navigation and is also a nested router, enabling organization of routes into shared folders.
Expo Router employs native primitives for truly native gestures and animations on Apple devices.
Access to the React compiler from day one thanks to collaboration with the Meta team, reducing the need for useMemo or useCallback.
Expo Router brings React Server Components to all platforms, enabling server-driven UI through Expor Router.
Server-driven UI is an important system for building apps but has been inaccessible to indie developers.
Expo aims to make the most powerful version of server-driven UI available to everyone.
A live demo showcases building AI apps with React Server Components and Expo Router, including a chat GPT-like app.
Expo Router's server environment is multiplatform, aware of the device it's rendering for, such as iOS or Android.
Expo Router can server-render complex native UIs, such as a movies app with push animations and native menus.
RSC and Expo Router make it easy to build interactive elements that run on the client after server-rendering.
Expo SDK 51 and React 19 in new architecture enable universal server components in Expo Router.
An early beta of the server renderer part of Expo Router is expected by the end of the year or 2025.
Expo Atlas is introduced as a tool for visualizing and understanding Expo bundle output, aiding in optimization.
Expo Atlas provides real-time updates and the ability to trace dependencies, improving development speed and用户体验.
Expo Atlas has been crucial in building universal React server components and improving the Metro resolver.
Transcripts
when react native was first announced
nearly 10 years ago it had a very simple
premise and that was web the good parts
and from this basic concept react native
has grown to become the most impactful
framework for building client side
applications today if we fast forward to
now react native Powers hundreds of apps
in the App Store trending list every
single day and there's no signs of
slowing down so where do we go from
here I'm Evan bacon an engineer and the
creator of exp router expor Router is
the first file-based framework for
building uh apps that work on both web
and Native at the same
time by simply creating files in the app
directory uh you can instantly create
robust navigation for both your native
app and
website it uses familiar web apis like a
link and href to push between
screens and it's also a nested router
enabling you to organize routes into
shared folders to create elements like
tab bars headers drawers which work
across you know children
routs and of course the best part has to
be that it uses native Primitives like a
UI navigation controller on Apple
devices so your you know gestures and
your animations are all feeling truly
native because they are truly native
there's no way to tell that it's not
native because it is
native and starting uh you know day one
we have access to the react compiler
thanks to collaborating with the meta
team this means that you no longer need
to write use memo or use callback in
your applications which is pretty sweet
so a lot less code things are just truly
declarative uh leading to a much better
experience for both web like users and
developers alike we'll be installing
this in Expo CLI uh in the next version
of uh XL CI when it comes out uh so
pretty sweet if you haven't seen rat
compiler yet I highly recommend checking
it
out but anyways there are
many attributes to building native
applications and and Expo provides
solutions to most of them but all these
Solutions are primarily targeted at uh
client side applications and there's
only so much that you can do with the
client on its
own things get really interesting when
you start to involve the server when you
bring in data fetching and server
rendering from a data perspective most
native apps operate essentially like
single page websites uh this means
there's slower performance and
substantially less networking right
everything is happening on the client
nothing else is happening on the
server now popular native apps such as
Lyft Netflix Reddit you know so on and
so forth all use some form of server
driven UI in their production
applications
today uh and it's very complicated it's
super hard to set up to configure to
design and as a result it's Out Of Reach
for most developers and most types of
applications now they do this so that
they can ab test and render different
uis with a high degree of variation
uh this is based on all sorts of things
like criteria such as a user type
location the currency uh they want to
render different UI based on you know
different criteria of the
user and the approaches all vary in many
small ways but they do share some common
architecture such as using Json as
semantic UI representation think of this
like HTML but for custom native
apps now we can see a pattern here
server driven UI is an important system
for building apps and it's just very
inaccessible to Indie
developers
so what if we could make server driven
UI available to everyone but also the
most powerful version of it uh like ever
imagined that's the goal of Expo
router to do this we're bringing react
server components the most Cutting Edge
approach to server rendering to all
platforms through expor router this is a
huge undertaking as it will require re
working many different libraries
throughout the entire Universal
ecosystem everything needs you know a
couple refinements ranging to a ton of
refinements uh but our official
implementation of RSC for Universal apps
is currently in early development
however it is worth sharing the progress
that we made so far at Expo because it's
frankly pretty exciting to see what
server driven apps are capable
of now there's a lot to RSC such as
server actions and concurrent routing
and flights Etc but I figure it'd be
easier to just show you guys what's
possible in the form of a demo that we
built at Expo now I've been really
interested in AI lately you know just
like everyone else on the internet uh
but it's historically been pretty hard
to build high-powered AI native apps and
this is because streaming and server
rendering are both critical aspects of
working within llm but with react server
components and expor router it's
actually really really easy to build AI
apps as I'll show you
here so here I have a chat GPT like app
which pings open AI via a react server
action and streams in Native text from
the server everything that returns back
is at least partially server
rendered so we can ask it a question
like should native apps be Ser rendered
which is a great question to ask it and
of course it'll return something back
like native apps are typically not
server rendered apps or you develop
using whatever things and this is
because you know this is not something
that people have traditionally done a
lot or when they do they don't talk
about it too
frequently Now to create the server
action we have another file which
defines use server inside of a function
this send message function over here uh
and when we call send message which is
fully typed it essentially is doing what
an API route does it's making a network
request to this code which runs on the
server and then then we wrap it in
suspense the suspense basically tells
the connection to stay open until the
promise resolves which means you can
have a synchronous components inside of
it and then down here we have an
asynchronous function recursive text
async react components pretty sweet and
then we can incrementally uh recursively
render through the text to render out
all of our
elements um and that's how we can create
this effect right here now one novel
aspect of exper router's server
environment is that it's a multiplatform
server now what this means is that when
we call send message from an iOS device
even though it's running on the server
it knows to render the iOS version of
react native text as opposed to the web
version or Android versions so you
essentially have like kind of a
dimension of platforms a matrix a lot of
complexity but it actually feels pretty
sweet and this is just the basics we can
scale this concept up to any native UI
so let's do something a little bit more
exciting
when react native was first demoed they
showed a truly native movies app and you
had like push animations you could
scroll through it it was so neat uh so I
thought it could be fun to pull movies
into this prototype
somehow for inspiration I looked at what
the state-of-the-art best possible AI
apps had to offer in chat gp4 when you
ask for movies it renders a bulleted
list of markdown some text here after it
searches Bing you know cool I also tried
this with 40 and it's just a little bit
faster and on Google Gemini it does the
same thing but with images and links
what we're seeing here is that this is
just markdown with Expo we can do a lot
better here we can match any query to
search for movies send it up server
render views stream them back down with
Native UI menus links elements where we
can then server actions to recurse back
into it find more actors and then
request another server rendered element
uh pulling everything down from the
client all these movie cards are
rendered on the server we can even
interact with Native apis by doing like
create an event this will server render
a calendar card which then can access
the calendar permissions and then uh
create an
event so pretty sweet
[Applause]
oh overall way better user experience
with a lot less reading but even more
exciting than this cuttingedge developer
experience or user experience is a
developer experience cuz it only it is
the same format as what we did with the
text we're just using views and images
because we have RSC this this semantic
representation of our views uh so here
we have a suspense boundary to show a
skeleton loader while an ASN component
fetches data and then renders the movies
and streams them down it just makes
sense to look at it feels great it's
awesome
and then to add the interactive elements
because you can't have interactions on
the server those need to run on the
client we can Mark a wrapper component
with used client which means that just
this one boundary gets split out and
executed on the client that code is
bundle split out and loaded over the air
when you uh when you want to interact
with this component when it mounts this
is what enables um all these different
interactions where you have things like
menus and touchables and so on and so
forth so it's really easy to step
between the two boundaries between
client and server using this
directive because after we jump through
all of the Hoops required for Server
rendering and trust me there's there's
lots of Hoops we aren't just rendering
to the Dom like we get to render to
truly native views as if the app were
built with first-party tools like xcode
and Android studio um because you will
be using xcode Android studio as well
it's kind of like how you do today um so
it's progressively rendered best
practices is truly Limitless you get you
know native scrolling just
there there are no limits on this you
get the best of web and all the power of
native but the best part by far has got
to be that it renders like this on every
single platform we write this once and
it runs everywhere mostly because I'm
using a lot of Base Primitives like view
image and text and loading animation and
like animations so these especially work
well across platforms but because we're
also we're pulling a lot of our our
logic out and moving it to the server so
anything related to network requests are
trly Universal because the server is you
know it's agnostic to what the
platform's
doing now this is the part where I will
attempt to live demo the app that I just
showed you um the Wi-Fi is spectacular
in here uh so uh we'll just go ahead and
give this a
shot all right yeah you can see see my
computer here great let's connect to the
uh the Hotpot
oh
man all right and then right here I have
Expos CI running so you see whatever um
and what I want to do is I basically
want to show you guys the dev server
running with my phone here this is this
is my phone um and so you can see uh the
client and the server as it's recursing
back and forth between the two so here
this is a development app an expo app we
will connect it and we'll see how it
goes so opening it up here in the
background you can see see we're loading
in all the flight chunks all the
asynchronous bundles and we have our app
so just like in the demo we can list
some new movies press that button
recurses back to the server comes
forward starts rendering the suspense
and we can see data fetching in the
background I mean so you know the big
chunk is when the data loaded in right
um over here just like before you know
we can like long press the select and
here you see that there is actually a
server action which is then recursing
for more data and then fetching so I'd
like to say that we have like timers to
emulate the production environment and
how that latency will work but the Wi-Fi
is just doing that
automatically so let's find you you go
Challengers create an event just like in
the
thing there we go we can render out the
views but we can also do other things
like this is so easy I I demoed part of
this last week and uh in the the last
few days I just took all of the input
that people have given about what we
should add to the Prototype and I just
built it in because it's so easy to use
and I was really struggling to
demonstrate that in the talk uh so I I
just wrote a bunch more parts so here we
can say um show me some
classic Polish
music and now what this is going to do
is Ping the dev server and then render
down a Spotify card and we can log into
Spotify this uses Expo off session log
in right
there log oh man
man everyone look away for just a
moment it's perfect uh logs in oh man
it's so slow you get to see all the
states here we got all of our Polish
music then streaming in um we're able to
just encapsulate all of this logic
everything required for Spotify
authentication in a single component
including the secret handshake that is
required to get a Long Live token um
never been before been anything quite
like it uh but we can do a lot more than
that too so let's look for um
let's say uh show me things to do in
crao so now it's going to Ping the dev
server back here
again any moment now and then it will
ping Google Maps so we see it loading
here we can see the animation as it's
coming through pinging Google Maps
there's all the Google Maps data in the
background and now we can slide through
a native map component so even though
this content was server rendered it was
able to stream down to the client where
we can render a native map on top of it
and then also look at just how how much
data is loaded in the background here so
RSC is automatically optimizing our
requests by converting it into the
minimal amount of RSC uh code required
to stream down um so I think if we
weren't doing that the network request
would be a lot slower so we can come in
here and we can uh let's see we got this
Cathedral um we can select it and then
we can get the weather in this area
ping it back render us down a weather
card that's pretty sweet we can also
book an Uber over here um oh I do have
the weather set to Fahrenheit we could
switch that over to Celsius I know how
you guys like that over here and uh
we're still booking the Uber we have the
Uber here we could request the Uber
opens up the Uber app just like that and
I've got an Uber to the location what is
that pln1 18 I don't I don't know what
that means so we can ask the uh let's
see
um convert
whoa convert 18 pln to
USD and then it will probably stream
back and answer telling me how to
convert it you know $4.50 that's nice
but what about all these other numbers
in here like 22 and such
um well here's where things get really
interesting so I don't have a card to
just dynamically convert pln to USD I
didn't create that card but the number
one piece of feedback I got was that uh
you know since all this is running on
the server why don't we just have the AI
write the elements just write the code
and then render it and stream it down so
I'm going to go ahead and try that live
for the first time here and we'll see
how it works um create a
um
currency
converter
component and now what's going to happen
here is this is going to Ping open Ai
and it is going to generate the
component for us so there is no
guarantee that the component will work
and it it you know it's a nice venue to
have code just error out on stage but
there it is look at
that it's pretty
sweet we haven't tried it yet we don't
know if it works so what are some of
these numbers I mean they don't have to
be exactly but 22 okay 22 pln convert to
USD $5.50 so we do have it working
and right up here we can see the actual
code that it generated this is react
Nate it's universal code it it wrote all
of this code for us this code doesn't
exist in there um we can scale this out
in any direction we want to take it so
we could also say um show me the
locations as a to-do list you know cuz I
wrote this locations map thing with like
Vegas in mind and it doesn't work in
like we just have flat buildings so a
different form factor is better so here
now we have a to-do list so we it's
fully interactive like we have uh okay
we have checkboxes I I said it was fully
interactive then I remembered it might
not be um yeah here we've got Expo
checkbox we inform it of which uh
libraries in the SDK it can use before
it generates the code out for us um so
yeah just like that and then we've got
uh all of the locations from
before so that is the iOS part of the
we can just switch back over I mean like
we got the dev
server it's pretty good we have the dev
server running right here this is expo
Expo CI we just hit the W key and launch
it right into the web so you know same
deal as before we could say list some
new movies and it'll launch the movies
the craziest part is that I I I didn't
have time to really thoroughly test that
UI generation in the cloud thing so I
have not tested that on all platforms
yet but we can just try it here one idea
I had was what if we create a chat
UI
component and see how this does we'll
take a second I mean I didn't have
enough time to add the loading indicator
you know like the skeleton or maybe you
watch the code stream in because it
streams in all the code first and then
we evaluate it so then it would look you
know a bit bit snappier cuz we are
getting instant response but looks like
it it is making some progress there in
the background what is his progress oh
oh okay so we've got a little chat UI
here we could say um hello appjs comp
that's pretty sweet I can't believe that
it's crazy that this is working um I
mean it's not I planed this obviously
this all works like um and of course use
Expo so I mean why does it how does it
even know to use my photo there like it
generated this code here in the
background like it
it's okay so it has like my GitHub
profile in there I guess it like knows
maybe I've like informed it but then
yeah here's all the code it's generating
back here
incredible all right let's switch back
over the keynote real
quick so that is what it looks like when
we take the modern state of server
rendering and Ai and then bring them
universally to every platform with Expo
router we are seamlessly gliding between
client and server in a fully typed
file-based framework for the first time
ever you only have to configure complex
apis for one platform and that's the
server we waterfalls and parallel
requests are all taken for you care of
for you automatically uh because this
isn't just some Rinky Dink server
rendering system we have in here this is
react server components this is the best
that the web has to offer running
universally on all platforms secrets are
secured automatically static client code
is automatically it's a remove from the
bundle uh we we can SSG code in fact
this code has the RSC requests uh
pre-built at build time and embedd it in
the bundle meaning if we start this app
in airplane mode I probably should have
did that when my phone was linked then
it just fires up instantly uh the only
time that you would actually hit a
network request or interact with a
server is when you're going to interact
with the server anyways to make a fetch
request so it still feels truly native
very Snappy at a component level tons
and tons of new benefits too many to go
into just redefining what's possible
with our mobile devices and enabling new
types of apps to be built in record time
now the app you just saw is running Expo
SDK 51 react 19 in new architecture
we're still actively developing the
server renderer part that adds used
client and used server and then the the
part that actually deploys the server uh
so if we move fast we can have an early
beta out maybe by the end of this year
but just to be safe we'll say 2025 so
consider this in RFC is server rendering
something that you want to see on Native
I believe so I love using the system um
I can't believe I was able to like get
all that stuff working the last few days
so the future is very bright I'm Evan
bacon and this has been universal server
components in Expo
router but but but that that's there is
one more thing that we'd like to
announce today in the Expo team so to do
that please join me in welcoming Cedric
Vantin to the stage
[Applause]
Expo router has been our most ambitious
project yet and it was clear for us from
the start that traditional tools weren't
going to help us build it out so we
build new ones introducing today Expo
Atlas
Expo Atlas is a tool to visualizing and
understanding your Expo bundle output
right from the start it gives you an a
complete overview of all compiled
modules within your app with this you
can easily spot like really big ones or
relatively large ones like this one low
Dash so where can we go from here how
can we how can we see where it's
imported and how can we resolve it
so to do that we can just click it for
the first time ever in react native you
now have both the import and output
source code for any modules within your
whole project and it doesn't just end
there with this you can easily Trace
down where certain dependencies are
imported or how it's being imported and
especially why it's being
imported now let's get rid of that lad
Das real quick
so there we
go unlike traditional Source map
explorers Expo Atlas updates right away
so you can try different optimization
approaches without having any
distractions at
all going back to our bundle overview we
can easily spot that we just shaved 600
kiloby from bundle just by verifying
where certain dependencies are being
imported now Expo Atlas has helped us
tremendously internally at Expo we
believe that this tool has been
fundamentally crucial crucial for all of
our uh projects it helped us build out
universal react server components it
even helped us out create the new Metro
resolver which is up to six times faster
and it also required us to add support
for nanc for meting to Expo
it won't it won't have help your app
have smooth animations though but it
does help you iterate faster at
scale which in turns enables you to move
faster and build better user
experience so try it out today you can
try it out in any SDK 51 project using
this feature flag you can also wait for
the release blog post which should be up
later today or tomorrow on expo. death.
blog and we can't wait to see how you
will use
Atlas thanks
[Applause]
[Music]
[Applause]
5.0 / 5 (0 votes)