Grabowski and Vicenti describe a setup where a server defines which client components to render, while the app handles rendering. They say the approach is used at companies including Instagram, Shopify, and Lyft, and introduce Rize Tools as a modular way to add it to React Native apps.
How you can Server-Render without Rendering on the Server
Speakers
Mike Grabowski, founder and CTO of Callstack, and Eric Vicenti, COO of Sia, present Rize Tools at React Universe Conf 2024 and show how server-defined rendering can add features to React Native apps.
The presenters use the React Universe Conf app to demonstrate changes that reach a production build. They move sponsor content, add an open source sponsor tier, and build an archive screen with videos from past conference editions. The demo uses WebSockets and a tunnel running through a $5 VPS, with a few connection hiccups.
Grabowski explains that the client connects to a server model source and can receive component definitions and actions such as navigation or opening a URL. On the server, query models load data, state models hold values, view models track dependencies, and lookup models select data by a path parameter. The presenters show how these pieces can combine to build an archive organized by year.
Using Rize Playground, the presenters build an admin tool backed by a local Postgres database. They add screens to browse conference editions and videos, then demonstrate editing a video's details, updating its thumbnail, and deleting it. Server functions update the database, invalidate related queries, and send feedback actions to the client.
The presenters summarize Rize Tools as a way to add features to existing apps and prototype internal tools through the Playground app. Vicenti says the project is in production, describing an iPad control app used to operate a 20-meter-wide structure with 25,000 LEDs at Burning Man, attended by 60,000 people. Grabowski says the project is on indefinite hibernation.
Takeaways
- Server-defined rendering can let teams change app content and features without waiting for a new client release.
- A modular client component set and server model source can make gradual adoption easier in an existing React Native app.
- Separating queries, state, views, and parameterized lookups gives server-driven interfaces a composable data model.
- Internal tools built on the same system can edit production content, but should account for query refresh and user feedback.
- The presenters describe Rize Tools as having been used in production, while also noting the project is indefinitely hibernating.
Mentioned in this talk
Search inside this talk
What was claimed 12
- foundedMike Grabowski founded
CallstackCEO and founder“I'm Mike Grabowski, co-founder of Callstack.”
0:12inReact Native NewsYouTube Verified3 sources· Talk, Web· archived
- role atMike Grabowski is Founder and CTO atCallstack
“I'm a co-founder of Callstack.”
0:26inWe’re making opportunities for people to connectYouTube Verified6 sources· Talk
- role atEric Vicenti is COO at Sia
“He's now COO at Sia, a decentralized publishing system.”
YouTube Unverified1 source· Talk
- builtEric Vicenti built React Navigation
“One of them was React Navigation, which he created together with some other folks from the community.”
YouTube Verified2 sources· Talk
- integrates withRize Tools integrates with React Native
“A suite of libraries to help you make server-defined rendering super easy in your mobile apps.”
YouTube Unverified1 source· Talk
- featureRize Tools: Lets a server define components and actions that a mobile client renders and executes.
“A suite of libraries to help you make server-defined rendering super easy in your mobile apps.”
YouTube Unverified1 source· Talk
- usesRize Tools uses WebSocket
“It's using WebSockets, so it should be updating live.”
YouTube Unverified1 source· Talk
- featureRize Tools: Supports query, state, view, and lookup models that can be composed to build app experiences.
“There are a bunch of other different models that you can think of as building blocks.”
YouTube Unverified1 source· Talk
- featureRise Kit: Provides components and actions for building applications in the playground environment.
“A growing, expansive suite of components and actions that allow you to build all sorts of fun applications.”
YouTube Unverified1 source· Talk
- featureRise Playground: Connects to a Rize server to prototype features and build internal tools.
“With Rise Playground and Rise Kit, you can prototype and build internal tools for your company.”
YouTube Unverified1 source· Talk
- metricRize Tools: Used at Burning Man with 60,000 people the previous week.
“Rize Tools is in production. This was at Burning Man with 60,000 people just last week.”
YouTube Unverified1 source· Talk
- uses
“This thing is entirely powered by a JavaScript server running in real time. Of course, it uses Rize Playground for the iPad control app.”
YouTube Unverified1 source· Talk
