diff --git a/docs/config/server-options.md b/docs/config/server-options.md
index 0c4098fd0e141d..9efdd443fea150 100644
--- a/docs/config/server-options.md
+++ b/docs/config/server-options.md
@@ -249,9 +249,7 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   })
   // Use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     // Since `appType` is `'custom'`, should serve response here.
diff --git a/docs/guide/api-javascript.md b/docs/guide/api-javascript.md
index 89197c937b73fc..823552e6f0343c 100644
--- a/docs/guide/api-javascript.md
+++ b/docs/guide/api-javascript.md
@@ -67,9 +67,7 @@ const vite = await createServer({
   },
 })
 
-server.use((req, res, next) => {
-  vite.middlewares.handle(req, res, next)
-})
+parentServer.use(vite.middlewares)
 ```
 
 </details>
diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md
index 76572f575da929..1cfce0ae3671e6 100644
--- a/docs/guide/ssr.md
+++ b/docs/guide/ssr.md
@@ -89,13 +89,11 @@ async function createServer() {
 
   // Use vite's connect instance as middleware. If you use your own
   // express router (express.Router()), you should use router.use
-  app.use((req, res, next) => {
-    // When the server restarts (for example after the user modifies
-    // vite.config.js), `vite.middlewares` will be reassigned. Calling
-    // `vite.middlewares` inside a wrapper handler ensures that the
-    // latest Vite middlewares are always used.
-    vite.middlewares.handle(req, res, next)
-  })
+  // When the server restarts (for example after the user modifies
+  // vite.config.js), `vite.middlewares` is still going to be the same
+  // reference (with a new internal stack of Vite and plugin-injected
+  // middlewares. The following is valid even after restarts.
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     // serve index.html - we will tackle this next
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index 0370d7717dd3aa..7aeb6cb9065593 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -963,9 +963,16 @@ async function restartServer(server: ViteDevServer) {
     await server.close()
 
     // Assign new server props to existing server instance
+    const middlewares = server.middlewares
     newServer._configServerPort = server._configServerPort
     newServer._currentServerPort = server._currentServerPort
     Object.assign(server, newServer)
+
+    // Keep the same connect instance so app.use(vite.middlewares) works
+    // after a restart in middlewareMode (.route is always '/')
+    middlewares.stack = newServer.middlewares.stack
+    server.middlewares = middlewares
+
     // Rebind internal server variable so functions reference the user server
     newServer._setInternalServer(server)
   }
diff --git a/playground/css-lightningcss-proxy/server.js b/playground/css-lightningcss-proxy/server.js
index a8212e797cbdee..a482de69e9b5ab 100644
--- a/playground/css-lightningcss-proxy/server.js
+++ b/playground/css-lightningcss-proxy/server.js
@@ -45,9 +45,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res, next) => {
     try {
diff --git a/playground/json/server.js b/playground/json/server.js
index 9cb8c49f506972..982b7dcc09d30b 100644
--- a/playground/json/server.js
+++ b/playground/json/server.js
@@ -37,9 +37,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     },
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/optimize-missing-deps/server.js b/playground/optimize-missing-deps/server.js
index ecc31e2f02446a..411c3342b02d9c 100644
--- a/playground/optimize-missing-deps/server.js
+++ b/playground/optimize-missing-deps/server.js
@@ -26,9 +26,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     },
     appType: 'custom',
   })
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr-conditions/server.js b/playground/ssr-conditions/server.js
index ad3b4229670ec1..aa26dfb0cb8607 100644
--- a/playground/ssr-conditions/server.js
+++ b/playground/ssr-conditions/server.js
@@ -35,9 +35,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
 
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr-deps/server.js b/playground/ssr-deps/server.js
index 2b22de20314fcf..05e86a863ea744 100644
--- a/playground/ssr-deps/server.js
+++ b/playground/ssr-deps/server.js
@@ -84,9 +84,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     ],
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr-html/server.js b/playground/ssr-html/server.js
index ad90c09a9aa389..0c4deacfc64f2e 100644
--- a/playground/ssr-html/server.js
+++ b/playground/ssr-html/server.js
@@ -66,9 +66,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     ],
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res, next) => {
     try {
diff --git a/playground/ssr-noexternal/server.js b/playground/ssr-noexternal/server.js
index da5e9036bd22d4..c13fc90956d3c1 100644
--- a/playground/ssr-noexternal/server.js
+++ b/playground/ssr-noexternal/server.js
@@ -44,9 +44,7 @@ export async function createServer(
       },
       appType: 'custom',
     })
-    app.use((req, res, next) => {
-      vite.middlewares.handle(req, res, next)
-    })
+    app.use(vite.middlewares)
   }
 
   app.use('*', async (req, res) => {
diff --git a/playground/ssr-pug/server.js b/playground/ssr-pug/server.js
index 58f84ccf7c1a1d..222b51ae216638 100644
--- a/playground/ssr-pug/server.js
+++ b/playground/ssr-pug/server.js
@@ -45,9 +45,7 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr/server.js b/playground/ssr/server.js
index 3d7c7dd4a63baa..33f4369220d4f4 100644
--- a/playground/ssr/server.js
+++ b/playground/ssr/server.js
@@ -39,9 +39,7 @@ export async function createServer(
     customLogger,
   })
   // use vite's connect instance as middleware
-  app.use((req, res, next) => {
-    vite.middlewares.handle(req, res, next)
-  })
+  app.use(vite.middlewares)
 
   app.use('*', async (req, res, next) => {
     try {