Next.js 서버 액션 사용 시 발생한 데이터 직렬화 불일치 문제
·
개발/🛠️ 트러블슈팅
현재 진행하고 있는 코드잇 스프린트의 미션 판다 마켓에서발생한 장애 상황에 대한 트러블 슈팅입니다😃본 미션에 대해 간단하게 설명하자면,판다마켓은 중고상품을 등록하여 사고팔 수 있으며 다른 사용자들과 소통하는 중고거래를 위한 커뮤니티 플랫폼입니다.현재 백엔드는 Node.js + Express 기반으로, DB는 PostgreSql + Prisma를 사용하여 구축하고 있습니다.프론트엔드는 JavaScript + Next.js를 사용하고 있습니다.🚨 문제 상황본 서비스는 자유 게시판에서 자유롭게 글을 올려 다른 사용자들과 소통할 수 있습니다.이를 위해 게시물 등록 페이지를 구현하면서 Next.js의 서버 액션(Server Action)을 사용하여 폼 데이터를 백엔드 API로 전송하는 기능을 구현했습니다. 그..
렌더링 전략: SSG, ISR, SSR, CSR
·
FE/Next
Next.js를 다루게 되면서 일반 리액트의 렌더링 방식과는 다른 Next.js의 렌더링 방식에 대해 접하게 되었다.오늘은 웹 페이지의 네 가지 렌더링 방식에 대해 알아보려 한다! 📌 Next.js에서의 렌더링기본적으로 Next.js는 모든 페이지를 프리렌더링한다.특히 빌드 시점에 생성되는 SSG와 요청 시점에 생성되는 SSR을 지원한다.Next는 각 페이지별로 사용할 프리렌더링 방식을 선택할 수 있게 해 준다는 엄청난 장점이 있다.따라서 용도에 맞게 다른 렌더링 방식을 선택할 수 있다!*프리렌더링 - 빌드 시점에 HTML을 미리 만들어 두거나, 요청 시 HTML을 생성해 두는 것 📌 네 가지 렌더링 방식다음의 네 방식은 모두 page router 버전의 공식 명칭으로, app router에서는 다른..