HTTP/2 Support

[PlopTheReal]

Hey guys,
Thanks for the great work you are all doing on nextjs!
I was looking at the different way to bake in HTTP2 and was curious of the roadmap regarding this.

Many thanks!

[Timer]

HTTP/2 is typically a concern handled by your deployment step.

For example, when deploying to Vercel, your deployment is automatically served over HTTP/2, compressed with Brotli/Gzip, and downloaded from a CDN edge nearest to your end-user.

For self-hosting, it is best practice to configure your application behind Nginx (or another reverse proxy) for optimum performance. Nginx should handle HTTP/2, the HTTPS termination, Gzip compression, etc.
Only the localhost traffic (between Nginx and Node) would be over HTTP/1.1, where the latency is effectively zero.

If you must serve your application in production directly from a Node.js server, you can look at our with-http2 example.

[d9j]

folder examples is empty @Timer
https://github.com/vercel/next.js/tree/canary/examples

[YutaMoriJP]

@Timer Is there an updated one for the app router?

[PlopTheReal]

Thanks a lot for the detailed response! Currently I have an HAProxy that takes HTTP/2 and turns it in HTTP/1.1.
Wouldn't we have some benefits in having an end-to-end HTTP2 communication even with a proxy?

[PlopTheReal]

Thanks for the informative response!

[Timer]

For posterity, here's two relevant Nginx issues:
https://trac.nginx.org/nginx/ticket/923
http://mailman.nginx.org/pipermail/nginx/2015-December/049445.html

[...] the main HTTP/2 benefit is that it allows multiplexing many requests within a single connection, thus [almost] removing the limit on number of simalteneous [sic] requests - and there is no such limit when talking to your own backends. Moreover, things may even become worse when using HTTP/2 to backends, due to single TCP connection being used instead of multiple ones.

[PlopTheReal]

Sorry to unborrow that discussion again but I was reading the news on next 9.2.2 that
discuss about HTTP/2 https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy
What you said about the fact that it's not necessary in the LAN backhaul might need to be highlighted also on next.js blog as it can potentially confuse people... Unless I've missed something.

[Manouchehri]

TLS isn't required for HTTP/2, there's HTTP/2 Cleartext (H2C).

[Manouchehri]

It looks like there is HTTP/2 support now? See https://github.com/vercel/next.js/tree/canary/examples/with-http2

[can-acar]

with-http2 example throwing error | Also Next@^13.x.x is not working. Error Detail:

TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) 
at async invokeRequest (D:\Projects\web\node_modules\next\dist\server\lib\server-ipc\invoke-request.js:17:12) 
at async invokeRender (D:\Projects\web\node_modules\next\dist\server\lib\router-server.js:254:29) 
at async handleRequest (D:\Projects\web\node_modules\next\dist\server\lib\router-server.js:447:24) 
at async NextCustomServer.requestHandler (D:\Projects\web\node_modules\next\dist\server\lib\router-server.js:464:13) 
at async NextCustomServer.render (D:\Projects\web\node_modules\next\dist\server\next.js:269:9) 
{cause: InvalidArgumentError: invalid header key\n at processHeader (D:\Projects\web\node_modules\n…, stack: "TypeError: fetch failed\n at Object.fetch (node:…-web\node_modules\next\dist\server\next.js:269:9)", message: "fetch failed"}
requestHandler           	router-server.js:473
Async call from await
render                   	next.js:269
(anonymous function)     	index.js:57
emit                     	events.js:514
onServerStream           	compat:916
emit                     	events.js:514
sessionOnStream          	core:3011
emit                     	events.js:514
emit                     	core:331
processTicksAndRejections	task_queues:85
Async call from TickObject
init                     	inspector_async_hook:25
emitInitNative           	async_hooks.js:202
emitInitScript           	async_hooks.js:505
nextTick                 	task_queues:132
onSessionHeaders         	core:387
callbackTrampoline       	async_hooks.js:130
Async call from HTTP2SESSION
init                     	inspector_async_hook:25
emitInitNative           	async_hooks.js:202
setupHandle              	core:1032
Http2Session             	core:1270
ServerHttp2Session       	core:1620
connectionListener       	core:3079
emit                     	events.js:514
onServerSocketSecure     	_tls_wrap:1150
emit                     	events.js:514
TLSSocket._finishInit    	_tls_wrap:1038
onhandshakedone          	_tls_wrap:170
callbackTrampoline       	async_hooks.js:130
Async call from TLSWRAP
init                     	inspector_async_hook:25
emitInitNative           	async_hooks.js:202
TLSSocket._wrapHandle    	_tls_wrap:666
TLSSocket                	_tls_wrap:566
tlsConnectionListener    	_tls_wrap:1181
emit                     	events.js:514
onconnection             	net:2157
callbackTrampoline       	async_hooks.js:130

[sahil-techessentia]

I'm using nextjs 14 approuter, and i18n for localization
middleware.js
`import { i18nRouter } from "next-i18n-router";
import i18nConfig from "./i18nConfig";

export function middleware(request) {

return i18nRouter(request, i18nConfig);
}

export const config = {
matcher: "/((?!api|static|.\..|_next).*)",
};
`

when i try to setup a custom server.js file for http/2, i'm getting this error
"TypeError: Headers.set: ":method" is an invalid header name."

[Netail]

Would be cool to have an option for this built-in, which can be toggled in the next config