remix-run · brophdawg11 · Jun 14, 2022 · Jun 14, 2022 · Jun 14, 2022 · Jun 14, 2022
diff --git a/.changeset/ninety-spoons-suffer.md b/.changeset/ninety-spoons-suffer.md
@@ -0,0 +1,7 @@
+---
+"react-router": patch
+"react-router-dom": patch
+"@remix-run/router": patch
+---
+
+feat: Add `createStaticRouter` for `@remix-run/router` SSR usage
diff --git a/.eslintignore b/.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/
diff --git a/examples/ssr-data-router/.stackblitzrc b/examples/ssr-data-router/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}
diff --git a/examples/ssr-data-router/README.md b/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)
diff --git a/examples/ssr-data-router/index.html b/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>