Next.js로 FrontEnd SSG 페이지를 만들었다. 이를 AWS Amplify에 배포해 서비스 하고 있다. 그런데 페이지 최초 접속 시 로딩(TTFB)이 느리다. 약 3초 정도의 시간이 걸린다. 그러나 한 번 접속하고 나면 이후부터는 빠르게 접속된다. 그러나 시간이 흐르고 다시 접속하면 느리고, 접속하고나면 빠르고 반복이다. 기기가 달라도 상관없다. 누군가 먼저 접속하고 나면 그 다음부터는 빠르다.
처음에 의심했던 게 Lambda의 Cold Start 같은 문제가 있는게 아닌가 했다. 그런데 Amplify에는 Cold Start 관련한 얘기가 없다. 하지만 Cold Start 처럼 동작한다. Cold Start는 인스턴스가 Sleep 하고 있다가 접근하면 시작되고 이게 일정시간 유지되다 다시 Sleep 하는 것을 말한다. 그러니 처음에 접근하는 경우 느릴 수 밖에 없다.
관련 문제를 찾다보니 깃헙의 amplify-hosting 커뮤니티에 관련 논의들이 꽤 있다. 같은 문제를 호소하는 사람들도 꽤 있다. AWS 관계자인 듯한 사람들의 답변도 있다. 2022년 5월 부터 문제를 조사하고 있다고 답글이 달려 있는데 23년 까지도 조사중이라고 달려 있다. Amplify와 Next.js 간의 궁합에 문제가 있는 듯 하다. 쉽게 해결도 안될거 같고.
https://github.com/aws-amplify/amplify-hosting/issues/3211
https://github.com/aws-amplify/amplify-hosting/issues/2647
https://github.com/aws-amplify/amplify-hosting/issues/3122Vercel의 호스팅 서비스를 쓰면 빠르다는 얘기도 있다. Next.js가 Vercel꺼니 당연히 빠르겠지. 그러나 Amplify를 쓰다가 갑자기 Vercel로
넘어갈 수는 없다. Vercel로 바꾸긴 해야할 거 같은데 당장은 어렵고, AWS측에서도 쉽게 해결 할 것 같지도 않고 그래서 자체적으로 해결 방법을 찾아보기로 했다.
1. Next.js에 캐싱 추가
Next.js는 기본적으로 SSG로 동작한다. SSG면 단순 Html 리턴인데 캐시로 해결하는 방법은 아닌 듯 하다.
2. URL에 Ping 날려서 꺠워주기
Ping을 날려봤지만 깨어나지 않는다. 용사여.
3. Curl로 페이지 호출
콘솔에서 Curl로 페이지를 호출하고 접근해 봤다. 최초 접근을 Curl로 해본 것. 그랬더니 빠르다. Lambda에 페이지를 호출하는 소스를 만들고 이를 EventBridge로 주기적으로 호출하도록 만들면 서비스에 최초 접속이 없으니 빠르게 동작하게 된다. 그러나 접근 통계가 오염되고 다소 과한 듯한 대처라 하지 않기로 했다.
4. Amplify에 성능 모드 활성화 & 커스텀 캐시 추가
Amplify에 성능 모드를 활성화하는 부분이 있다. 이러면 CDN에 캐싱해서 빠르게 처리해 준다. 그리고 커스텀 헤더를 설정할 수 있다. 아래와 같이 Cache-Control 부분을 추가해 줬다. 그리고 5번과 이어진다.
customHeaders:
- pattern: '**/*'
headers:
- key: Cache-Control
value: 'max-age=86400, s-maxage=86400'5. Redirect없이 해당 URL로 Direct 접근
Next.js 구성에서 index.js로 오면 특정 페이지로 Redirect 하도록 처리했다. 이유는 모르겠으나 Redirect 되면서 속도가 느려진다. 이 부분이 Amplify와 Next.js 간의 문제 요소가 아닌가 싶다.
Redirect되는 목적지 URL을 Direct로 접근하면 빠르다. 대신, 4번을 설정하고 처리해야 한다.
결론: 4번으로 설정하고 5번과 같이 접근하면 로딩이 빠르다.
추가) github 이슈의 답변: redirect 문제가 있는데 next13 → next12로 다운그레이드 해서 해결했다는 내용이 있음. next13이 출시 초기라 amplify에 최적화가 안되는 문제일 수도 있음
