context.req에 대해서 질문이 있습니다.

Question

안녕하세요. 이번 강의에서 설명하신게 이해가 잘 되지 않아서 질문드립니다.

위 코드가 강의에서 설명하신 코드인데요(콘솔로그 부분 제외)

1. getServerSideProps가 프론트 서버에서 실행되는 코드라고 하셨는데, 이는 back 디렉토리에 백엔드 서버 코드의 (req,res,next)=>{

...

return res.status(200).send('ok')

}

처럼 프론트 서버의 특정 라우터로 요청이 갔을 때 실행되는 부분이라고 이해했는데 맞나요..?

2. 그래서 이것을 확인해보기 위해서 req.url과 req.method를 콘솔로 찍어봤는데

첫 새로고침 때는 위와 같이 나와서 생각한게 맞구나 싶었는데,

다른 페이지를 갔다가 오면 위처럼 req.url이 다르더라고요.. 무슨 차이가 있는건지 궁금합니다...

3. getServerSideProps 안에 작성된 코드가 프론트 서버에서 실행되는 코드라면 context.req 는 항상 true가 아닌가요..? 요청이 왔을 때만 서버가 실행된다고 생각했고,

    const {cookie} = context.req.headers;

    axios.defaults.headers.Cookie = "";

    if (cookie) {

      axios.defaults.headers.Cookie = cookie;

}

이렇게 코드를 작성해도 되는게 아닌가 싶어서 질문드립니다. 혹시 context.req 가 true가 아닐 경우가 있으면 간단한 예를 들어주실 수 있을까요??

4. 마지막으로 프론트 서버는 어디서 온건가요...?

.next - server 에 있는게 프론트 서버인가요??? 해당 서버는 pages의 파일들을 수정하면 알아서 설정되는 것인지도 궁금합니다.

Answer

1. 네 맞습니다. 각 페이지가 각 라우터라고 보시면 됩니다.

2. 첫 요청만 서버 라우터처럼 작동하고(데이터+페이지까지 모두 렌더링) 그 다음부터는 클라이언트사이드 라우팅입니다. 이 때는 서버에서 json 데이터(getServerSideProps에서 return한 값)만 받아옵니다.

3. getServerSideProps에서는 항상 context.req값이 있습니다. 저 코드는 제가 getInitialProps 때 썼던 것과 똑같이 복사해와서 그렇습니다. getInitialProps는 클라이언트에서 실행될 때도 있어서요.

4. 어디서 왔다는 말이 이해가 잘 안 됩니다. next 자체가 프론트 서버입니다. 빌드된 결과물은 .next 안에 나오는 게 맞고요. 개발 시에는 pages나 다른 파일들을 수정할 때마다 빌드가 다시 됩니다. (배포용 빌드는 직접 하셔야 합니다)