getServerSideProps 와 쿠키 공유 부분 질문

Question

브라우저에서의 http 요청과 응답 과정을 보면 1. 클라이언트(브라우저)가 처음 요청시에는 쿠키를 가지지 않은 상태로 요청을 보내고 2. 서버에서 응답할때 쿠키를 같이 보내주고 3. 클라이언트에서 다시 요청시 서버에서 받은 쿠키를 별도의 설정 없이도 같이 보내줘서 서버는 요청에 들어있는 쿠키를 읽어서 사용자가 누구인지 파악할 수 있다 이렇게 알고 있는데요 그럼 getServerSideProps 는 프론트서버에서 백엔드 서버로 요청하는 것이고, 브라우저가 아니기 때문에 요청을 보낼 때 axios요청에 쿠키를 직접 담아서 보내줘야 하는데.. 그 과정에서 export const getServerSideProps = wrapper . getServerSideProps ( async ( context ) => { const cookie = context .req ? context .req.headers.cookie : '' ; axios .defaults.headers.Cookie = '' ; if ( context .req && cookie ) { axios .defaults.headers.Cookie = cookie ; } context .store. dispatch ({ type : LOAD_MY_INFO_REQUEST , }); context .store. dispatch ({ type : LOAD_POSTS_REQUEST , }); context .store. dispatch ( END ); await context .store.sagaTask. toPromise (); }); getServerSideProps가 실행되면 1. 위 과정과 같은 방법으로 실행되는게 맞나요? 만약 그렇다면 클라이언트는 프론트서버고, 서버는 백엔드서버 역할을 하는걸까요 2. 프론트서버가 요청을 보냈으니 context.req는 항상 true인가요? 3. 요청을 보낼 때부터 req에 쿠키가 있는건가요? 아니면 위 과정처럼 백엔드서버에서 응답을 받은 쿠키로 체크하는걸까요? (아래 디스패치까지 연결하면 더 이해가 안가요;;)

제로초(조현영) · Answer

1. ssr 시에는 브라우저의 역할은 프론트 서버로 쿠키를 보내주는 겁니다. 그리고 프론트 서버에서 getServerSideProps가 호출되는 것이고, 브라우저로부터 받은 쿠키는 context.req.headers.cookie에 들어 있습니다. 2. 프론트 서버이므로 true입니다. 3. 브라우저를 통해서 프론트 서버의 getServerSideProps가 호출될 때만 req에 쿠키가 들어 있습니다. dispatch 등도 리덕스가 프론트 서버에서 새로 생성돼서 실행되는 겁니다. 프론트 서버에서 생성된 리덕스는 hydrate를 통해 브라우저에 전달되는 것이고요.