Next.js: SSR cache example doesn't work

[xitter]

Bug report

Example https://github.com/zeit/next.js/blob/canary/examples/ssr-caching is broken.

Describe the bug

There are two problems with this app:

1. http://localhost:3000/blog/first gives 404 page. This seems to be a problem with queryParam.
2. If I fix 1st error, http://localhost:3000/blog/first will return correct blog page but prints following on server console:

(node:95446) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:485:11)
    at /codes/ssr/ssr-caching-app/node_modules/cacheable-response/index.js:40:9
    at /codes/ssr/ssr-caching-app/node_modules/cacheable-response/index.js:108:5
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:95446) 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(). (rejection id: 2)

It seems that renderToHTML executes end command on the response and cacheable-response tries to add header after this.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://github.com/zeit/next.js/tree/canary/examples/ssr-caching
2. Follow steps to setup app.
3. Run yarn dev
4. Go to: http://localhost:3000/blog/first
5. 404 page is returned.

Expected behavior

Blog page should have been returned with no error.

System information

• OS: macOS
• Version of Next.js: 9.3
• Version of Node.js: 10

Additional context

Add any other context about the problem here.

[HaNdTriX]

@timneutkens seems like app.renderToHTML is actually calling res.end.

https://github.com/zeit/next.js/blob/86236bc76bcfc69b4e704f06be5b29cda3c1908c/packages/next/next-server/server/send-payload.ts#L49

Call Stack:

• Object.sendPayload
• DevServer.renderToHTMLWithComponents
• DevServer.renderToHTML

Duplicate of: #11665, #12019

[fmihal]

@timneutkens @HaNdTriX I can try to investigate this one?

[leanazulyoro]

This is a hack, I believe the method app.renderToHTML should return the renderedHTML, but in the meanwhile, this is working for me using LRU cache:
https://gist.github.com/leanazulyoro/23c6581fb4379ec311e3bc8538715687

[xitter]

@HaNdTriX @timneutkens to be backward compatible, a flag could be added to not call sendPayload and always return html. I can raise a PR for that.

[mydearxym]

as https://github.com/zeit/next.js/issues/11665 mentioned, the ERR_HTTP_HEADERS_SENT start at v9.3.1, downgrade to [email protected] fix this warning temporary