serverless-nextjs/serverless-next.js

Error 503 because of timeout when accessing an API endpoint twice in useEffect in 2 different pages

Open

#1697 opened on Sep 16, 2021

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (3,998 stars) (447 forks)batch import
buggood first issue

Description

Issue Summary

When using next js, you can't call different api endpoints from react's useEffect hook in two different pages without a full reload. It results in a 503 error while the actual API endpoint works perfectly fine.

Actual behavior

Using next/link or next/react router to switch to another page results in subsequent api calls (made using axis) in the useEffect hook to fail after 10s of loading with a 503 error, when the API endpoint and the actual page work fine after a reload of the browser. The error in cloud watch is: Task timed out after 10.01 seconds

Expected behavior

Being able to make api calls in useEffect hooks after page switching.

Steps to reproduce

Create a new repo with latest next-auth beta version and make an api endpoint protected by their server side session utility. Try to access this endpoint in two different pages using axios.get(), with the second page accessed via a link.

Screenshots/Code/Configuration/Logs

serverless.yml:

  component: "@sls-next/serverless-component@3.4.0-alpha.8"

Versions

  • OS/Environment: macOS 12 Monterey Beta (Apple M1)
  • @sls-next/serverless-component version: 3.4.0-alpha.8
  • Next.js version: 11.1.2

Additional context

Checklist

  • You have reviewed the README and FAQs, which answers several common questions.
  • You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible.
  • You have first tried using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

Contributor guide

Tech stack
typescriptreactnextjsnodejsaws
Domain
backendfull stackinfrastructure
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
Next.js routingReact useEffectAWS Lambdaserverless framework
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Investigate the reported timeout issue when navigating between pages with API calls in useEffect. Check the serverless next.js source code related to Lambda execution context reuse and how API routes are invoked during client side navigation. Review CloudWatch logs to confirm the timeout source. Look at similar past issues or PRs for clues. Consider whether the issue stems from manual cleanup in useEffect or missing keep alive connections. The issue reporter noted it occurs with @sls next/serverless component@3.4.0 alpha.8 and Next.js 11.1.2.