Skip to content

Commit

Permalink
chore(docs): Update async-routes.mdx (expo#22849)
Browse files Browse the repository at this point in the history
# Why

- mirror
expo/router@d13c677

---------

Co-authored-by: Aman Mittal <[email protected]>
  • Loading branch information
EvanBacon and amandeepmittal authored Jun 15, 2023
1 parent 3ca5f4b commit 2d3167e
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 21 deletions.
48 changes: 27 additions & 21 deletions docs/pages/router/static-rendering/async-routes.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
---
title: Async routes
description: Learn how to load routes asynchronously when using Expo Router.
description: Learn how to speed up development with async bundling in Expo Router.
---

import { Terminal } from '~/ui/components/Snippet';
import Video from '~/components/plugins/Video';

> **warning** This guide requires `[email protected]` or above. Everything listed here is still experimental. You may need to use [Expo CLI on `main`](https://github.com/expo/expo/tree/main/packages/%40expo/cli#contributing) to use these features.
> This guide requires `[email protected]` or higher and `[email protected]` &mdash; everything listed here is still experimental. To use these features, you may need to [use Expo CLI on `main`](https://github.com/expo/expo/tree/main/packages/%40expo/cli#contributing).
> Metro Bundler has a special development-only bundle splitting feature which can be used to defer bundling unused code until it is needed. This system was developed at Meta for incrementally developing the Facebook app at scale. However, it is rarely seen outside of Meta as it requires specialized setup and routing architecture.
<Video file="expo-router/async-routes.mp4" loop={false} />

Expo Router can automatically split your JavaScript bundle based on the route files using [React Suspense](https://react.dev/reference/react/Suspense). This enables faster development as only the routes you navigate to will be bundled or loaded into memory. This can also be useful for reducing the initial bundle size for your application.

Apps using the Hermes Engine will not benefit as much from bundle splitting as the bytecode is already memory mapped ahead of time. However, it will improve your over-the-air updates, React Server Components, and web support.

> When you bundle for production, all suspense boundaries will be disabled and there will be no loading states.
> When bundling for production, all suspense boundaries **will be disabled** and there will be no loading states.
## How it works

Expand All @@ -25,27 +26,29 @@ Async routes cannot be statically filtered during development, so all files will

## Static rendering

The current static rendering system doesn't support React Suspense, so we have to disable it when rendering static pages. This will be improved in the future.
The current static rendering system (React) doesn't support React Suspense, so async routes will be disabled on web when rendering static pages. This will be improved in the future.

## Setup

Configure Metro to use Expo's bundle splitting features:

```js metro.config.js
const { getDefaultConfig } = require('@expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer = {
...config.transformer,
asyncRequireModulePath: require.resolve('@expo/metro-runtime/async-require'),
};
config.server = {
...config.server,
experimentalImportBundleSupport: true,
};
module.exports = config;
Enable the feature by setting the `asyncRoutes` option to `development` in your [app config](/versions/latest/config/app/):

```json app.json
{
"expo": {
"plugins": [
[
"expo-router",
{
"origin": "https://acme.com",
"asyncRoutes": "development"
}
]
]
}
}
```

Next, enable the feature by setting the `asyncRoutes` option to `development` in your **app.json**:
You can set platform-specific settings (`default`, `android`, `ios` or `web`) for `asyncRoutes` using an object:

```json app.json
{
Expand All @@ -55,7 +58,10 @@ Next, enable the feature by setting the `asyncRoutes` option to `development` in
"expo-router",
{
"origin": "https://acme.com",
"asyncRoutes": "development"
"asyncRoutes": {
"android": false,
"default": "development"
}
}
]
]
Expand Down
Binary file not shown.

0 comments on commit 2d3167e

Please sign in to comment.