async components

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Lazy routes in SSR applications with hydration

In server-side rendering applications using createStaticHandler and StaticRouterProvider, if a lazy route is server-rendered and hydration data is provided, the router may have the data but not yet have the route definition loaded. The recommended solution is to manually match routes against the initial location and load any lazy matches before creating the router. Use matchRoutes() to find lazy matches, load them with await Promise.all(), and update the routes using Object.assign() to set properties and remove the lazy function.

SSR hydration with lazy routes code example

Here's the recommended pattern for handling lazy routes during hydration in SSR applications: ```jsx // Determine if any of the initial routes are lazy let lazyMatches = matchRoutes(routes, window.location)?.filter( (m) => m.route.lazy ); // Load the lazy matches and update the routes before creating your router // so we can hydrate the SSR-rendered content synchronously if (lazyMatches && lazyMatches.length > 0) { await Promise.all( lazyMatches.map(async (m) => { let routeModule = await m.route.lazy!(); Object.assign(m.route, { ...routeModule, lazy: undefined }); }) ); } // Create router and hydrate let router = createBrowserRouter(routes) ReactDOM.hydrateRoot( document.getElementById("app")!, <RouterProvider router={router} fallbackElement={null} /> ); ``` This pattern uses matchRoutes() to find initially matched lazy routes, loads them in parallel with Promise.all(), updates each route with Object.assign(), and removes the lazy function.

Server Functions use "use server" directive

Server Functions in React Router RSC are defined with the "use server" directive and allow you to call async functions executed on the server. After server functions are called, React Router automatically revalidates the route and updates the UI with new server content without manual cache invalidation.

Server Functions example with form action

Example of Server Functions with form submission: ```tsx "use server"; export async function updateFavorite(formData: FormData) { let movieId = formData.get("id"); let intent = formData.get("intent"); if (intent === "add") { await addFavorite(Number(movieId)); } else { await removeFavorite(Number(movieId)); } } ```

Give your agent this brain