Discussion on: A crash course on serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda

Alright, I spent my weekend on this, here's the insights:

1. You need a "manually setup" cloudfront distribution and stop relying on the automated edge optimized domain name by serverless.
   You configure the cloudfront distribution with 2 behaviors:
   "/" to your API Gateway
   "/_nuxt/*" to your s3 bucket.
   And you configure manually the custom domain name in cloudfront and in Route53 DNS
   Its a bit of initial work but you'll do this only once. You can remove the serverless plugin for domain management.

2. I used serverless-finch plugin which handle the upload to s3 + a manually s3 bucket setup
   You can remove the "app.use('/nuxt', express.static(path.join(_dirname, '.nuxt', 'dist')))" as your lambda won't be called anymore for serving static files.

3. You need to optimize (aka reduce) your dependencies, rely on nuxt-start (check npm), which is a production-only distribution of nuxt.

Exclusively for aws lamba (not sure for other cloud providers):

• I packaged expressjs in a lambda layer
• I packaged nuxt-start and my other dependencies in a second layer

So I excluded the directory "node_modules/**" from my serverless deployment. Which means every time I install another npm package, I have to update my layer, you can automate this with a specific ".sh", but it's still cumbersome tbh.

For my serverless deployment, it becomes extremly lightweight and simple:
exclude everything, include only:

• .nuxt/dist/server/*
• index.js
• prismic.config.js
• nuxt.config.js
• nuxt.js

The client ones are hosted on s3 thanks to the serverless-finch plugin:
bucketName: ********
distributionFolder: .nuxt/dist/client
keyPrefix: _nuxt

The result is efficient: the lambda size is around 15.7 Kb deployed.

Layers uploaded only once as my deps are not really moving:

• The expressjs layer: 678 Kb zipped
• My project dependencies layer: 4.7 Mb zipped

I might be writing a blog post about it here on dev.to soon.