How can I use "brotli" to compress files in Remix?

[qianjiachun]

Such as title

[sergiodxa]

Compression of response is responsibility of the server not the app (Remix) so this will change depending on your server, in Express you can use the compression middleware, most of the other adapters use a server you don’t control and they most likely already support brotli like Vercel.

[qianjiachun]

Thank you for your patient answer.
I use nginx and configure brotli. I want to ask why some files are still gzip compressed instead of br.😢
This is my website:https://www.douyuex.com/288016 and this is my config of nginx:

brotli on;
    brotli_comp_level 6;
    brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;

[machour]

Aren't you missing text/html ?

[qianjiachun]

I tried to add text/html, and the following error occurred after restarting nginx. I checked it. It seems that text/html is added by default?

nginx: [warn] duplicate MIME type "text/html" in /www/server/panel/vhost/nginx/www.douyuex.com.conf:78

[clovis1122]

I ran into this issue while looking to compress text/html files. I have a Remix app with a CDN (cloudfront) behind it, however, compressing HTML is tricky because of streaming (I'm using Lambda FunctionURL so that I can use Remix's defer and stream content). Cloudfront requires the content length, but this may not always be known while streaming. One solution is to encode every chunk.

Here's what I'm doing on my entry.server.tsx to compress the HTML responses:

import zlib from 'node:zlib';
//...

const acceptEncoding = request.headers.get('accept-encoding') || '';
if (acceptEncoding.includes('br')) {
	responseHeaders.set('Content-Encoding', 'br');
	const brotli = zlib.createBrotliCompress();
	pipe(brotli).pipe(body);
} else if (acceptEncoding.includes('gzip')) {
	responseHeaders.set('Content-Encoding', 'gzip');
	const gzip = zlib.createGzip();
	pipe(gzip).pipe(body);
} else {
	pipe(body);
}

resolve(
	new Response(createReadableStreamFromReadable(body), {
		headers: responseHeaders,
		status: didError ? 500 : responseStatusCode,
	}),
);

[kyeshmz]

For anyone coming in, @clovis1122 answer is good, but cloudfront already has brotli compression on their side, which will make this NOT hit cache, recreating the request each time. so just use the cdn compression

[clovis1122]

The HTML requests DO hit Cloudfront cache in my production site. I have a custom policy that consider cookies and also has automatic brotli enabled for other static assets.

[Varkoff]

Hello ! I've tried implementing @clovis1122 solution and it does work to benefit from br/gzip compression and streaming in a Remix app.

However, my PageSpeed tests fail for some reason. So, not sure if it's an optimization or not...

Is it also possible to optimize CSS / JS libraries, like with gzip and brotli ?