Nuxt.js: How to support gzip?

[stevieyu]

_{This feature request is available on Nuxt.js community (#c85)}

[Atinux]

Hi @stevieyu

You can use nuxt.js as a middleware (see documentation) for express.

And use the compression middleware to gzip every response.

You can also use CloudFare which is free and offer gzip support.

[Atinux]

I re-open it, gzip support will be implemented in Nuxt.js to be able to create the fastest web applications possible 🚀

[o-alexandrov]

It would be great, if nuxt only in production produced static gzip files on build.
$ nuxt build - it could be the time when gzip files are created, so we could enable static gzip in nginx for example and enjoy it over dynamic creation of gzipped files

[Atinux]

That's the strategy I will implment, dynamic gzip creation is a loose of performance.

[Atinux]

The 0.10 release it out with gzip support ✋

[ausir0726]

@kodekrendel

I think that setting is for nuxt.js host server , then it will use compression gzip response file .
If you use static generate file ,
just setting on your web hosting ( like apache .htaccess or nginx config )

I have impression can generate static tar.gz file . but I never use it .
I always set gzip on my cdn server or apache .

[ausir0726]

I have see generate static gzip file option on doc before , even I tested it , but I can't find it anymore ... QQ

[Atinux]

@kodekrendel finally it's easier this way and can be disabled.

@ausir0726 for static generation, every CDN or static hosting have gzip support so it's useless to add this option for nuxt, that's why :)

[o-alexandrov]

@kodekrendel @ausir0726 if you are running linux you can do:
$ cd path/to/.nuxt
$ find . -type f ! -name "*.gz" | while read -r x; do gzip -c9 "$x" > "$x.gz"; done

• ! -name "*.gz" will avoid already compressed .gz files
• This way you will create a gz copy of every file, leaving original ones -c
• -9 means maximum compression
  Just create an alias in .bashrc or .bashprofile and do it with a single word command

[Atinux]

@kodekrendel use a service like https://www.cloudflare.com/ which offers gzip supports and more for free.

[o-alexandrov]

@Atinux if you are in a country like Kazakhstan, you are prohibited to host your website overseas. That's why CDN is not always an option

[Atinux]

I did not know, thanks for clarifying this up.

This line is pretty awesome BTW @OlzhasAlexandrov

find . -type f ! -name "*.gz" | while read -r x; do gzip -c9 "$x" > "$x.gz"; done

[o-alexandrov]

@kodekrendel To check whether you serve the request through gzip_static, use strace
Your question was asked on stackoverflow
Please use google also sometimes:)

You won't have trouble gzipping everything, it is absolutely safe as long as you keep a copy of a file for unsupported file formats

[o-alexandrov]

I understand that you might think that doing one word command (having an alias) is an overkill.
I already explained how to check whether you serve precompressed files. Then, it depends whether you configure your nginx.

Even if nuxt compresses files on build, you would still have to do the same: configure nginx to serve precompressed files

[o-alexandrov]

It is exactly what we have talked about.

• The NginxHttpGzipStaticModule is enabled by adding gzip_static on; to the nginx.conf
• Yes, it takes a little bit more time to configure, but it is not related to how well nuxt performs. You are serving your domain through nginx with a proxy server - nodejs

[ausir0726]

if you use node server , you can get realtime SSR page for each request ( without setting cache time )

[ausir0726]

for my personal opinion .
I like use generate more than start a node server . because .

I can put file on static file hosting , like surge , netlify , google cloud storage , s3 , they have a very good cdn practice and even provide gzip and http2 .

but I need regenerate my project every 1 hour ? 6 hours? 1 day ? ... or every time modified db data ...
if project have 1000+ pages .... use generate maybe not a good option .
start a node server will be a good option. ( but need VPS )

If we can just regenerate we want , that will be nice ....

I have a project with 1000+ product pages , every time I generate , that took me about 6-10mins . ( remote api server )
( customer always want they update product and paste on facebook , boooom~!!! we don't have SSR yet )
We are consider do we need run on node server
or release page to netlify ( they provide prerender service ) , cover this error .

[o-alexandrov]

@ausir0726 if you are not limited by the country where to host your website, use the cheapest, one of the most secure, and, probably the fastest method to serve an application that requires a server - AWS Lambda

You might try this and then please let me know the result via PM or here
The article seems pretty straightforward, I will also try to implement it this week

[ausir0726]

@OlzhasAlexandrov thanks .

you mean use Lambda generate static pages ?
I don't know how fast it is . but I think now I block on http request then generate static page .
I guess some reason is generate fetch route is single thread .
like route/a(fetch api) .. route/b(fetch api) ... route/c(fetch api) ..... route/1000(fetch api)
so , it took so long time .... like npm vs yarn ....

I don't know if use Lambda will be faster , but I will try it ....

[o-alexandrov]

@ausir0726 No, I didn't mean to serve a static website using lambda, it's not for that, please take a look at what lambda does.
I am actually curious and will try to quickly deploy our current wip that way there, give me 30 min

[ausir0726]

@OlzhasAlexandrov thanks.
maybe will very helpful .

[o-alexandrov]

@ausir0726 my bad, I misunderstood what claudia.js is. It is just a wrapper for some one time services. Server rendered deployment on lambda would be much more complicated. I will put it in my to-do in the future list:D

Static nuxt project with some lambda functions for something like (sending emails, registering a user to a db, etc) is extremely simple on the other hand. You just generate it and add api Lambda hooks in your app

[o-alexandrov]

For sending emails from a generated nuxt website:

methods: {
    sendEmail () {
      axios({
        method: 'post',
        url: 'https://path-to-your-api.amazonaws.com',
        data: this.contactForm
      })
    }
}

And of course you would need to properly set up a Lambda function and the api hook. Takes time, but the cheapest method:D

[o-alexandrov]

@kodekrendel this one definitely works

[jazoom]

For the benefit of others:

It took me a while to work out why Nuxt was using gzip. Apparently it's found in nuxt.config.js under render.gzip (was previously under performance.gzip as mentioned in the release notes linked here), and the default is NOT 0 as the documentation says. Explicitly setting it to 0 disables gzip.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.