Data Fetch 시점 고려하기

Next.js를 사용하며 데이터를 요청할 수 있는 시점은 빌드 시점, 서버사이드 시점, 클라이언트 시점입니다.

• SEO와 관련되며 데이터의 변화가 없는 (음악, 아티스트, 앨범) 디테일 페이지 데이터는 getStaticProps, getStaticPaths를 사용하여 빌드 시점에서 가져오도록 하였습니다.

• SEO와 관련되며, 데이터의 변화가 발생하는 메거진 리스트 데이터는 서버사이드에서 받아왔습니다. 데이터의 변화가 발생하기 때문에 빌드시점에서 가져오는것이 적합하지 않음)

• SEO와 무관하며, 페이지에 자주 업데이트되는 데이터가 포함되어 있고 데이터를 미리 렌더링 할 필요가 없는 보관함 데이터는 클라이언트 사이드에서 받아왔습니다.

1. 먼저 데이터가 없는 페이지를 즉시 표시합니다. 페이지의 일부는 정적 생성을 사용하여 미리 렌더링 할 수 있습니다.
2. 이때 정적 파일들이 로드된 뒤, 데이터를 불러오는 동안 로딩상태를 반영하는 로딩바를 배치함으로써 사용자의 UX를 개선하도록 구현하였습니다.
3. 그런 다음 클라이언트 측에서 데이터를 가져와 준비가 되면 표시합니다.
4. 이 접근 방식은 사용자 대시 보드 페이지에 적합합니다. 대시 보드는 비공개 사용자 별 페이지이기 때문에 SEO는 관련이 없으며 페이지를 미리 렌더링 할 필요가 없습니다.
5. 또, 데이터는 자주 업데이트되므로 요청할 때마다 데이터 가져 오기가 필요합니다.