Next.js: Serverless Next.js

[geovanisouza92]

Related to #1104, #1406, #1414.

Hi guys,

Sorry for opening another issue about this, but I see a problem that I have no idea how to solve.

A working example can be found at https://github.com/geovanisouza92/serverless-next, just npm install and npm start.

When opened on the browser, it triggers the "Lambda", that starts building the page as expected, and after responding with all files correctly, a request to /_next/on-demand-entries-ping?page=/ triggers the deletion of .next directory and starts another build again, looping forever. When I run on production mode, it throws ../.next/build-stats.json.

So, about the serverless approach, I understand that is absolutely not related with Next.js in any way. What I see as a problem (at least, that I cannot understand/explain) is this looping thing.

Thanks.

[arunoda]

I think it's a baaad idea to build the app in serverless.
In this case, build the app locally and push it(with .next dir) to serverless env and only start the server.

Check this for more info: https://learnnextjs.com/basics/deploying-a-nextjs-app

[geovanisouza92]

@arunoda Serverless means there is no server administration, so, no running process involved. No one can simply "start the server". It's started on demand.

I read the options for deploy, using express, hapi, custom server, etc. But the issue isn't related to deploy, but development and the refresh loop that is happening.

About this being a good or bad idea, this is not the question. It's a trend. Will eventually happens, more and more often, even with decentralized approaches (p2p, scuttlebut, ask-your-neighbour's-computer-to-render-something...). It's a possibility that I'm trying to explore. :smiley:

[geovanisouza92]

As far as I can see, there is this checking about an entry of the last build state for each page, but considering that requests not necessarily (and often) don't get to the same function instance, this kind of state forces the reload on the client. In another context, I would say that this is good, but considering that I'm trying to emulate the function, this state is not kept between requests.

There is a way to disable this checking?

[arunoda]

@geovanisouza92 you didn't get my point :D
I know what serverless is.
What you are doing is running your app in dev mode or building it on the server.
Serverless means you only need to do a minimum task for a request. So, you should not build the app on it.

Please follow this guide: https://learnnextjs.com/basics/deploying-a-nextjs-app

You'll understand what I said.

[geovanisouza92]

@arunoda Thanks for pointing the reference. It's clarifying :)

For production it works now, first running npm run build (next build underneath) and then my custom server works.

But,

Yeah, I'm running it in dev mode.

While I'm developing it still keeps removing the .next dir with generated files, and keeps refreshing (even when I run next build first [is this intended?]). So, I'm just guessing here, please, correct me if I missed something:

This build-stats.json thing it's used internally by Next to detect what it's invalid and should be rebuilt, but, while in dev mode, this stats are kept in memory. And due to the nature serverless works (mostly using one function instance per request), this stats are not share, so it's lost between requests.

Considering that I had understood this correctly, my question is: There is a way to keep this stats on file (just like production mode does) so it could be reused by function instances only for development, of course? I mean, some kind of configuration option.

See, I'm just exploring this possibility, and this looping refresh bothers the workflow. I can't just put env NODE_ENV=production everywhere... I need development, test and production modes. I know that you understand that.

[arunoda]

I think we are talking different ways and this is the best I can help you. If you need more help, try to join our slack channel.

1) Use Next.js dev mode only when you are developing.
2) Use Next.js production mode (next build && next start) when running your app on production
3) For serverless, build the app locally with next build and push the app with .next directory. Then just use next start

[metaheap]

I've tried to mingle aws-serverless-express with the app.prepare() workflow from custom-server-express and it doesn't seam to work...

https://github.com/zeit/next.js/blob/v3-beta/examples/custom-server-express/server.js

https://github.com/awslabs/aws-serverless-express/blob/master/example/app.js

{
  "errorMessage": "\"listener\" argument must be a function",
  "errorType": "TypeError",
  "stackTrace": [
    "Server.addListener (events.js:275:10)",
    "new Server (_http_server.js:234:10)",
    "Object.exports.createServer (http.js:44:10)",
    "Object.createServer (/var/task/node_modules/aws-serverless-express/index.js:144:25)",
    "Object.<anonymous> (/var/task/lambda.js:5:37)",
    "Module._compile (module.js:570:32)",
    "Object.Module._extensions..js (module.js:579:10)",
    "Module.load (module.js:487:32)",
    "tryModuleLoad (module.js:446:12)"
  ]
}

[geovanisouza92]

@metaheap I workaround using concurrently to launch next build and serverless offline --port 4000, and a next.config.js with a webpack DefinePlugin to put a API_ENDPOINT to use on every request for development.

For production mode, API_ENDPOINT is an empty string (due the fact that all functions will be behind the same API Gateway), and the web function works with the built .next folder.

The code is at: https://github.com/geovanisouza92/serverless-next

P.S. It's a WIP yet, please, feel free to open issues and provide help :smiley:

[keeth]

@metaheap i was able to hack out a solution to that problem, see my comment here