remix-run/react-router @remix-run/router@0.2.0-pre.5

on GitHub

Patch Changes

• feat: Deferred API Updates (#9070)

  • Support array and single promise usages
    • return deferred([ await critical(), lazy() ])
    • return deferred(lazy())
  • Remove Deferrable/ResolvedDeferrable in favor of raw Promise's and Awaited
  • Remove generics from useDeferredData until useLoaderData generic is decided in 6.5

• feat: Add createStaticRouter for @remix-run/router SSR usage (#9013)

  Notable changes:

  • request is now the driving force inside the router utils, so that we can better handle Request instances coming form the server (as opposed to string and Path instances coming from the client)
  • Removed the signal param from loader and action functions in favor of request.signal

  Example usage (Document Requests):

  // Create a static handler
  let { query } = unstable_createStaticHandler(routes);
  
  // Perform a full-document query for the incoming Fetch Request.  This will
  // execute the appropriate action/loaders and return either the state or a
  // Fetch Response in the case of redirects.
  let state = await query(fetchRequest);
  
  // If we received a Fetch Response back, let our server runtime handle directly
  if (state instanceof Response) {
    throw state;
  }
  
  // Otherwise, render our application providing the data routes and state
  let html = ReactDOMServer.renderToString(
    <React.StrictMode>
      <DataStaticRouter routes={routes} state={state} />
    </React.StrictMode>
  );

  Example usage (Data Requests):

  // Create a static route handler
  let { queryRoute } = unstable_createStaticHandler(routes);
  
  // Perform a single-route query for the incoming Fetch Request.  This will
  // execute the appropriate singular action/loader and return either the raw
  // data or a Fetch Response
  let data = await queryRoute(fetchRequest);
  
  // If we received a Fetch Response back, return it directly
  if (data instanceof Response) {
    return data;
  }
  
  // Otherwise, construct a Response from the raw data (assuming json here)
  return new Response(JSON.stringify(data), {
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
  });

• feat: SSR Updates for React Router (#9058)

  Note: The Data-Router SSR aspects of @remix-run/router and react-router-dom are being released as unstable in this release (unstable_createStaticHandler and unstable_DataStaticRouter), and we plan to finalize them in a subsequent minor release once the kinks can be worked out with the Remix integration. To that end, they are available for use, but are subject to breaking changes in the next minor release.

  • Remove useRenderDataRouter() in favor of <DataRouterProvider>/<DataRouter>
  • Support automatic hydration in <DataStaticRouter>/<DataBrowserRouter>/<DataHashRouter>
    • Uses window.__staticRouterHydrationData
    • Can be disabled on the server via <DataStaticRouter hydrate={false}>
    • Can be disabled (or overridden) in the browser by passing hydrationData to <DataBrowserRouter>/<DataHashRouter>
  • <DataStaticRouter> now tracks it's own SSR error boundaries on StaticHandlerContext
  • StaticHandlerContext now exposes statusCode/loaderHeaders/actionHeaders
  • foundMissingHydrationData check removed since Remix routes may have loaders (for modules) that don't return data for loaderData