문제 상황
-
배포한 환경에서 특정 페이지 진입 시, Vercel 413(Payload Too Large) Error 남
-
Vercel 에서 에러를 보여주고 있어서, Vercel 에서 제한한 body size 를 확인하였습니다.
- Vercel 에서 제한한 body size는 최대 4MB 까지 가능 ( Serverless Function 이 아닌 경우)
-
실제로 확인했을 때, body size가 4MB를 초과
-
컨텐츠 내용을 작성할때 에디터를 사용하는데 에디터에 추가된 이미지 정보가 url 값이 아닌 Base64 텍스트가 이미지 태그에 포함되어 업로드 되는 케이스가 존재함
즉, getStaticProps 함수 안에서 백엔드 서버에 호출한 API 는 용량이 크더라도 성공적으로 데이터를 수신 하였으나 해당 response들로 HTML을 생성 후, 브라우저에 전달하는 과정에서 제한 용량을 초과할 경우 발생하였습니다.
문제 해결
작성된 컨텐츠의 내용을 수정하여 이슈를 해결하는 방법도 있었지만, 근본적인 이슈 해결책이 아니였습니다. 해당 컨텐츠 외에도 발생할 수 있기 때문에 코드 단에서 수정을 해야했습니다.
https://vercel.com/docs/errors/FUNCTION_PAYLOAD_TOO_LARGE
위의 문서를 참고하여, 컨텐츠의 내용이 4MB가 넘을 경우 Front Server 에서 처리하지 않고 Client 측에서 data-fetching을 하여 랜더링할 수 있도록 수정하였습니다.
해당 프로젝트에서는 react-query를 사용하여 데이터 fetching 및 관리를 하고 있었습니다.
react-query를 사용하여 body size를 확인하는 방법은 아래와 같은 방법이 있습니다. 실제로 body size의 정확한 수치는 아니지만, 일종의 근사치는 확인할 수 있어서 아래와 같은 방법을 사용하였습니다.
코드 설명
- queryClient instance 생성 후 해당 instance를 통해 fetchQuery
- 이후 해당 instance 를 dehydrate 함수를 사용하여 직렬화시킴
dehydrate : dehydrate 함수는 QueryClient 객체의 상태를 직렬화하고, 서버로 전송하기 전에 직렬화 된 상태를 얻을 수 있도록 도와주는 함수
직렬화(Serialization) :데이터를 바이트 스트림이나 문자열로 변환하는 과정을 말합니다. 메모리에 저장된 객체나 데이터를 파일에 저장하거나, 네트워크를 통해 전송하고, 다른 프로그램과 데이터를 교환하는 등의 목적으로 사용
- 직렬화된 데이터의 크기를 측정 후 4MB 보다 큰 경우, 직렬화한 queryClient 를 클라이언트로 전달하지 않도록 한다.
즉, 4MB보다 큰 경우 해당 response들로 HTML을 생성하지 않고( 캐싱된 것이 없도록 ), 클라이언트 측에서 데이터를 받아와서 랜더링하도록 수정하였습니다.
