diff --git a/docs/config/server-options.md b/docs/config/server-options.md
index 9efdd443fea150..0c4098fd0e141d 100644
--- a/docs/config/server-options.md
+++ b/docs/config/server-options.md
@@ -249,7 +249,9 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   })
   // Use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res) => {
     // Since `appType` is `'custom'`, should serve response here.
diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md
index 0913c412d0f865..76572f575da929 100644
--- a/docs/guide/ssr.md
+++ b/docs/guide/ssr.md
@@ -89,7 +89,13 @@ 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(vite.middlewares)
+  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)
+  })
 
   app.use('*', async (req, res) => {
     // serve index.html - we will tackle this next
diff --git a/playground/css-lightningcss-proxy/server.js b/playground/css-lightningcss-proxy/server.js
index a482de69e9b5ab..a8212e797cbdee 100644
--- a/playground/css-lightningcss-proxy/server.js
+++ b/playground/css-lightningcss-proxy/server.js
@@ -45,7 +45,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
   // use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res, next) => {
     try {
diff --git a/playground/json/server.js b/playground/json/server.js
index 982b7dcc09d30b..9cb8c49f506972 100644
--- a/playground/json/server.js
+++ b/playground/json/server.js
@@ -37,7 +37,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     },
   })
   // use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/optimize-missing-deps/server.js b/playground/optimize-missing-deps/server.js
index 411c3342b02d9c..ecc31e2f02446a 100644
--- a/playground/optimize-missing-deps/server.js
+++ b/playground/optimize-missing-deps/server.js
@@ -26,7 +26,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     },
     appType: 'custom',
   })
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr-conditions/server.js b/playground/ssr-conditions/server.js
index aa26dfb0cb8607..ad3b4229670ec1 100644
--- a/playground/ssr-conditions/server.js
+++ b/playground/ssr-conditions/server.js
@@ -35,7 +35,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
 
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr-deps/server.js b/playground/ssr-deps/server.js
index 05e86a863ea744..2b22de20314fcf 100644
--- a/playground/ssr-deps/server.js
+++ b/playground/ssr-deps/server.js
@@ -84,7 +84,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     ],
   })
   // use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr-html/server.js b/playground/ssr-html/server.js
index 0c4deacfc64f2e..ad90c09a9aa389 100644
--- a/playground/ssr-html/server.js
+++ b/playground/ssr-html/server.js
@@ -66,7 +66,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     ],
   })
   // use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res, next) => {
     try {
diff --git a/playground/ssr-noexternal/server.js b/playground/ssr-noexternal/server.js
index c13fc90956d3c1..da5e9036bd22d4 100644
--- a/playground/ssr-noexternal/server.js
+++ b/playground/ssr-noexternal/server.js
@@ -44,7 +44,9 @@ export async function createServer(
       },
       appType: 'custom',
     })
-    app.use(vite.middlewares)
+    app.use((req, res, next) => {
+      vite.middlewares.handle(req, res, next)
+    })
   }
 
   app.use('*', async (req, res) => {
diff --git a/playground/ssr-pug/server.js b/playground/ssr-pug/server.js
index 222b51ae216638..58f84ccf7c1a1d 100644
--- a/playground/ssr-pug/server.js
+++ b/playground/ssr-pug/server.js
@@ -45,7 +45,9 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
   })
   // use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res) => {
     try {
diff --git a/playground/ssr/server.js b/playground/ssr/server.js
index 33f4369220d4f4..3d7c7dd4a63baa 100644
--- a/playground/ssr/server.js
+++ b/playground/ssr/server.js
@@ -39,7 +39,9 @@ export async function createServer(
     customLogger,
   })
   // use vite's connect instance as middleware
-  app.use(vite.middlewares)
+  app.use((req, res, next) => {
+    vite.middlewares.handle(req, res, next)
+  })
 
   app.use('*', async (req, res, next) => {
     try {