fix: always generate an HTTP response pageContext.httpResponse (#1848)

boilerplates/boilerplate-react-ts/server/index.ts

@@ -50,7 +50,7 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       headersOriginal: req.headers
@@ -60,16 +60,11 @@ async function startServer() {
       // Install error tracking here, see https://vike.dev/errors
     }
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { body, statusCode, headers, earlyHints } = httpResponse
-      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode)
-      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/streaming
-      res.send(body)
-    }
+    if (res.writeEarlyHints) res.writeEarlyHints({ link: httpResponse.earlyHints.map((e) => e.earlyHintLink) })
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    // For HTTP streams use pageContext.httpResponse.pipe() instead, see https://vike.dev/streaming
+    res.send(httpResponse.body)
   })
 
   const port = process.env.PORT || 3000

boilerplates/boilerplate-react/server/index.js

@@ -50,7 +50,7 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       headersOriginal: req.headers
@@ -60,16 +60,11 @@ async function startServer() {
       // Install error tracking here, see https://vike.dev/errors
     }
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { body, statusCode, headers, earlyHints } = httpResponse
-      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode)
-      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/streaming
-      res.send(body)
-    }
+    if (res.writeEarlyHints) res.writeEarlyHints({ link: httpResponse.earlyHints.map((e) => e.earlyHintLink) })
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    // For HTTP streams use pageContext.httpResponse.pipe() instead, see https://vike.dev/streaming
+    res.send(httpResponse.body)
   })
 
   const port = process.env.PORT || 3000

boilerplates/boilerplate-vue-ts/server/index.ts

@@ -50,7 +50,7 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       headersOriginal: req.headers
@@ -60,16 +60,11 @@ async function startServer() {
       // Install error tracking here, see https://vike.dev/errors
     }
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { body, statusCode, headers, earlyHints } = httpResponse
-      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode)
-      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/streaming
-      res.send(body)
-    }
+    if (res.writeEarlyHints) res.writeEarlyHints({ link: httpResponse.earlyHints.map((e) => e.earlyHintLink) })
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    // For HTTP streams use pageContext.httpResponse.pipe() instead, see https://vike.dev/streaming
+    res.send(httpResponse.body)
   })
 
   const port = process.env.PORT || 3000

boilerplates/boilerplate-vue/server/index.js

@@ -50,7 +50,7 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       headersOriginal: req.headers
@@ -60,16 +60,11 @@ async function startServer() {
       // Install error tracking here, see https://vike.dev/errors
     }
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { body, statusCode, headers, earlyHints } = httpResponse
-      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode)
-      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/streaming
-      res.send(body)
-    }
+    if (res.writeEarlyHints) res.writeEarlyHints({ link: httpResponse.earlyHints.map((e) => e.earlyHintLink) })
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    // For HTTP streams use pageContext.httpResponse.pipe() instead, see https://vike.dev/streaming
+    res.send(httpResponse.body)
   })
 
   const port = process.env.PORT || 3000

docs/components/JustAMiddleware.mdx

@@ -14,7 +14,6 @@ server.addMiddleware({
   async handler(request) {
     const pageContextInit = { urlOriginal: request.url }
     const pageContext = await renderPage(pageContextInit)
-    if (!pageContext.httpResponse) return null
     // `body` is the HTML of the page with a route matching pageContextInit.urlOriginal
     const { body, statusCode, headers } = pageContext.httpResponse
     const response = { body, statusCode, headers }

docs/pages/errors/+Page.mdx

@@ -24,22 +24,10 @@ server.addMiddleware({
 
       // If you use an error tracker (e.g. Sentry):
       myErrorTracker.intercept(pageContext.errorWhileRendering)
-
-      // If you use a server middleware that handles errors:
-      if (!pageContext.httpResponse) {
-        // Don't throw if there is a pageContext.httpResponse, otherwise
-        // the error page won't be rendered.
-        throw pageContext.errorWhileRendering
-      }
-
     }
 
-    // pageContext.httpResponse is missing if:
-    //  - There is an error and you didn't define an error page.
-    //  - Your error page has a bug and, therefore, couldn't be rendered.
-    if (!pageContext.httpResponse) return null
-
-    // The HTTP response of the page. This can be the error page.
+    // The HTTP response of the page.
+    // If pageContext.errorWhileRendering is defined then this is usually the error page.
     return pageContext.httpResponse
   }
 })

docs/pages/pageContext-json/+Page.mdx

@@ -58,7 +58,7 @@ Vike makes a `pageContext.json` request for a page if and only if one of the two
 - The `pageContextInit` at <Link href="/renderPage">`renderPage()`</Link> contains a property that is included in <Link href="/passToClient">`passToClient`</Link>.
   ```js
   // Vike server middleware
-  async (req, res, next) => {
+  async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       // If passToClient contains 'user' then Vike makes a pageContext.json request

docs/pages/renderPage/+Page.mdx

@@ -59,7 +59,7 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       // Required: the URL of the page
       urlOriginal: req.originalUrl
@@ -75,7 +75,6 @@ async function startServer() {
     }
 
     const pageContext = await renderPage(pageContextInit)
-    if (pageContext.httpResponse === null) return next()
 
     const { body, statusCode, headers } = pageContext.httpResponse
     headers.forEach(([name, value]) => res.setHeader(name, value))
@@ -98,11 +97,6 @@ For HTML streams use `httpResponse.pipe()` instead of `pageContext.httpResponse.
 
 Optionally, you can use `pageContext.httpResponse.earlyHints` for adding early hints (`103 Early Hint`), see <Link href="/preloading#early-hints" />.
 
-The `pageContext.httpResponse` value is `null` if:
-   - An error occurred while rendering the page and no <Link text="error page" href="/error-page" noBreadcrumb /> is defined.
-   - An error occurred while rendering the error page.
-   - Vike skips certain URLs, such as `/favicon.ico` (because browsers automatically make favicon requests).
-
 The `renderPage()` function doesn't depend on Node.js and you can use `renderPage()` (and therefore embed Vike) anywhere:
  - Any server environment (Express.js, HatTip, Deno, Fastify, Vite's development server, Node.js's HTTP server, ...)
  - Any deployment provider (AWS, Cloudflare Workers, Vercel, ...)

docs/pages/streaming/+Page.mdx

@@ -60,11 +60,10 @@ Node.js platforms (Vercel, AWS EC2, AWS Lambda, ...):
 
 import { renderPage } from 'vike/server'
 
-app.get("*", async (req, res, next) => {
+app.get("*", async (req, res) => {
   const pageContextInit = { urlOriginal: req.url }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) return next()
   // httpResponse.pipe() works with Node.js Streams as well as Web Streams
   httpResponse.pipe(res)
 })
@@ -85,14 +84,10 @@ async function handleFetchEvent(event) {
   const pageContextInit = { urlOriginal: event.request.url }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) {
-    return null
-  } else {
-    // httpResponse.getReadableWebStream() only works with Web Streams
-    const readable = httpResponse.getReadableWebStream()
-    const { statusCode: status, headers } = httpResponse
-    return new Response(readable, { headers, status })
-  }
+  // httpResponse.getReadableWebStream() only works with Web Streams
+  const readable = httpResponse.getReadableWebStream()
+  const { statusCode: status, headers } = httpResponse
+  return new Response(readable, { headers, status })
 }
 ```
 

examples/auth/server/index.js

@@ -61,7 +61,7 @@ async function assets(app) {
 }
 
 function vike(app) {
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       headersOriginal: req.headers,
@@ -70,14 +70,8 @@ function vike(app) {
     }
     const pageContext = await renderPage(pageContextInit)
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { statusCode, headers, earlyHints } = httpResponse
-      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode)
-      httpResponse.pipe(res)
-    }
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    httpResponse.pipe(res)
   })
 }

examples/base-url-cdn/server/ssr.js

@@ -3,19 +3,15 @@ import { renderPage } from 'vike/server'
 
 const app = express()
 
-app.get('*', async (req, res, next) => {
+app.get('*', async (req, res) => {
   const pageContextInit = {
     urlOriginal: req.originalUrl
   }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) {
-    return next()
-  } else {
-    const { body, statusCode, headers } = httpResponse
-    headers.forEach(([name, value]) => res.setHeader(name, value))
-    res.status(statusCode).send(body)
-  }
+  httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+  res.status(httpResponse.statusCode)
+  httpResponse.pipe(res)
 })
 
 app.listen(3000)

examples/base-url-server/server/ssr.js

@@ -4,19 +4,15 @@ import { baseServer } from '../base.js'
 
 const { app, startApp } = createExpressApp({ base: baseServer, port: 3000 })
 
-app.get('*', async (req, res, next) => {
+app.get('*', async (req, res) => {
   const pageContextInit = {
     urlOriginal: req.originalUrl
   }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) {
-    return next()
-  } else {
-    const { body, statusCode, headers } = httpResponse
-    headers.forEach(([name, value]) => res.setHeader(name, value))
-    res.status(statusCode).send(body)
-  }
+  httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+  res.status(httpResponse.statusCode)
+  httpResponse.pipe(res)
 })
 
 startApp()

examples/cloudflare-workers-react-full/dev-server/index.js

@@ -22,22 +22,17 @@ async function startServer() {
   ).middlewares
   app.use(viteDevMiddleware)
 
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,
       headersOriginal: req.headers,
       fetch
     }
     const pageContext = await renderPage(pageContextInit)
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { statusCode, headers } = httpResponse
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode)
-      httpResponse.pipe(res)
-    }
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    httpResponse.pipe(res)
   })
 
   const port = 3000

examples/cloudflare-workers-react-full/worker/ssr.ts

@@ -10,11 +10,9 @@ async function handleSsr(url: string, headers: Headers) {
   }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) {
-    return null
-  } else {
-    const { statusCode: status, headers } = httpResponse
-    const stream = httpResponse.getReadableWebStream()
-    return new Response(stream, { headers, status })
-  }
+  const stream = httpResponse.getReadableWebStream()
+  return new Response(stream, {
+    headers: httpResponse.headers,
+    status: httpResponse.statusCode
+  })
 }

examples/cloudflare-workers-react/worker/ssr.js

@@ -8,10 +8,8 @@ async function handleSsr(url) {
   }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) {
-    return null
-  } else {
-    const { body, statusCode: status, headers } = httpResponse
-    return new Response(body, { headers, status })
-  }
+  return new Response(httpResponse.body, {
+    headers: httpResponse.headers,
+    status: httpResponse.statusCode
+  })
 }

examples/cloudflare-workers-vue/worker/ssr.js

@@ -8,11 +8,7 @@ async function handleSsr(url) {
   }
   const pageContext = await renderPage(pageContextInit)
   const { httpResponse } = pageContext
-  if (!httpResponse) {
-    return null
-  } else {
-    const { readable, writable } = new TransformStream()
-    httpResponse.pipe(writable)
-    return new Response(readable)
-  }
+  const { readable, writable } = new TransformStream()
+  httpResponse.pipe(writable)
+  return new Response(readable)
 }

examples/path-aliases/server/index.js

@@ -29,19 +29,15 @@ async function startServer() {
     app.use(viteDevMiddleware)
   }
 
-  app.get('*', async (req, res, next) => {
+  app.get('*', async (req, res) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl
     }
     const pageContext = await renderPage(pageContextInit)
     const { httpResponse } = pageContext
-    if (!httpResponse) {
-      return next()
-    } else {
-      const { body, statusCode, headers } = httpResponse
-      headers.forEach(([name, value]) => res.setHeader(name, value))
-      res.status(statusCode).send(body)
-    }
+    httpResponse.headers.forEach(([name, value]) => res.setHeader(name, value))
+    res.status(httpResponse.statusCode)
+    httpResponse.pipe(res)
   })
 
   const port = process.env.PORT || 3000