🌵 문제 상황
next.js를 활용하여 유용한 링크를 모아두는 웹사이트(like 북마크)를 구현하는 프로젝트에서
공유된 링크를 클릭하면 보이게 될, 공유된 폴더만을 위한 공유 페이지가 필요했습니다.
예를 들어 "유용한 링크"라는 이름을 가진 폴더를 공유하면
https://l1 nkbrary.netlify.app/shared/463 와 같이 폴더의 아이디가 들어간 고유한 링크가 생성되고,
해당 링크로 들어가면 아래와 같은 페이지를 볼 수 있습니다.
next.js로 구현 중이었기 때문에 페이지 렌더링 시 SSG / SSR / ISR을 활용하고 싶었습니다.
해당 페이지는 저장된 링크 목록이 실시간으로 업데이트될 필요가 없었으므로
SSG를 사용하여 생성되어 있는 모든 폴더별 페이지를 빌드 시에 미리 렌더링하려고 하였습니다.
그러나 전체 폴더 목록을 불러오기 위한 api("/folders")는 액세스 토큰이 필요한 요청이었고,
액세스 토큰은 로컬 스토리지에 저장하여 사용 중이었기 때문에 서버 사이드에서 접근이 불가하였습니다.
따라서 빌드 시점에 모든 폴더의 페이지를 생성할 수 없는 상황이었고, 결국 다른 렌더링 방식을 고려하였습니다.
🌵 해결 방법
전체 폴더 목록이 아닌 개별 폴더에 저장된 링크 목록을 불러오는 api("/folders/{folderId}")는 액세스 토큰이 필요하지 않은 요청이었기에
해당 api를 활용하여 SSG가 아닌 SSR로 사용자가 특정 폴더의 공유 링크를 클릭하는 순간 해당 폴더의 페이지가 생성되도록 수정하였습니다.
export const getServerSideProps = async (
context: GetServerSidePropsContext,
) => {
const sharedFolderId = parseInt(context.params?.id as string, 10);
const linkList = await getLinkListForSSR({ folderId: sharedFolderId });
const sharedFolderName = (await getFolderDetail({ folderId: sharedFolderId }))
.name;
return {
props: {
linkList,
sharedFolderName,
},
};
};getServerSideProps 함수를 사용하여 SSR 방식으로 페이지가 렌더링되도록 하였습니다.
특정 폴더를 공유하면 해당 폴더의 아이디가 포함된 링크가 생성되기 때문에
링크에 있는 폴더 아이디 값을 가져와, 해당 폴더에 저장된 링크 목록을 가져오는 api 요청에 포함하여 전달하였습니다.
🌵 정리
- SSG를 활용하여 빌드 시점에 폴더 아이디별 페이지를 생성하려면 '전체 폴더 목록'이 필요함
- '전체 폴더 목록'을 가져오는 api 요청은 로컬 스토리지에 저장되어 있는 엑세스 토큰이 요구됨
- 그러나 빌드 시점에 서버는 로컬 스토리지에 접근할 수 없기 때문에, 엑세스 토큰이 요구되는 '전체 폴더 목록'을 불러오는 것은 불가능함
- 따라서 빌드 시점에 모든 폴더의 페이지를 미리 만들어 놓는 SSG는 활용할 수 없음
- 대신 '개별 폴더'에 저장된 링크 목록을 불러오는 api 요청은 액세스 토큰이 요구되지 않음
- 따라서 SSR을 활용하여 공유된 링크에 포함되어 있는 '공유된 폴더의 아이디 값(folderId)'을 가져와 api 요청을 보냄
- 응답으로 받은 '해당 폴더에 저장된 링크 목록'으로 서버 사이드에서 공유 페이지를 생성하고, 사용자에게 보여줌
읽어주셔서 감사합니다:)
