Feat: Add createStaticHandler for Router SSR support (#9013)

* Rework router internals to operate on Requests for SSR

* Add createStaticRouter

* Wire up DataStaticRouter to wirk with createStaticHandler

* Add ssr example with data router

* Add changeset

* Ensure deferred data isn't active during SSR

* Bump bundle size

* Remove DataFunctionArgs.signal in favor of request.signal

* Lift pendingNavigationController/request creation

* Update changeset

* Clean up example using random bumber instead of date

* Handle fetch submit 405 errors

* Update tests for aborted static query calls

* update changelog

* Update stub static router with new internal deferred prop

* enhance abort signal handling via race

* Remove stale import

* Fix changeset

* Fix lint warnings

* expose createStaticHAndler through index.ts

* Rename static router "state" to "context"

* chore: remove no longer used boundaryId cancellation

Author: brophdawg11

.changeset/ninety-spoons-suffer.md

@@ -0,0 +1,67 @@
+---
+"react-router": patch
+"react-router-dom": patch
+"@remix-run/router": patch
+---
+
+feat: Add `createStaticRouter` for `@remix-run/router` SSR usage
+
+**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):**
+
+```jsx
+// Create a static handler
+let { dataRoutes, query } = 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 dataRoutes={dataRoutes} state={state} />
+  </React.StrictMode>
+);
+
+// Grab the hydrationData to send to the client for <DataBrowserRouter>
+let hydrationData = {
+  loaderData: state.loaderData,
+  actionData: state.actionData,
+  errors: state.errors,
+};
+```
+
+**Example usage (Data Requests):**
+
+```jsx
+// Create a static route handler
+let { queryRoute } = 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",
+  },
+});
+```

.eslintignore

@@ -3,4 +3,7 @@ node_modules/
 /docs/api
 examples/**/dist/
 packages/**/dist/
+packages/react-router-dom/server.d.ts
+packages/react-router-dom/server.js
+packages/react-router-dom/server.mjs
 tutorial/dist/

examples/ssr-data-router/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

examples/ssr-data-router/README.md

@@ -0,0 +1,22 @@
+---
+title: Data Router Server Rendering
+toc: false
+---
+
+# Data Router Server-side Rendering Example
+
+This example adds [server-side rendering](https://reactjs.org/docs/react-dom-server.html) (SSR) to our basic example using a data router.
+
+With SSR, the server renders your app and sends real HTML to the browser instead of an empty HTML document with a bunch of `<script>` tags. After the browser loads the HTML and JavaScript from the server, React "hydrates" the HTML document using the same components it used to render the app on the server.
+
+This example contains a server (see [server.js](server.js)) that can run in both development and production modes.
+
+In the browser entry point (see [src/entry.client.tsx](src/entry.client.tsx)), we use React Router like we would traditionally do in a purely client-side app and render a `<DataBrowserRouter>` to provide routing context to the rest of the app. The main difference is that instead of using `ReactDOM.render()` to render the app, since the HTML was already sent by the server, all we need is `ReactDOM.hydrate()`.
+
+On the server (see [src/entry.server.tsx](src/entry.server.tsx)), we create a static request handler using `createStaticHandler` and query for the incoming `Request` we get from Express (note that we convert the Express request to a Web Fetch Request). Once the router is finished with data loading, we use React Router's `<DataStaticRouter>` to render the app in the correct state.
+
+## Preview
+
+Open this example on [StackBlitz](https://stackblitz.com):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/ssr-data-router?file=src/App.tsx)

examples/ssr-data-router/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Router - Data Router SSR Example</title>
+    <link rel="stylesheet" href="/src/index.css" />
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <!--app-scripts-->
+    <script type="module" src="/src/entry.client.tsx"></script>
+  </body>
+</html>