Stilllee
commented
3 weeks ago - 인덱스 페이지: 영화 목록과 추천 영화가 자주 변경되지 않아 SSG 적용. 빠른 초기 로딩 가능.
- 서치 페이지: 레이아웃은 SSG로 처리, 검색 결과는 클라이언트에서 동적 페칭. 빠른 초기 로딩과 실시간 검색 기능 결합.
- 무비 페이지: 영화 상세 정보는 변경이 드물어 SSG 적용.
getStaticPaths로 모든 영화 페이지 사전 생성.
미션) 한입-씨네마 SSG 적용하기 (with 데이터 페칭)
미션 : 한입 씨네마 프로젝트의 대부분의 페이지에 SSG 적용하고, 근거 설명하기
참고로 인덱스 페이지의 추천 도서는 고정해두셔도 됩니다.
다음날 배울 ISR 방식에서 SSG 페이지의 데이터를 간단히 갱신하는 방법을 살펴볼거에요!
Next.js는 SSR, SSG, ISR 등 굉장히 다양한 사전 렌더링 방식을 제공하고 있습니다. 그리고 이 방식들은 페이지별로 따로 적용될 수 있기 때문에 우리 개발자들은 각 페이지에 최적으로 잘 어울리는 사전 렌더링 방식을 항상 고민하고 찾아내야 합니다. 정답은 언제나 바뀔 수 있죠
오늘 살펴본 SSG는 빌드 타임에 미리 사전 렌더링을 마치는 방식이었습니다. 그 덕에 사용자의 접속 요청에 미리 만들어둔 페이지를 곧바로 응답할 수 있어 매우 빠른 응답 속도를 보장할 수 있습니다. 그리고 이런 장점은 사용자의 경험을 크게 향상시키기에 오늘날 Next.js로 개발된 대부분의 서비스들은 되도록 최대한 많은 페이지에 SSG를 적용하고 있는 상황입니다.
그러니 우리도 오늘 "한입 씨네마" 프로젝트에 SSG를 적용해보겠습니다. 되도록 많이요!
그럼으로써 기존보다 훨씬 빠른속도로 페이지 응답이 이루어질거라 기대해볼 수 있을겁니다.
단, SSG는 실시간으로 변화하는 데이터를 반영하기는 어렵다는 단점도 함께 가지고 있죠 따라서 무분별하게 모든 페이지에 적용하는 대신! 적절히 잘 사용해야 합니다. 이 점을 고려하여 미션을 수행해주시면 감사하겠습니다.