[NextJS] SSR에서 Cookie 값 저장하고 가져오기

NextJS

SSR에서 Cookie값 저장하기 + 가져오기

 

1. SSR에서 Cookie값 저장 방법

쿠키관련 정보는 이 글에서 생략하며, NEXT에서 쿠키를 다루는 방법에 대해 설명한다. NEXT를 사용하는 이유가 SSR을 적용하기 위해서인데 getServerSideProps()함수를 통해 페이지가 로드되는 경우 서버사이드 렌더링을 할 수 있다. 이 함수 내에서 NextContextPage를 받아오면 query, response, request에 대해 볼 수 있다.

Client에 뿌려질 response의 헤더에 쿠키 값을 저장할 수 있는데 저장 방법은 아래와 같다.

export async function getServerSideProps(context : NextPageContext) {
	const { query, res, req } = context;
 	//기존 쿠키 삭제
	res.setHeader('Set-Cookie', [`loginPovider=deleted; path=/; Max-Age=0`, 
	`accessToken=deleted; path=/; Max-Age=0`,
	`refreshToken=deleted; path=/; Max-Age=0`,
	`needCertifyPhone=deleted; path=/; Max-Age=0`,
	`id_token=deleted; path=/' Max-Age=0`]);
	if (access_token != null) // 새 쿠키 설정 (Array로 작성해야함.)
	{
		var cookieArray = [`loginPovider=${provider}; path=/;`,
		`accessToken=${access_token}; path=/;`,
		`refreshToken=${refresh_token}; path=/;`,
		`needCertifyPhone=${phone_num == null ? 'true' : 'false'}; path=/;`]
		if (id_token != null) {
			cookieArray.push(`idToken=${id_token}; path=/;`);
		}
		res.setHeader('Set-Cookie', cookieArray);
	}   
}

쿠키를 설정해 줄때 설정해야할 값이 여러개일 경우 array로 작성하여 한번에 값을 설정해줘야한다. 만약 setHeader로 여러번 할 경우 마지막에 설정된 값만 쿠키에 저장될 수 있으니 주의할것!

쿠키 설정 시 path를 설정해줘야 설정된 path 하위페이지들에서만 저장한 쿠키가 보인다. 따라서 본인은 path='/' 루트로 지정함으로써 전체 페이지에서 해당 쿠키 값을 다 사용할 수 있도록 했다. 

반응형

---

2. SSR에서 Cookie값 가져오기

그렇게 설정된 쿠키 값은 다른 페이지에서 SSR 방식으로 불러다 쓸 수있다. 이번에는 반대로 request로 부터 해당 쿠키 값을 로드해올 수 있다.

//쿠키 스트링을 객체로 변환
const cookieStringToObject = (cookieString : string[] | string | any) => {
    if (!cookieString) {
      return "";
    } else {
    
      cookieString = cookieString.split("; ");
      let result = {};
      
      for (var i = 0; i < cookieString.length; i++) {
        var cur = cookieString[i].split("=");
        result[cur[0]] = cur[1];
      }
      return result;
    }
};

//SSR
export async function getServerSideProps (context : NextPageContext) {
	const { req, res, query } = context;
    if (req.headers.cookie) {
        const splitCookies : any = cookieStringToObject(req.headers.cookie);
    }
}

req.headers.cookie로 부터 받아온 쿠키스트링은 key/value가 아닌 그냥 스트링 그대로 이므로 위에 함수를 이용하여 Object로 변환해줬다.

---

3. Cookie 삭제하기

이렇게 저장하고 쓰인 쿠키들은 어떻게 삭제해줘야할까? 

정답은 Max-Age=0;에 있다.

//기존 쿠키 삭제
res.setHeader('Set-Cookie', [`loginPovider=deleted; path=/; Max-Age=0`, `accessToken=deleted; path=/; Max-Age=0`, `refreshToken=deleted; path=/; Max-Age=0`, `needCertifyPhone=deleted; path=/; Max-Age=0`, `id_token=deleted; path=/' Max-Age=0`]);

이런식으로 값을 변경한 후 다시 쿠키를 저장해주면 기존에 있던 쿠키들이 삭제 된다.

사실 이번에 뭔가 쿠키로 좀 삽질을 했었는데 아예 모르던 상태로 SSR에서 쿠키값을 핸들링하다보니 쉽지 않았다. 이 외에 그냥 javascript식으로 저장하고 불러오는 방법도 있지만. Next에서는 위와 같은 방법을 추천한다.