Next.js에서는 미리 클라이언트 사이드 레더링에 들어가기 전에 서버사이드 렌더링을 접근하여 미리 데이터를 불러올 요소와 선행 작업을 해야될 데이터를 가공하거나 정의 할수있습니다.
이것을 Next.js 의 하이브리드 렌더링이라고 부릅니다.
하이브리드 렌더링 or SSR or CSR 에 대해서 알고싶으시면 아래의 링크를 들어가보시면 됩니다.
export const getServerSideProps = async ctx => {
const result = await checkLogin(ctx, false);
ctx.res.setHeader('Set-Cookie', [`accessToken=deleted; Max-Age=0`, `testToken=deleted; Max-Age=0`]);
if (result.props.isLogin) {
// 로그인 상태 true면 현재 로그인 페이지 접근 불가
return {
props: result.props,
redirect: {
destination: '/content',
permanent: false,
},
};
} else {
return result;
}
};우선 서버사이드에서 클라이언트로 응답을 보낼때 HTTP 헤더를 미리 설정이 가능합니다. 그 부분은 ctx.res.setHeader 의 메서드를 가지고 HTTP 헤더를 설정을 해주게 됩니다. 메서드에 들어간 전달인자에서 자세히 보면,
다양하게 적혀있는데 이부분을 순서대로 나열해서 설명을 한다면?
1. Set-Cookie
set-Cookie 같은 경우는 헤더쪽에 들어가는 HTTP 응답 헤더 일부로, 쿠키를 저장하도록 명령을 넣기위해 사용하는 것 입니다.
2. accessToken=deleted
여기부분에서는 accessToken 같은 경우는 저장하는 키값이 될 것이고, deleted 부분은 값이 될 것 입니다.
3. Max-Age=0
Max-Age=0을 의미하는 경우는 유효하는 시간값을 0초로 만들어들어 버림과 동시에 초기화 시켜버리겠다는 의미도 강하다. 그래서 이 부분으로 인해 유효 할 수 있는 시간이 사라지면서 Cookie가 삭제되는 원리이기도 합니다.
현재 추가적으로 2번째 인자에는 배열이 들어간 것을 볼 수가 있는데, 이렇게 배열로 해서 하나의 kay=value 에 대한 정의를 만들어서 배열에 추가해서 사용할 수 있습니다.
