실시간 재고를 갖춘 정적 사이트
빠른 사이트를 원하면서도 정확한 재고 수준이 필요할 것입니다. 대부분의 사람들은 하나를 선택합니다. 속도나 정확성 중 하나를 고르죠. 하지만 그럴 필요는 없습니다.
정적 사이트는 빠릅니다. 하지만 빌드 사이의 데이터는 오래될 수 있습니다. 클라이언트 측 페칭(fetching)은 정확합니다. 하지만 로딩 스피너가 추가됩니다. 스피너는 사용자 경험을 해칩니다.
두 가지 데이터 기준(layers of truth)을 사용하세요.
첫 번째 계층은 외부 시스템을 위한 것입니다.
- Google과 Meta를 위해 빌드 시점의 데이터를 사용합니다.
- 이를 통해 품절된 상품에 대한 광고가 나가는 것을 방지합니다.
- 동기화 스크립트가 이 데이터를 최신 상태로 유지합니다.
두 번째 계층은 방문자를 위한 것입니다.
- 상점 그리드를 정적 HTML로 렌더링합니다.
- 상품이 있는 것으로 가정합니다.
- 페이지가 로드된 후 UI를 패치하는 작은 스크립트를 사용합니다.
- 이를 통해 품절된 상품의 구매 버튼을 제거합니다.
이 방식은 로딩 상태를 없애줍니다. 페이지가 즉각적으로 느껴집니다. API 호출에 실패하더라도 사이트는 여전히 작동합니다. 사용자는 상품을 둘러보고 장바구니에 담을 수 있습니다. 상품이 품절된 경우, 장바구니에서 요청을 거부합니다.
빈 화면보다는 장바구니 오류가 낫습니다.
트래픽이 적은 상점에 이 방식을 사용하세요. 예술품이나 니치(niche) 상품에 적합합니다. 플래시 세일(flash sales)에는 사용하지 마세요. 트래픽이 높은 경우에는 엄격한 확인 절차가 필요합니다.