개선 전
참여 완료 버튼 클릭 시 버튼의 변화가 없습니다.
사용자는 [마이페이지 - 내가 참여한 이벤트 페이지]에 방문하지 않으면, 특정 이벤트의 참여 여부를 알 수 없습니다.
개선 후
참여 완료 버튼 클릭 시 버튼의 변화가 있으며, 이후 사용자가 이미 참여한 이벤트라면, 페이지에 방문했을 때, 버튼 UI가 변경되어 적용됩니다.
버튼 UI 개선 이전에, 이벤트 상세 페이지를 구현하며 getStaticProps와 getStaticPaths를 사용했던 이유
개선하기 이전에는 이벤트 상세 페이지의 사전 생성을 위해 서버 사이드 함수인 getStaticProps와 getStaticPaths를 조합해서 사용했습니다.
개선 전,
getStaticProps를 이용한 이유
버튼 UI를 개선하기 전까지는 이벤트 상세페이지의 데이터는 정적인 데이터들로만 이루어져 있었습니다.
즉, 페이지 데이터가 자주 변경되지 않으며, 사용자의 세션 등을 따로 검사하지 않아도 되는 페이지였습니다.
따라서, 프로젝트 빌드 시점에 페이지를 사전 생성하는 getStaticProps를 이용해도 충분했기에
getServerSideProps가 아닌 getStaticProps를 이용했습니다.
개선 전,
getStaticPaths를 이용한 이유
이벤트 상세 페이지는 동적인 id 값을 기준으로 생성되는 페이지입니다.
하지만, NEXT는 빌드 시점에 페이지를 사전 생성할 때, 어떤 동적 id가 올지, 그리고 얼마나 많은 페이지를 생성할지 모릅니다.
따라서, 이를 Next에게 알려주기 위해 getStaticPaths 함수를 이용해야 합니다.
저는 투데이링크 사이트 방문 시 첫 화면에 보이는 이벤트들이 이벤트 상세 페이지 방문율도 높을 것이라 생각했고,
첫 화면에 보이는 8개의 이벤트 데이터에 대해서 페이지를 사전 생성하기로 했습니다.
따라서, getStaticPaths 함수는 다음과 같이 작성했습니다.
export const getStaticPaths: GetStaticPaths = async () => {
//방문 확률이 높은, 첫 페이지에서 보이는 8개의 게시물에 대한 ID를 가져온다.
const ids = await getEventIds();
const params = ids.map((id) => ({ params: { eventId: id } }));
return {
paths: params,
fallback: true,
};
};그리고, 이렇게 가져온 특정한 8개의 이벤트 id에 대해서 getStaticProps 함수가 (빌드 시점에) 이벤트 상세 페이지를 사전 생성합니다.
저는 이러한 이유들로 참여 완료 버튼 UI를 개선하기 전에는 getStaticProps, getStaticPaths 함수를 이용했었습니다.
그리고, 개선 이후에는 getServerSideProps 함수를 이용하여 페이지를 사전 생성하고 있습니다.
버튼 UI를 개선하며, getServerSideProps를 사용한 이유
버튼 UI를 개선한 이유는 로그인한 사용자들의 사용자 경험을 개선하기 위함이었습니다.
버튼 UI 개선 이전에는, 사용자가 이벤트에 참여했더라도, 마이페이지를 방문하지 않으면 특정 이벤트의 참여 여부를 알 수 없었습니다.
하지만, 이미 로그인한 사용자가 이전에 참여한 이벤트의 상세 페이지에 방문했을 때,
참여 완료 버튼이 동작하지 않아야 하며, 또한 시각적으로도 차이가 있어야 한다고 생각했습니다.
이를 위해 페이지에 접근하는 시점에서 로그인한 사용자의 데이터가 필요했습니다. (해당 유저가 참여한 이벤트 목록에 대한 데이터)
그리고, 유저가 해당 이벤트에 참여했는지를 검사해야 했습니다.
따라서, 저는 getServerSideProps 함수를 이용하여 사용자가 페이지에 접근하는 시점에 이벤트 참여 여부를 체크했습니다.
그리고, 참여 여부를 기반으로 참여 완료 버튼 UI를 구성하여 페이지를 사전 생성하고 있습니다.
예상치 못한 결과
getServerSideProps 함수를 사용한 이후 이벤트 상세 페이지에 접근하는 속도가 느려졌습니다.
(엄밀하게는, 이전에 접근한 페이지에 다시 접근할 때에도 항상 속도가 일정하게 느렸습니다.)
이 현상을 겪으며, 예전에 본 공식 문서의 내용이 생각나서 해당 내용을 찾아보았습니다.
NEXT.js의 공식 문서를 살펴보면 다음과 같이 써져있습니다.
공식문서 해당 링크
We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option."
대략, getStaticProps를 getServerSideProps보다 추천한다는 의미입니다. (CDN 캐시 등의 이유로...)
(물론, 당연히 목적에 따라 장단점이 있지만, 일반적으로는 그렇다는 뜻입니다.)
아마, 이러한 이유로 이전에 getStaticProps를 사용했을 때보다 속도가 느려진 것 같았습니다.
고민
처음에는 getServerSideProps 함수를 이용하면 쉬울 것이라고 생각해서 getServerSideProps를 선택했지만
이런 문제를 겪어보니 getServerSideProps가 정답이 아닐 수도 있을 거라는 생각이 들었습니다.
따라서, 다시 getStaticProps로 수정해야 할지 조금 더 고민을 할 예정입니다.
