@netlify/vite-plugin-react-router 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.1.0](https://github.com/netlify/remix-compute/compare/vite-plugin-react-router-v2.0.1...vite-plugin-react-router-v2.1.0) (2025-11-05)
+
+
+### Features
+
+* **@netlify/vite-plugin-react-router:** add edge support ([#562](https://github.com/netlify/remix-compute/issues/562)) ([bbcb41e](https://github.com/netlify/remix-compute/commit/bbcb41e9d6ffdb5483759fbb94fb5258092adf87))
+
 ## [2.0.1](https://github.com/netlify/remix-compute/compare/vite-plugin-react-router-v2.0.0...vite-plugin-react-router-v2.0.1) (2025-10-20)
 
 

package/README.md

@@ -1,14 +1,13 @@
 # React Router Adapter for Netlify
 
-The React Router Adapter for Netlify allows you to deploy your [React Router](https://reactrouter.com) app to
-[Netlify Functions](https://docs.netlify.com/functions/overview/).
+The React Router Adapter for Netlify allows you to deploy your [React Router](https://reactrouter.com) app to Netlify.
 
 ## How to use
 
 To deploy a React Router 7+ site to Netlify, install this package:
 
 ```sh
-npm install --save-dev @netlify/vite-plugin-react-router
+npm install @netlify/vite-plugin-react-router
 ```
 
 It's also recommended (but not required) to use the
@@ -38,6 +37,115 @@ export default defineConfig({
 })
 ```
 
+Your app is ready to [deploy to Netlify](https://docs.netlify.com/deploy/create-deploys/).
+
+### Deploying to Edge Functions
+
+By default, this plugin deploys your React Router app to
+[Netlify Functions](https://docs.netlify.com/functions/overview/) (Node.js runtime). You can optionally deploy to
+[Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/) (Deno runtime) instead.
+
+First, toggle the `edge` option:
+
+```typescript
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    tsconfigPaths(),
+    netlifyReactRouter({ edge: true }), // <- deploy to Edge Functions
+    netlify(),
+  ],
+})
+```
+
+Second, you **must** provide an `app/entry.server.tsx` (or `.jsx`) file that uses web-standard APIs compatible with the
+Deno runtime. Create a file with the following content:
+
+> [!IMPORTANT]
+>
+> This file uses `renderToReadableStream` (Web Streams API) instead of `renderToPipeableStream` (Node.js API), which is
+> required for the Deno runtime. You may customize your server entry file, but see below for important edge runtime
+> constraints.
+
+```tsx
+import type { AppLoadContext, EntryContext } from 'react-router'
+import { ServerRouter } from 'react-router'
+import { isbot } from 'isbot'
+import { renderToReadableStream } from 'react-dom/server'
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+) {
+  let shellRendered = false
+  const userAgent = request.headers.get('user-agent')
+
+  const body = await renderToReadableStream(<ServerRouter context={routerContext} url={request.url} />, {
+    onError(error: unknown) {
+      responseStatusCode = 500
+      // Log streaming rendering errors from inside the shell.  Don't log
+      // errors encountered during initial shell rendering since they'll
+      // reject and get logged in handleDocumentRequest.
+      if (shellRendered) {
+        console.error(error)
+      }
+    },
+  })
+  shellRendered = true
+
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+    await body.allReady
+  }
+
+  responseHeaders.set('Content-Type', 'text/html')
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  })
+}
+```
+
+You may need to `npm install isbot` if you do not have this dependency.
+
+Finally, if you have your own Netlify Functions (typically in `netlify/functions`) for which you've configured a `path`,
+you must exclude those paths to avoid conflicts with the generated React Router SSR handler:
+
+```typescript
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    tsconfigPaths(),
+    netlifyReactRouter({
+      edge: true,
+      excludedPaths: ['/ping', '/api/*', '/webhooks/*'],
+    }),
+    netlify(),
+  ],
+})
+```
+
+#### Moving back from Edge Functions to Functions
+
+To switch from Edge Functions back to Functions, you must:
+
+1. Remove the `edge: true` option from your `vite.config.ts`
+2. **Delete the `app/entry.server.tsx` file** (React Router will use its default Node.js-compatible entry)
+
+#### Edge runtime
+
+Before deploying to Edge Functions, review the Netlify Edge Functions documentation for important details:
+
+- [Runtime environment](https://docs.netlify.com/build/edge-functions/api/#runtime-environment) - Understand the Deno
+  runtime
+- [Supported Web APIs](https://docs.netlify.com/build/edge-functions/api/#supported-web-apis) - Check which APIs are
+  available
+- [Limitations](https://docs.netlify.com/build/edge-functions/limits/) - Be aware of resource limits and constraints
+
 ### Load context
 
 This plugin automatically includes all
@@ -71,7 +179,8 @@ type-safe `RouterContextProvider`. Note that this requires requires v2.0.0+ of `
 For example:
 
 ```tsx
-import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router/serverless'
+//                    NOTE: if setting `edge: true`, import from /edge ^ instead here
 import { useLoaderData } from 'react-router'
 import type { Route } from './+types/example'
 
@@ -101,10 +210,11 @@ To use middleware,
 that this requires requires v2.0.0+ of `@netlify/vite-plugin-react-router`.
 
 To access the [Netlify context](https://docs.netlify.com/build/functions/api/#netlify-specific-context-object)
-specifically, you must import our `RouterContextProvider` instance:
+specifically, you must import our `RouterContext` instance:
 
 ```tsx
-import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router/serverless'
+//                    NOTE: if setting `edge: true`, import from /edge ^ instead here
 
 import type { Route } from './+types/home'
 

package/dist/chunk-3EFABROO.mjs

@@ -0,0 +1,25 @@
+import {
+  createNetlifyRequestHandler,
+  createNetlifyRouterContext
+} from "./chunk-J5PMA2AP.mjs";
+
+// src/runtimes/netlify-functions.ts
+var netlifyRouterContext = createNetlifyRouterContext();
+function createRequestHandler({
+  build,
+  mode,
+  getLoadContext
+}) {
+  return createNetlifyRequestHandler({
+    build,
+    mode,
+    getLoadContext,
+    netlifyRouterContext,
+    runtimeName: "Node"
+  });
+}
+
+export {
+  netlifyRouterContext,
+  createRequestHandler
+};

package/dist/chunk-J5PMA2AP.mjs

@@ -0,0 +1,70 @@
+// src/lib/handler.ts
+import {
+  RouterContextProvider,
+  createRequestHandler as createReactRouterRequestHandler
+} from "react-router";
+function createNetlifyRequestHandler({
+  build,
+  mode,
+  getLoadContext,
+  netlifyRouterContext,
+  runtimeName
+}) {
+  const reactRouterHandler = createReactRouterRequestHandler(build, mode);
+  return async (request, netlifyContext) => {
+    const start = Date.now();
+    console.log(`[${request.method}] ${request.url}`);
+    try {
+      const getDefaultReactRouterContext = () => {
+        const ctx = new RouterContextProvider();
+        ctx.set(netlifyRouterContext, netlifyContext);
+        Object.assign(ctx, netlifyContext);
+        return ctx;
+      };
+      const reactRouterContext = await getLoadContext?.(request, netlifyContext) ?? getDefaultReactRouterContext();
+      const response = await reactRouterHandler(request, reactRouterContext);
+      response.headers.set("x-nf-runtime", runtimeName);
+      console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
+      return response;
+    } catch (error) {
+      console.error(error);
+      return new Response("Internal Error", { status: 500 });
+    }
+  };
+}
+
+// src/lib/context.ts
+import { createContext } from "react-router";
+function createNetlifyRouterContext() {
+  return createContext(
+    new Proxy(
+      // Can't reference `Netlify.context` here because it isn't set outside of a request lifecycle
+      {},
+      {
+        get(_target, prop, receiver) {
+          return Reflect.get(Netlify.context ?? {}, prop, receiver);
+        },
+        set(_target, prop, value, receiver) {
+          return Reflect.set(Netlify.context ?? {}, prop, value, receiver);
+        },
+        has(_target, prop) {
+          return Reflect.has(Netlify.context ?? {}, prop);
+        },
+        deleteProperty(_target, prop) {
+          return Reflect.deleteProperty(Netlify.context ?? {}, prop);
+        },
+        ownKeys(_target) {
+          return Reflect.ownKeys(Netlify.context ?? {});
+        },
+        getOwnPropertyDescriptor(_target, prop) {
+          return Reflect.getOwnPropertyDescriptor(Netlify.context ?? {}, prop);
+        }
+      }
+    )
+  );
+}
+
+export {
+  createNetlifyRequestHandler,
+  createNetlifyRouterContext
+};

package/dist/edge.d.mts

@@ -0,0 +1,29 @@
+import * as react_router from 'react-router';
+import { ServerBuild } from 'react-router';
+import { Context } from '@netlify/edge-functions';
+import { G as GetLoadContextFunction, R as RequestHandler } from './handler-4e_lz5jw.mjs';
+
+declare module 'react-router' {
+    interface AppLoadContext extends Context {
+    }
+}
+/**
+ * An instance of `RouterContext` providing access to
+ * [Netlify request context]{@link https://docs.netlify.com/build/edge-functions/api/#netlify-specific-context-object}
+ *
+ * @example context.get(netlifyRouterContext).geo?.country?.name
+ */
+declare const netlifyRouterContext: react_router.RouterContext<Partial<Context>>;
+/**
+ * Given a build and a callback to get the base loader context, this returns
+ * a Netlify Edge Function handler (https://docs.netlify.com/edge-functions/overview/) which renders the
+ * requested path. The loader context in this lifecycle will contain the Netlify Edge Functions context
+ * fields merged in.
+ */
+declare function createRequestHandler({ build, mode, getLoadContext, }: {
+    build: ServerBuild;
+    mode?: string;
+    getLoadContext?: GetLoadContextFunction<Context>;
+}): RequestHandler<Context>;
+
+export { createRequestHandler, netlifyRouterContext };

package/dist/edge.mjs

@@ -0,0 +1,24 @@
+import {
+  createNetlifyRequestHandler,
+  createNetlifyRouterContext
+} from "./chunk-J5PMA2AP.mjs";
+
+// src/runtimes/netlify-edge-functions.ts
+var netlifyRouterContext = createNetlifyRouterContext();
+function createRequestHandler({
+  build,
+  mode,
+  getLoadContext
+}) {
+  return createNetlifyRequestHandler({
+    build,
+    mode,
+    getLoadContext,
+    netlifyRouterContext,
+    runtimeName: "edge"
+  });
+}
+export {
+  createRequestHandler,
+  netlifyRouterContext
+};

package/dist/handler-4e_lz5jw.d.mts

@@ -0,0 +1,18 @@
+import { RouterContextProvider, AppLoadContext } from 'react-router';
+
+/**
+ * A function that returns the value to use as `context` in route `loader` and `action` functions.
+ *
+ * You can think of this as an escape hatch that allows you to pass environment/platform-specific
+ * values through to your loader/action.
+ *
+ * NOTE: v7.9.0 introduced a breaking change when the user opts in to `future.v8_middleware`. This
+ * requires returning an instance of `RouterContextProvider` instead of a plain object. We have a
+ * peer dependency on >=7.9.0 so we can safely *import* these, but we cannot assume the user has
+ * opted in to the flag.
+ */
+type GetLoadContextFunction<TNetlifyContext> = ((request: Request, context: TNetlifyContext) => Promise<RouterContextProvider> | RouterContextProvider) | ((request: Request, context: TNetlifyContext) => Promise<AppLoadContext> | AppLoadContext);
+
+type RequestHandler<TNetlifyContext> = (request: Request, context: TNetlifyContext) => Promise<Response>;
+
+export type { GetLoadContextFunction as G, RequestHandler as R };

package/dist/index.d.mts

@@ -1,46 +1,26 @@
-import * as react_router from 'react-router';
-import { AppLoadContext, RouterContextProvider, ServerBuild } from 'react-router';
-import { Context } from '@netlify/functions';
+export { GetLoadContextFunction, RequestHandler, createRequestHandler, netlifyRouterContext } from './serverless.mjs';
 import { Plugin } from 'vite';
+import 'react-router';
+import '@netlify/functions';
+import './handler-4e_lz5jw.mjs';
 
-declare module 'react-router' {
-    interface AppLoadContext extends Context {
-    }
+interface NetlifyPluginOptions {
+    /**
+     * Deploy to Netlify Edge Functions instead of Netlify Functions.
+     * @default false
+     */
+    edge?: boolean;
+    /**
+     * Paths to exclude from being handled by the React Router handler.
+     *
+     * @IMPORTANT If you have opted in to edge rendering with `edge: true` and you have your own Netlify
+     * Functions running on custom `path`s, you must exclude those paths here to avoid conflicts.
+     *
+     * @type {URLPattern[]}
+     * @default []
+     */
+    excludedPaths?: string[];
 }
-/**
- * A function that returns the value to use as `context` in route `loader` and `action` functions.
- *
- * You can think of this as an escape hatch that allows you to pass environment/platform-specific
- * values through to your loader/action.
- *
- * NOTE: v7.9.0 introduced a breaking change when the user opts in to `future.v8_middleware`. This
- * requires returning an instance of `RouterContextProvider` instead of a plain object. We have a
- * peer dependency on >=7.9.0 so we can safely *import* these, but we cannot assume the user has
- * opted in to the flag.
- */
-type GetLoadContextFunction = GetLoadContextFunction_V7 | GetLoadContextFunction_V8;
-type GetLoadContextFunction_V7 = (request: Request, context: Context) => Promise<AppLoadContext> | AppLoadContext;
-type GetLoadContextFunction_V8 = (request: Request, context: Context) => Promise<RouterContextProvider> | RouterContextProvider;
-type RequestHandler = (request: Request, context: Context) => Promise<Response>;
-/**
- * An instance of `ReactContextProvider` providing access to
- * [Netlify request context]{@link https://docs.netlify.com/build/functions/api/#netlify-specific-context-object}
- *
- * @example context.get(netlifyRouterContext).geo?.country?.name
- */
-declare const netlifyRouterContext: react_router.RouterContext<Partial<Context>>;
-/**
- * Given a build and a callback to get the base loader context, this returns
- * a Netlify Function handler (https://docs.netlify.com/functions/overview/) which renders the
- * requested path. The loader context in this lifecycle will contain the Netlify Functions context
- * fields merged in.
- */
-declare function createRequestHandler({ build, mode, getLoadContext, }: {
-    build: ServerBuild;
-    mode?: string;
-    getLoadContext?: GetLoadContextFunction;
-}): RequestHandler;
+declare function netlifyPlugin(options?: NetlifyPluginOptions): Plugin;
 
-declare function netlifyPlugin(): Plugin;
-
-export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default, netlifyRouterContext };
+export { netlifyPlugin as default };

package/dist/index.d.ts

@@ -1,12 +1,8 @@
 import * as react_router from 'react-router';
-import { AppLoadContext, RouterContextProvider, ServerBuild } from 'react-router';
+import { RouterContextProvider, AppLoadContext, ServerBuild } from 'react-router';
 import { Context } from '@netlify/functions';
 import { Plugin } from 'vite';
 
-declare module 'react-router' {
-    interface AppLoadContext extends Context {
-    }
-}
 /**
  * A function that returns the value to use as `context` in route `loader` and `action` functions.
  *
@@ -18,12 +14,18 @@ declare module 'react-router' {
  * peer dependency on >=7.9.0 so we can safely *import* these, but we cannot assume the user has
  * opted in to the flag.
  */
-type GetLoadContextFunction = GetLoadContextFunction_V7 | GetLoadContextFunction_V8;
-type GetLoadContextFunction_V7 = (request: Request, context: Context) => Promise<AppLoadContext> | AppLoadContext;
-type GetLoadContextFunction_V8 = (request: Request, context: Context) => Promise<RouterContextProvider> | RouterContextProvider;
-type RequestHandler = (request: Request, context: Context) => Promise<Response>;
+type GetLoadContextFunction$1<TNetlifyContext> = ((request: Request, context: TNetlifyContext) => Promise<RouterContextProvider> | RouterContextProvider) | ((request: Request, context: TNetlifyContext) => Promise<AppLoadContext> | AppLoadContext);
+
+type RequestHandler$1<TNetlifyContext> = (request: Request, context: TNetlifyContext) => Promise<Response>;
+
+declare module 'react-router' {
+    interface AppLoadContext extends Context {
+    }
+}
+type GetLoadContextFunction = GetLoadContextFunction$1<Context>;
+type RequestHandler = RequestHandler$1<Context>;
 /**
- * An instance of `ReactContextProvider` providing access to
+ * An instance of `RouterContext` providing access to
  * [Netlify request context]{@link https://docs.netlify.com/build/functions/api/#netlify-specific-context-object}
  *
  * @example context.get(netlifyRouterContext).geo?.country?.name
@@ -41,6 +43,23 @@ declare function createRequestHandler({ build, mode, getLoadContext, }: {
     getLoadContext?: GetLoadContextFunction;
 }): RequestHandler;
 
-declare function netlifyPlugin(): Plugin;
+interface NetlifyPluginOptions {
+    /**
+     * Deploy to Netlify Edge Functions instead of Netlify Functions.
+     * @default false
+     */
+    edge?: boolean;
+    /**
+     * Paths to exclude from being handled by the React Router handler.
+     *
+     * @IMPORTANT If you have opted in to edge rendering with `edge: true` and you have your own Netlify
+     * Functions running on custom `path`s, you must exclude those paths here to avoid conflicts.
+     *
+     * @type {URLPattern[]}
+     * @default []
+     */
+    excludedPaths?: string[];
+}
+declare function netlifyPlugin(options?: NetlifyPluginOptions): Plugin;
 
 export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default, netlifyRouterContext };

package/dist/index.js

@@ -26,13 +26,42 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/server.ts
+// src/lib/handler.ts
 var import_react_router = require("react-router");
-var netlifyRouterContext = (
-  // We must use a singleton because Remix contexts rely on referential equality.
-  // We can't hook into the request lifecycle in dev mode, so we use a Proxy to always read from the
-  // current `Netlify.context` value, which is always contextual to the in-flight request.
-  (0, import_react_router.createContext)(
+function createNetlifyRequestHandler({
+  build,
+  mode,
+  getLoadContext,
+  netlifyRouterContext: netlifyRouterContext2,
+  runtimeName
+}) {
+  const reactRouterHandler = (0, import_react_router.createRequestHandler)(build, mode);
+  return async (request, netlifyContext) => {
+    const start = Date.now();
+    console.log(`[${request.method}] ${request.url}`);
+    try {
+      const getDefaultReactRouterContext = () => {
+        const ctx = new import_react_router.RouterContextProvider();
+        ctx.set(netlifyRouterContext2, netlifyContext);
+        Object.assign(ctx, netlifyContext);
+        return ctx;
+      };
+      const reactRouterContext = await getLoadContext?.(request, netlifyContext) ?? getDefaultReactRouterContext();
+      const response = await reactRouterHandler(request, reactRouterContext);
+      response.headers.set("x-nf-runtime", runtimeName);
+      console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
+      return response;
+    } catch (error) {
+      console.error(error);
+      return new Response("Internal Error", { status: 500 });
+    }
+  };
+}
+
+// src/lib/context.ts
+var import_react_router2 = require("react-router");
+function createNetlifyRouterContext() {
+  return (0, import_react_router2.createContext)(
     new Proxy(
       // Can't reference `Netlify.context` here because it isn't set outside of a request lifecycle
       {},
@@ -57,34 +86,23 @@ var netlifyRouterContext = (
         }
       }
     )
-  )
-);
+  );
+}
+
+// src/runtimes/netlify-functions.ts
+var netlifyRouterContext = createNetlifyRouterContext();
 function createRequestHandler({
   build,
   mode,
   getLoadContext
 }) {
-  const reactRouterHandler = (0, import_react_router.createRequestHandler)(build, mode);
-  return async (request, netlifyContext) => {
-    const start = Date.now();
-    console.log(`[${request.method}] ${request.url}`);
-    try {
-      const getDefaultReactRouterContext = () => {
-        const ctx = new import_react_router.RouterContextProvider();
-        ctx.set(netlifyRouterContext, netlifyContext);
-        Object.assign(ctx, netlifyContext);
-        return ctx;
-      };
-      const reactRouterContext = await getLoadContext?.(request, netlifyContext) ?? getDefaultReactRouterContext();
-      const response = await reactRouterHandler(request, reactRouterContext);
-      response.headers.set("x-nf-runtime", "Node");
-      console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
-      return response;
-    } catch (error) {
-      console.error(error);
-      return new Response("Internal Error", { status: 500 });
-    }
-  };
+  return createNetlifyRequestHandler({
+    build,
+    mode,
+    getLoadContext,
+    netlifyRouterContext,
+    runtimeName: "Node"
+  });
 }
 
 // src/plugin.ts
@@ -94,10 +112,11 @@ var import_posix = require("path/posix");
 
 // package.json
 var name = "@netlify/vite-plugin-react-router";
-var version = "2.0.1";
+var version = "2.1.0";
 
 // src/plugin.ts
 var NETLIFY_FUNCTIONS_DIR = ".netlify/v1/functions";
+var NETLIFY_EDGE_FUNCTIONS_DIR = ".netlify/v1/edge-functions";
 var FUNCTION_FILENAME = "react-router-server.mjs";
 var FUNCTION_HANDLER_CHUNK = "server";
 var FUNCTION_HANDLER_MODULE_ID = "virtual:netlify-server";
@@ -106,14 +125,24 @@ var toPosixPath = (path) => path.split(import_node_path.sep).join(import_posix.s
 var FUNCTION_HANDLER = (
   /* js */
   `
-import { createRequestHandler } from "@netlify/vite-plugin-react-router";
+import { createRequestHandler } from "@netlify/vite-plugin-react-router/serverless";
+import * as build from "virtual:react-router/server-build";
+export default createRequestHandler({
+  build,
+});
+`
+);
+var EDGE_FUNCTION_HANDLER = (
+  /* js */
+  `
+import { createRequestHandler } from "@netlify/vite-plugin-react-router/edge";
 import * as build from "virtual:react-router/server-build";
 export default createRequestHandler({
   build,
 });
 `
 );
-function generateNetlifyFunction(handlerPath) {
+function generateNetlifyFunction(handlerPath, excludedPath) {
   return (
     /* js */
     `
@@ -123,12 +152,31 @@ function generateNetlifyFunction(handlerPath) {
       name: "React Router server handler",
       generator: "${name}@${version}",
       path: "/*",
+      excludedPath: ${JSON.stringify(excludedPath)},
       preferStatic: true,
     };
     `
   );
 }
-function netlifyPlugin() {
+function generateEdgeFunction(handlerPath, excludedPath) {
+  return (
+    /* js */
+    `
+    export { default } from "${handlerPath}";
+
+    export const config = {
+      name: "React Router server handler",
+      generator: "${name}@${version}",
+      cache: "manual",
+      path: "/*",
+      excludedPath: ${JSON.stringify(excludedPath)},
+    };
+    `
+  );
+}
+function netlifyPlugin(options = {}) {
+  const edge = options.edge ?? false;
+  const additionalExcludedPaths = options.excludedPaths ?? [];
   let resolvedConfig;
   let isProductionSsrBuild = false;
   return {
@@ -149,6 +197,19 @@ function netlifyPlugin() {
           config.build.rollupOptions.output = {};
         }
         config.build.rollupOptions.output.entryFileNames = "[name].js";
+        if (edge) {
+          config.ssr = {
+            ...config.ssr,
+            target: "webworker",
+            // Bundle everything except Node.js built-ins (which are supported but must use the `node:` prefix):
+            // https://docs.netlify.com/build/edge-functions/api/#runtime-environment
+            noExternal: /^(?!node:).*$/,
+            resolve: {
+              ...config.resolve,
+              conditions: ["worker", "deno", "browser"]
+            }
+          };
+        }
       }
     },
     async resolveId(source) {
@@ -159,7 +220,7 @@ function netlifyPlugin() {
     // See https://vitejs.dev/guide/api-plugin#virtual-modules-convention.
     load(id) {
       if (id === RESOLVED_FUNCTION_HANDLER_MODULE_ID) {
-        return FUNCTION_HANDLER;
+        return edge ? EDGE_FUNCTION_HANDLER : FUNCTION_HANDLER;
       }
     },
     async configResolved(config) {
@@ -168,11 +229,32 @@ function netlifyPlugin() {
     // See https://rollupjs.org/plugin-development/#writebundle.
     async writeBundle() {
       if (isProductionSsrBuild) {
-        const functionsDirectory = (0, import_node_path.join)(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR);
-        await (0, import_promises.mkdir)(functionsDirectory, { recursive: true });
         const handlerPath = (0, import_node_path.join)(resolvedConfig.build.outDir, `${FUNCTION_HANDLER_CHUNK}.js`);
-        const relativeHandlerPath = toPosixPath((0, import_node_path.relative)(functionsDirectory, handlerPath));
-        await (0, import_promises.writeFile)((0, import_node_path.join)(functionsDirectory, FUNCTION_FILENAME), generateNetlifyFunction(relativeHandlerPath));
+        if (edge) {
+          const clientDir = (0, import_node_path.join)(resolvedConfig.build.outDir, "..", "client");
+          const entries = await (0, import_promises.readdir)(clientDir, { withFileTypes: true });
+          const excludedPath = [
+            "/.netlify/*",
+            ...entries.map((entry) => entry.isDirectory() ? `/${entry.name}/*` : `/${entry.name}`),
+            ...additionalExcludedPaths
+          ];
+          const edgeFunctionsDir = (0, import_node_path.join)(resolvedConfig.root, NETLIFY_EDGE_FUNCTIONS_DIR);
+          await (0, import_promises.mkdir)(edgeFunctionsDir, { recursive: true });
+          const relativeHandlerPath = toPosixPath((0, import_node_path.relative)(edgeFunctionsDir, handlerPath));
+          await (0, import_promises.writeFile)(
+            (0, import_node_path.join)(edgeFunctionsDir, FUNCTION_FILENAME),
+            generateEdgeFunction(relativeHandlerPath, excludedPath)
+          );
+        } else {
+          const functionsDir = (0, import_node_path.join)(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR);
+          await (0, import_promises.mkdir)(functionsDir, { recursive: true });
+          const relativeHandlerPath = toPosixPath((0, import_node_path.relative)(functionsDir, handlerPath));
+          const excludedPath = ["/.netlify/*", ...additionalExcludedPaths];
+          await (0, import_promises.writeFile)(
+            (0, import_node_path.join)(functionsDir, FUNCTION_FILENAME),
+            generateNetlifyFunction(relativeHandlerPath, excludedPath)
+          );
+        }
       }
     }
   };

package/dist/index.mjs

@@ -1,79 +1,21 @@
-// src/server.ts
 import {
-  createContext,
-  RouterContextProvider,
-  createRequestHandler as createReactRouterRequestHandler
-} from "react-router";
-var netlifyRouterContext = (
-  // We must use a singleton because Remix contexts rely on referential equality.
-  // We can't hook into the request lifecycle in dev mode, so we use a Proxy to always read from the
-  // current `Netlify.context` value, which is always contextual to the in-flight request.
-  createContext(
-    new Proxy(
-      // Can't reference `Netlify.context` here because it isn't set outside of a request lifecycle
-      {},
-      {
-        get(_target, prop, receiver) {
-          return Reflect.get(Netlify.context ?? {}, prop, receiver);
-        },
-        set(_target, prop, value, receiver) {
-          return Reflect.set(Netlify.context ?? {}, prop, value, receiver);
-        },
-        has(_target, prop) {
-          return Reflect.has(Netlify.context ?? {}, prop);
-        },
-        deleteProperty(_target, prop) {
-          return Reflect.deleteProperty(Netlify.context ?? {}, prop);
-        },
-        ownKeys(_target) {
-          return Reflect.ownKeys(Netlify.context ?? {});
-        },
-        getOwnPropertyDescriptor(_target, prop) {
-          return Reflect.getOwnPropertyDescriptor(Netlify.context ?? {}, prop);
-        }
-      }
-    )
-  )
-);
-function createRequestHandler({
-  build,
-  mode,
-  getLoadContext
-}) {
-  const reactRouterHandler = createReactRouterRequestHandler(build, mode);
-  return async (request, netlifyContext) => {
-    const start = Date.now();
-    console.log(`[${request.method}] ${request.url}`);
-    try {
-      const getDefaultReactRouterContext = () => {
-        const ctx = new RouterContextProvider();
-        ctx.set(netlifyRouterContext, netlifyContext);
-        Object.assign(ctx, netlifyContext);
-        return ctx;
-      };
-      const reactRouterContext = await getLoadContext?.(request, netlifyContext) ?? getDefaultReactRouterContext();
-      const response = await reactRouterHandler(request, reactRouterContext);
-      response.headers.set("x-nf-runtime", "Node");
-      console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
-      return response;
-    } catch (error) {
-      console.error(error);
-      return new Response("Internal Error", { status: 500 });
-    }
-  };
-}
+  createRequestHandler,
+  netlifyRouterContext
+} from "./chunk-3EFABROO.mjs";
+import "./chunk-J5PMA2AP.mjs";
 
 // src/plugin.ts
-import { mkdir, writeFile } from "node:fs/promises";
+import { mkdir, writeFile, readdir } from "node:fs/promises";
 import { join, relative, sep } from "node:path";
 import { sep as posixSep } from "node:path/posix";
 
 // package.json
 var name = "@netlify/vite-plugin-react-router";
-var version = "2.0.1";
+var version = "2.1.0";
 
 // src/plugin.ts
 var NETLIFY_FUNCTIONS_DIR = ".netlify/v1/functions";
+var NETLIFY_EDGE_FUNCTIONS_DIR = ".netlify/v1/edge-functions";
 var FUNCTION_FILENAME = "react-router-server.mjs";
 var FUNCTION_HANDLER_CHUNK = "server";
 var FUNCTION_HANDLER_MODULE_ID = "virtual:netlify-server";
@@ -82,14 +24,24 @@ var toPosixPath = (path) => path.split(sep).join(posixSep);
 var FUNCTION_HANDLER = (
   /* js */
   `
-import { createRequestHandler } from "@netlify/vite-plugin-react-router";
+import { createRequestHandler } from "@netlify/vite-plugin-react-router/serverless";
+import * as build from "virtual:react-router/server-build";
+export default createRequestHandler({
+  build,
+});
+`
+);
+var EDGE_FUNCTION_HANDLER = (
+  /* js */
+  `
+import { createRequestHandler } from "@netlify/vite-plugin-react-router/edge";
 import * as build from "virtual:react-router/server-build";
 export default createRequestHandler({
   build,
 });
 `
 );
-function generateNetlifyFunction(handlerPath) {
+function generateNetlifyFunction(handlerPath, excludedPath) {
   return (
     /* js */
     `
@@ -99,12 +51,31 @@ function generateNetlifyFunction(handlerPath) {
       name: "React Router server handler",
       generator: "${name}@${version}",
       path: "/*",
+      excludedPath: ${JSON.stringify(excludedPath)},
       preferStatic: true,
     };
     `
   );
 }
-function netlifyPlugin() {
+function generateEdgeFunction(handlerPath, excludedPath) {
+  return (
+    /* js */
+    `
+    export { default } from "${handlerPath}";
+
+    export const config = {
+      name: "React Router server handler",
+      generator: "${name}@${version}",
+      cache: "manual",
+      path: "/*",
+      excludedPath: ${JSON.stringify(excludedPath)},
+    };
+    `
+  );
+}
+function netlifyPlugin(options = {}) {
+  const edge = options.edge ?? false;
+  const additionalExcludedPaths = options.excludedPaths ?? [];
   let resolvedConfig;
   let isProductionSsrBuild = false;
   return {
@@ -125,6 +96,19 @@ function netlifyPlugin() {
           config.build.rollupOptions.output = {};
         }
         config.build.rollupOptions.output.entryFileNames = "[name].js";
+        if (edge) {
+          config.ssr = {
+            ...config.ssr,
+            target: "webworker",
+            // Bundle everything except Node.js built-ins (which are supported but must use the `node:` prefix):
+            // https://docs.netlify.com/build/edge-functions/api/#runtime-environment
+            noExternal: /^(?!node:).*$/,
+            resolve: {
+              ...config.resolve,
+              conditions: ["worker", "deno", "browser"]
+            }
+          };
+        }
       }
     },
     async resolveId(source) {
@@ -135,7 +119,7 @@ function netlifyPlugin() {
     // See https://vitejs.dev/guide/api-plugin#virtual-modules-convention.
     load(id) {
       if (id === RESOLVED_FUNCTION_HANDLER_MODULE_ID) {
-        return FUNCTION_HANDLER;
+        return edge ? EDGE_FUNCTION_HANDLER : FUNCTION_HANDLER;
       }
     },
     async configResolved(config) {
@@ -144,11 +128,32 @@ function netlifyPlugin() {
     // See https://rollupjs.org/plugin-development/#writebundle.
     async writeBundle() {
       if (isProductionSsrBuild) {
-        const functionsDirectory = join(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR);
-        await mkdir(functionsDirectory, { recursive: true });
         const handlerPath = join(resolvedConfig.build.outDir, `${FUNCTION_HANDLER_CHUNK}.js`);
-        const relativeHandlerPath = toPosixPath(relative(functionsDirectory, handlerPath));
-        await writeFile(join(functionsDirectory, FUNCTION_FILENAME), generateNetlifyFunction(relativeHandlerPath));
+        if (edge) {
+          const clientDir = join(resolvedConfig.build.outDir, "..", "client");
+          const entries = await readdir(clientDir, { withFileTypes: true });
+          const excludedPath = [
+            "/.netlify/*",
+            ...entries.map((entry) => entry.isDirectory() ? `/${entry.name}/*` : `/${entry.name}`),
+            ...additionalExcludedPaths
+          ];
+          const edgeFunctionsDir = join(resolvedConfig.root, NETLIFY_EDGE_FUNCTIONS_DIR);
+          await mkdir(edgeFunctionsDir, { recursive: true });
+          const relativeHandlerPath = toPosixPath(relative(edgeFunctionsDir, handlerPath));
+          await writeFile(
+            join(edgeFunctionsDir, FUNCTION_FILENAME),
+            generateEdgeFunction(relativeHandlerPath, excludedPath)
+          );
+        } else {
+          const functionsDir = join(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR);
+          await mkdir(functionsDir, { recursive: true });
+          const relativeHandlerPath = toPosixPath(relative(functionsDir, handlerPath));
+          const excludedPath = ["/.netlify/*", ...additionalExcludedPaths];
+          await writeFile(
+            join(functionsDir, FUNCTION_FILENAME),
+            generateNetlifyFunction(relativeHandlerPath, excludedPath)
+          );
+        }
       }
     }
   };

package/dist/serverless.d.mts

@@ -0,0 +1,31 @@
+import * as react_router from 'react-router';
+import { ServerBuild } from 'react-router';
+import { Context } from '@netlify/functions';
+import { G as GetLoadContextFunction$1, R as RequestHandler$1 } from './handler-4e_lz5jw.mjs';
+
+declare module 'react-router' {
+    interface AppLoadContext extends Context {
+    }
+}
+type GetLoadContextFunction = GetLoadContextFunction$1<Context>;
+type RequestHandler = RequestHandler$1<Context>;
+/**
+ * An instance of `RouterContext` providing access to
+ * [Netlify request context]{@link https://docs.netlify.com/build/functions/api/#netlify-specific-context-object}
+ *
+ * @example context.get(netlifyRouterContext).geo?.country?.name
+ */
+declare const netlifyRouterContext: react_router.RouterContext<Partial<Context>>;
+/**
+ * Given a build and a callback to get the base loader context, this returns
+ * a Netlify Function handler (https://docs.netlify.com/functions/overview/) which renders the
+ * requested path. The loader context in this lifecycle will contain the Netlify Functions context
+ * fields merged in.
+ */
+declare function createRequestHandler({ build, mode, getLoadContext, }: {
+    build: ServerBuild;
+    mode?: string;
+    getLoadContext?: GetLoadContextFunction;
+}): RequestHandler;
+
+export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyRouterContext };

package/dist/serverless.mjs

@@ -0,0 +1,9 @@
+import {
+  createRequestHandler,
+  netlifyRouterContext
+} from "./chunk-3EFABROO.mjs";
+import "./chunk-J5PMA2AP.mjs";
+export {
+  createRequestHandler,
+  netlifyRouterContext
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/vite-plugin-react-router",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React Router 7+ Vite plugin for Netlify",
   "type": "commonjs",
   "main": "./dist/index.js",
@@ -16,6 +16,14 @@
         "types": "./dist/index.d.mts",
         "default": "./dist/index.mjs"
       }
+    },
+    "./serverless": {
+      "types": "./dist/serverless.d.mts",
+      "default": "./dist/serverless.mjs"
+    },
+    "./edge": {
+      "types": "./dist/edge.d.mts",
+      "default": "./dist/edge.mjs"
     }
   },
   "files": [
@@ -43,7 +51,8 @@
     "isbot": "^5.0.0"
   },
   "devDependencies": {
-    "@netlify/functions": "^3.1.9",
+    "@netlify/edge-functions": "^2.11.0",
+    "@netlify/functions": "^3.1.10",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "react": "^18.2.0",
@@ -63,7 +72,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup-node src/index.ts --format esm,cjs --dts --target node18 --clean",
-    "build:watch": "pnpm run build --watch"
+    "build": "rm -rf dist && tsup-node",
+    "build:watch": "pnpm run build --watch",
+    "publint": "publint --strict"
   }
 }