feat(font): add static optimization for fonts in expo router (#24027)

# Why

Extract fonts loaded with expo-font when using Expo Router on with
server rendering on web. This ensures that fonts ar

feat(font): add static optimization for fonts in expo router (#24027)

# Why

Extract fonts loaded with expo-font when using Expo Router on with
server rendering on web. This ensures that fonts are available before
the JavaScript loads, leading to much better UI during the initial
render.

Consider the following snippet:

```js
import FontAwesome from "@expo/vector-icons/FontAwesome";
import * as Font from "expo-font";
import { Text } from "react-native";

export default function Layout() {
// These fonts will be statically extracted on web and added to the initial HTML.
const [loaded, error] = Font.useFonts({
...FontAwesome.font,
Inter_400Regular: require("@/assets/fonts/Inter_400Regular.ttf"),
Inter_500Medium: require("@/assets/fonts/Inter_500Medium.ttf"),
});


if (loaded) {
// This code-path will never be used in static rendering now.
return null;
}

// This font is now styled before the JavaScript loads.
return (
<Text style={{ fontFamily: 'Inter_400Regular' }}>Hey</Text>
);
}
```

> Native can continue to be written defensively, web will adapt to the
API.



https://github.com/expo/expo/assets/9664363/e03de783-bcee-49d3-9bca-15bfc87966d5


<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How

- When `loadAsync` or `useFonts` is used during static rendering, the
font will be added to a shared server context, which is then pulled in
`expo-router` and added to the static HTML. This doesn't work if the
call is outside the React tree, or if the font is loaded asynchronously,
or if the font is loaded in a `useEffect`.
- Updated docs to reflect new system.

# Test Plan

- E2E bundling test.
- Ensure that `useFonts` doesn't return `false` on the first render,
this prevents returning `null` and rendering nothing actionable.
- Ensure fonts are linked and preloaded according to the routes that
load them, including nesting.
- Node unit test to reduce the chance of breaking the more fragile parts
of the API.
- Published in a test app:
[before](https://64e0e449c07fa060ba0ce443--pillarvalley.netlify.app/settings/)
[after](https://64e0fb6251f1396c0b3eb62f--pillarvalley.netlify.app/settings/).
Notice that disabling JavaScript doesn't break font loading.

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

---------

Co-authored-by: Expo Bot <[email protected]>
Co-authored-by: Aman Mittal <[email protected]>

show more ...