RSC

Setting up the Bundler

The Navigation router has a Parcel RSC mobile sample that you can clone. The only files you need to change are App.tsx, stateNavigator.ts and server.tsx. Replace the people/person scenes and components with your own ones. Add use-server entry to each scene component so that Parcel splits the bundle there. Also mark them as async to enable data-fetching on the server.

Note

In RSC, scenes hidden in the stack still render. They can't be frozen until React lands the Activity component

Handling Scene function props

We implement the setup guide for our email example but when we run it we get an error. We're passing a function from a server component to a client component, something disallowed by RSC. The culprit is the sharedElements prop on the Scene. Instead, we switch to the equivalent prop on the NavigationStack. It has an extra parameter that provides the current scene. Then we create a Stack client component wrapper so we can safely pass the function in. 

'use client'

const Stack = ({children}) => (
  <NavigationStack
    sharedElements={(scene, data) => scene.key === 'mail' ? [`mail${data.id}`] : undefined}>
    {children}
  </NavigationStack>
)

As soon as we render our new Stack component in place of the NavigationStack, our email example starts working. Server-rendered and bundle-split all thanks to RSC. 

<Stack>
  <Scene stateKey="inbox"><Inbox /></Scene>
  <Scene stateKey="mail"><Mail /></Scene>
  <Scene stateKey="compose"><Compose /></Scene>
</Stack>