docs: listen for close event on response, not request (#11249)

* docs: listen for close event on response, not request

Fixes #11248

* chore: update contributors.yml

Author: faergeek

contributors.yml

@@ -71,6 +71,7 @@
 - emzoumpo
 - engpetermwangi
 - ericschn
+- faergeek
 - FilipJirsak
 - frontsideair
 - fyzhu

docs/guides/ssr.md

@@ -66,7 +66,7 @@ const app = express();
 let handler = createStaticHandler(routes);
 
 app.get("*", async (req, res) => {
-  let fetchRequest = createFetchRequest(req);
+  let fetchRequest = createFetchRequest(req, res);
   let context = await handler.query(fetchRequest);
 
   // We'll tackle rendering next...
@@ -81,13 +81,13 @@ const listener = app.listen(3000, () => {
 Note we have to first convert the incoming Express request into a Fetch request, which is what the static handler methods operate on. The `createFetchRequest` method is specific to an Express request and in this example is extracted from the `@remix-run/express` adapter:
 
 ```js filename=request.js
-module.exports = function createFetchRequest(req) {
+module.exports = function createFetchRequest(req, res) {
   let origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying
   let url = new URL(req.originalUrl || req.url, origin);
 
   let controller = new AbortController();
-  req.on("close", () => controller.abort());
+  res.on("close", () => controller.abort());
 
   let headers = new Headers();
 
@@ -121,7 +121,7 @@ Once we've loaded our data by executing all of the matched route loaders for the
 
 ```js filename=server.jsx lines=[5-16]
 app.get("*", async (req, res) => {
-  let fetchRequest = createFetchRequest(req);
+  let fetchRequest = createFetchRequest(req, res);
   let context = await handler.query(fetchRequest);
 
   let router = createStaticRouter(
@@ -181,7 +181,7 @@ If any loaders redirect, `handler.query` will return the `Response` directly so
 
 ```js filename=server.jsx lines=[5-10]
 app.get("*", async (req, res) => {
-  let fetchRequest = createFetchRequest(req);
+  let fetchRequest = createFetchRequest(req, res);
   let context = await handler.query(fetchRequest);
 
   if (

examples/ssr-data-router/server.js

@@ -54,7 +54,7 @@ async function createServer() {
       }
 
       try {
-        let appHtml = await render(req);
+        let appHtml = await render(req, res);
         let html = template.replace("<!--app-html-->", appHtml);
         res.setHeader("Content-Type", "text/html");
         return res.status(200).end(html);

examples/ssr-data-router/src/entry.server.tsx

@@ -8,9 +8,12 @@ import {
 } from "react-router-dom/server";
 import { routes } from "./App";
 
-export async function render(request: express.Request) {
+export async function render(
+  request: express.Request,
+  response: express.Response
+) {
   let { query, dataRoutes } = createStaticHandler(routes);
-  let remixRequest = createFetchRequest(request);
+  let remixRequest = createFetchRequest(request, response);
   let context = await query(remixRequest);
 
   if (context instanceof Response) {
@@ -29,13 +32,16 @@ export async function render(request: express.Request) {
   );
 }
 
-export function createFetchRequest(req: express.Request): Request {
+export function createFetchRequest(
+  req: express.Request,
+  res: express.Response
+): Request {
   let origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying
   let url = new URL(req.originalUrl || req.url, origin);
 
   let controller = new AbortController();
-  req.on("close", () => controller.abort());
+  res.on("close", () => controller.abort());
 
   let headers = new Headers();