docs(ssr): properly handle vite.middlewares after restart (#14917)

Co-authored-by: Bjorn Lu <[email protected]>

Author: patak-dev

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.

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

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 {

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 {

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 {

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 {

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 {

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 {

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) => {

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 {

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 {