next.js 2

캐시된 데이터로 인한 북마크 상태 미반영 문제 해결

STO 조각 투자 플랫폼을 개발하면서 주요 상품 현황에서 데이터들을 보여주고 있는데, 캐시된 데이터로 인해 북마크 상태가 반영이 제대로 안되는 문제를 해결한 경험을 적어보려 한다.   위 사진을 보면, 처음에 탭을 누를 때 API를 호출하고 한 번 호출을 하면 캐시된 데이터를 보여줘서 불필요한 API 호출을 방지해서 서버 호출 낭비를 최적화하였다. 전체 탭에는 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 카테고리 중 하나의 카테고리가 나오게 되는데, 문제는 북마크를 추가했을 때 해당 데이터가 속한 특정 카테고리의 캐시만 무효화해야 하는데 그렇지 못해서 상태가 제대로 반영되지 않았다. 예로 전체 탭에 사진과 같이 음악저작권 데이터가 호출된 상태라고 가정해보면, 전체탭에서 데이터를 북마크한 후에..

Frontend 2024.10.21

SSR, SSG, ISR

CSR이 가진 단점을 극복하기 위해서 SSR 개념을 부분적으로 적용하고 싶을 수 있다.SPA 방식인 React에서 Next.js 프레임워크를 사용하여 SSR을 적용하는 방법에 대해 알아보고 Next.js에서 사용되는 렌더링 방식인 SSR, SSG, ISR 방식의 차이에 대해서 배워보도록 하자. Pre-RenderingNext.js는 렌더링을 할 때 기본적으로 pre-rendering(사전 렌더링)을 수행한다.사전 렌더링이란 서버단에서 DOM 요소들을 Build하여 HTML 문서를 렌더링하는 것을 말한다. 또 하나의 중요한 개념으로는 Hydration이 있다.Hydration이란 이렇게 미리 렌더링된 HTML에 JavaScript를 결합하여서 이벤트가 동작할 수 있도록 만드는 과정을 말한다.하지만 이러한 ..

Frontend 2024.09.02