next.js: SRS Caching - The caching stopped working after updating the NextJs version

What example does this report relate to?

srs-caching

What version of Next.js are you using?

10.2.1

What version of Node.js are you using?

14.15.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Custom server - Express

Describe the Bug

The caching stopped working after upgrading from version 10.2.0 to 10.2.1, and there are ajax calls that never finish, although the page loads.

Also, there is an unhandled server-side exception:

(node:2028) UnhandledPromiseRejectionWarning: TypeError: argument entity is required
    at etag (E:\dev\apps\sv-smiley\node_modules\etag\index.js:72:11)
    at E:\dev\apps\sv-smiley\node_modules\cacheable-response\index.js:93:32
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:2028) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:2028) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Expected Behavior

The response is cached and served. There are no exceptions.

To Reproduce

Copy the example code and try to start the custom server.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

For anyone who wants a quick workaround:

Disabling Next.js built-in compression solves this issue:

// next.config.js
module.exports = {
  compress: false,
}

Optionally, you could then compress your files using express middleware. npm install compression

// server.js
const compression = require('compression');
//...
app.prepare().then(() => {
  const server = express()
  server.use(compression())
 //...

awareness481 on Jun 5, 2021

Hi, @gokulmhegde,

I’m using Express Js as a Custom Server and the app.render() method of Next Js.

What I noticed is that after updating the version of Next Js, I’m always getting an “undefined” payload


const ssrCache = cacheableResponse({
  ttl: 1000 * 60 * 60, // 1hour
  get: async ({ req, res }) => {
    const rawResEnd = res.end
    const data = await new Promise((resolve) => {
      res.end = (payload) => {
        resolve(res.statusCode === 200 && payload)
      }
      app.render(req, res, req.path, {
        ...req.query,
        ...req.params,
      })
    })
    res.end = rawResEnd
    return { data }
  },
  send: ({ data, res }) => res.send(data),
})

SasheVuchkov on May 31, 2021

hi @awareness481

I used your solution.

but I think caching is still not happening

I have one page which gets data from API which takes 10 sec because there are millions of data.

every time it takes 10 sec to resolve the data because caching is not happening

The solution suggested by @awareness481 seems to fix the issue for me and I can confirm that the cache is also working. I tested it by putting a trace in get method of cachableResponse just before app.render which only gets called if there is no cached response.

Also testing the blog pages via Postman, I am getting header X-Cache-Status as HIT after first call and response time has reduced from >300 to <20

wshamim on Jun 23, 2021