8000 Serverless: add example with serverless by kamleshchandnani · Pull Request #6685 · vercel/next.js · GitHub
[go: up one dir, main page]

Skip to content

Serverless: add example with serverless #6685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

kamleshchandnani
Copy link

This PR addresses #6684

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 13.5s 13s -3.2%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.2 kB 1.2 kB
Build Dir Size 457 kB 457 kB
Average Memory Usage 129 MB 128 MB -0.87%
Max Memory Usage 176 MB 168 MB -4.6%
Average CPU Usage 93.06% 94.33% ⚠️ +1.36%
Max CPU Usage 122.22% 111.11% -9.09%
node_modules Size 42.8 MB 42.8 MB 0%
Click to expand serverless stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 18.6s 17.7s -5.09%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 261 kB 261 kB
Serverless pages/link gzip Size 62.1 kB 62.1 kB ⚠️ +0%
Serverless pages/index Size 256 kB 256 kB
Serverless pages/index gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/_error Size 258 kB 258 kB
Serverless pages/_error gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/routerDirect Size 257 kB 257 kB
Serverless pages/routerDirect gzip Size 60.9 kB 60.9 kB ⚠️ +0.01%
Serverless pages/withRouter Size 257 kB 257 kB
Serverless pages/withRouter gzip Size 61 kB 61 kB ⚠️ +0%
Build Dir Size 1.56 MB 1.56 MB
Average Memory Usage 143 MB 146 MB ⚠️ +1.88%
Max Memory Usage 194 MB 196 MB ⚠️ +1.13%
Average CPU Usage 95.28% 95.41% ⚠️ +0.14%
Max CPU Usage 111.11% 110% -1%
node_modules Size 42.8 MB 42.8 MB 0%

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 12.3s 12.6s ⚠️ +1.97%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.2 kB 1.2 kB
Build Dir Size 457 kB 457 kB
Average Memory Usage 129 MB 128 MB -0.73%
Max Memory Usage 167 MB 167 MB -0.22%
Average CPU Usage 93.37% 93.96% ⚠️ +0.63%
Max CPU Usage 111.11% 111.11%
node_modules Size 42.8 MB 42.8 MB 0%
Click to expand serverless stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 16.8s 17.6s ⚠️ +4.32%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 261 kB 261 kB
Serverless pages/link gzip Size 62.1 kB 62.1 kB ⚠️ +0%
Serverless pages/index Size 256 kB 256 kB
Serverless pages/index gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/_error Size 258 kB 258 kB
Serverless pages/_error gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/routerDirect Size 257 kB 257 kB
Serverless pages/routerDirect gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/withRouter Size 257 kB 257 kB
Serverless pages/withRouter gzip Size 61 kB 61 kB ⚠️ +0%
Build Dir Size 1.56 MB 1.56 MB
Average Memory Usage 143 MB 144 MB ⚠️ +0.59%
Max Memory Usage 210 MB 194 MB -7.71%
Average CPU Usage 95.74% 95.32% -0.44%
Max CPU Usage 122.22% 111.11% -9.09%
node_modules Size 42.8 MB 42.8 MB 0%

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 13.3s 12.6s -5.31%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.2 kB 1.2 kB
Build Dir Size 457 kB 457 kB
Average Memor 8000 y Usage 129 MB 128 MB -0.3%
Max Memory Usage 168 MB 167 MB -0.52%
Average CPU Usage 91.93% 93.78% ⚠️ +2.01%
Max CPU Usage 111.11% 111.11%
node_modules Size 42.8 MB 42.8 MB 0%
Click to expand serverless stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 16.6s 17.8s ⚠️ +6.67%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 261 kB 261 kB
Serverless pages/link gzip Size 62.1 kB 62.1 kB ⚠️ +0%
Serverless pages/index Size 256 kB 256 kB
Serverless pages/index gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/_error Size 258 kB 258 kB
Serverless pages/_error gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/routerDirect Size 257 kB 257 kB
Serverless pages/routerDirect gzip Size 60.9 kB 60.9 kB ⚠️ +0%
Serverless pages/withRouter Size 257 kB 257 kB
Serverless pages/withRouter gzip Size 61 kB 61 kB ⚠️ +0%
Build Dir Size 1.56 MB 1.56 MB
Average Memory Usage 143 MB 145 MB ⚠️ +0.75%
Max Memory Usage 223 MB 195 MB -12.72%
Average CPU Usage 95.12% 95.07% -0.05%
Max CPU Usage 111.11% 111.11%
node_modules Size 42.8 MB 42.8 MB 0%

@lfades
Copy link
Member
lfades commented Mar 17, 2019

@kamleshchandnani We would prefer to have an example using this plugin, basically what it does is to create serverless functions for the pages and upload the static files to S3

@kamleshchandnani
Copy link
Author
kamleshchandnani commented Mar 18, 2019

@timneutkens - I and @lfades were discussing this, So I need some custom things which cannot be done as part of that plugin and neither is documented anywhere else. I'll describe the motivation behind this example

I wanted to create a nextjs app which could achieve following things:

  1. Work with serverless framework.
  2. Able to use express for middlewares and hence this file. While this is just for now we have many middlewares some of them are custom as well. So basically to name a few helmet, cookieparser, cache, A/B, auth, logger and many more.
  3. Co locating of routes and server stuff.
  4. serverless-offline to emulate things before deploying.

And the main difference here is I need a thin orchestrating layer in between which can orchestrate routing along with middlewares capabilities.

So if you think of an express + nextjs app I guess this is how you'll achieve this. So I'm doing exactly this but building them as serverless and deploying it on AWS lambdas and API gateways.

cc @danielcondemarin

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 12.6s 12.5s -0.84%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.2 kB 1.2 kB
Build Dir Size 408 kB 408 kB
Average Memory Usage 129 MB 128 MB -0.79%
Max Memory Usage 173 MB 167 MB -3.62%
Average CPU Usage 93.68% 93.1% -0.62%
Max CPU Usage 110% 111.11% ⚠️ +1.01%
node_modules Size 42.8 MB 42.8 MB ⚠️ +0%
Click to expand serverless stats
zeit/next.js canary kamleshchandnani/next.js with-serverless Change
Build Duration 16.5s 16.8s ⚠️ +1.32%
Client _app Size 3.03 kB 3.03 kB
Client _app gzip Size 1.29 kB 1.29 kB
Client _error Size 7.91 kB 7.91 kB
Client _error gzip Size 3.17 kB 3.17 kB
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.31 kB 3.31 kB
Client pages/link gzip Size 1.5 kB 1.5 kB
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 305 B 305 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 294 B 294 B
Client main Size 21.9 kB 21.9 kB
Client main gzip Size 7.28 kB 7.28 kB
Client commons Size 186 kB 186 kB
Client commons gzip Size 60.4 kB 60.4 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 223 kB 223 kB
Serverless pages/link gzip Size 58.1 kB 58 kB -0.01%
Serverless pages/index Size 218 kB 218 kB
Serverless pages/index gzip Size 56.9 kB 56.9 kB -0.01%
Serverless pages/_error Size 220 kB 220 kB
Serverless pages/_error gzip Size 56.8 kB 56.8 kB -0.01%
Serverless pages/routerDirect Size 219 kB 219 kB
Serverless pages/routerDirect gzip Size 56.9 kB 56.9 kB 0%
Serverless pages/withRouter Size 219 kB 219 kB
Serverless pages/withRouter gzip Size 56.9 kB 56.9 kB -0.01%
Build Dir Size 1.33 MB 1.33 MB
Average Memory Usage 145 MB 145 MB -0.07%
Max Memory Usage 190 MB 190 MB -0.2%
Average CPU Usage 95.31% 94.92% -0.41%
Max CPU Usage 111.11% 111.11%
node_modules Size 42.8 MB 42.8 MB ⚠️ +0%

@danielcondemarin
Copy link

2. Able to use express for middlewares and hence this file. While this is just for now we have many middlewares some of them are custom as well. So basically to name a few helmet, cookieparser, cache, A/B, auth, logger and many more.

It's important to note first that next 8 serverless pages are self contained and ready to deploy on AWS Lambda, without having to use express.

In a nutshell express gives you routing and middlewares. The Routing you already get it from AWS API Gateway when you are declaring how to forward traffic to the Lambda, e.g.

serverless.yml

post:
    handler: post.handler
    events:
      - http:
          path: post/{slug}
          method: get
          request:
            parameters:
              paths:
                slug: true

Now the middleware part is more interesting. I've thought of adding support to the plugin to let users hook up their own middlewares. However, I think that using the whole of express only to benefit from the middleware mechanism it's a bit overkill. Even if we were to use connect directly, it has the concept of routing which you already get from the API Gateway.
A more appropiate middleware framework would be middyjs. It's more lightweight and tailored for use in a Lambda environment.
I'll try and formalise some sort of proposal in the following days of how the plugin could support something like this, but would be great to hear what everyone else thinks first.

@romainquellec
Copy link
Contributor

I guess both is great as long as you dont have a huge project.
With this approach, you can hit the lambda size limit (75mo) pretty quick.
@danielcondemarin, you should also PR with your plugin as you know what you re doing with it 👍

@kamleshchandnani
Copy link
Author

With this approach, you can hit the lambda size limit (75mo) pretty quick.

@romainquellec AFAIK for AWS the deployment package size is 50MB compressed and 250MB if you upload it to S3 and if you use serverless it always uploads things onto S3. So we are good with that 🙂

@kamleshchandnani
Copy link
Author

@kamleshchandnani We would prefer to have an example using this plugin, basically what it does is to create serverless functions for the pages and upload the static files to S3

So the design that this plugin fulfils and the the solution that this PR addresses serves different purpose IMHO as mentioned here

@romainquellec
Copy link
Contributor
romainquellec commented Mar 19, 2019

AFAIK for AWS the deployment package size is 50MB compressed and 250MB if you upload it to S3 and if you use serverless it always uploads things onto S3. So we are good with that

I'm using your approach, and with serverless framework, i'm sometimes hitting the limit with >75mo.
(Officially, Limit is 50mo, but you can do more). For my case, Serverless upload to S3, but compressed, so I'm hitting the first limit. (Typescript, MaterialUI)

@mitchellhuang
Copy link

I actually like this example better than serverless-nextjs-plugin because all pages are bundled into a single function. This reduces the number of cold starts on less trafficked pages since everything is loaded in a hot function. Obviously this depends on your traffic volume and how you want your application to scale on Lambda (all pages vs per page).

@timneutkens
Copy link
Member

I'm going to close this PR as it does not illustrate best practices for the serverless target.

I actually like this example better than serverless-nextjs-plugin because all pages are bundled into a single function.

Bundling into a single function is bad in pretty much all cases. Cold boot is not noticeable when lambda size is <5Mb. You'll always have cold starts. And even hot functions get stopped etc.

Furthermore using express for the functions will slow them down / increase bundle size.

Also bundling everything into one function means that say you have 10 pages, you'll have 10 versions of React into the bundle. Same for every component etc.

@vercel vercel locked as resolved and limited conversation to collaborators Feb 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants
0