I'm currently working on a Nuxt 3 project with the following configuration:

export default defineNuxtConfig({
  srcDir: "src/",
  devtools: { enabled: true },
  ssr: true,

  modules: [ ... ],

  imports: { ...},

  build: { ...},

  routeRules: {...},

  devServer: {https: true},

  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true
    }
  },

I have compressPublicAssets enabled with both gzip and brotli, but I've noticed this only compresses static assets in the public directory, not the dynamically generated HTML pages. What's the proper way to configure Nuxt 3 to compress the actual HTML responses with Brotli compression? Do I need additional configuration in my nuxt.config.ts file, or is there another approach I should take? I've tried looking through the documentation but haven't found clear instructions for compressing server-rendered HTML specifically.

I'm currently working on a Nuxt 3 project with the following configuration:

export default defineNuxtConfig({
  srcDir: "src/",
  devtools: { enabled: true },
  ssr: true,

  modules: [ ... ],

  imports: { ...},

  build: { ...},

  routeRules: {...},

  devServer: {https: true},

  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true
    }
  },

I have compressPublicAssets enabled with both gzip and brotli, but I've noticed this only compresses static assets in the public directory, not the dynamically generated HTML pages. What's the proper way to configure Nuxt 3 to compress the actual HTML responses with Brotli compression? Do I need additional configuration in my nuxt.config.ts file, or is there another approach I should take? I've tried looking through the documentation but haven't found clear instructions for compressing server-rendered HTML specifically.

• nuxt.js
• compression
• server-side-rendering
• nuxt3.js
• brotli

Share Improve this question Follow edited Mar 7 at 20:50 kevin castañeda asked Mar 7 at 20:49 kevin castañedakevin castañeda 533 bronze badges 2

• Compressing is before server response, not during build. – typed-sigterm Commented Mar 9 at 15:02
• Consider using a service like cloudflare for compression. Would probably do the trick. – Clout Hack Commented Mar 10 at 9:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I've managed to compress HTML files using nitro plugin and h3-compression library.

import { useCompression } from "h3-compression";

export default defineNitroPlugin(nitroApp => {
  nitroApp.hooks.hook("render:response", async (response, { event }) => {
    try {
      const contentType = response.headers?.["content-type"];
      if (contentType && contentType?.includes("text/html")) {
        await useCompression(event, response);
      }
    } catch (e) {
      logger.error("Compressing error:", e);
    }
  });
});

However, this add around 100ms of loading time per file, while achieving 60% reduction on html size.