강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

yoon1139님의 프로필 이미지
yoon1139

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

SSR시 쿠키 공유하기

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

작성

·

314

0

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

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

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의 파일들을 수정하면 알아서 설정되는 것인지도 궁금합니다.

퀴즈

So với Kết xuất phía client (CSR), ưu điểm chính của Kết xuất phía server (SSR) là gì?

Giảm độ phức tạp phát triển

Cải thiện tốc độ tải ban đầu và hiển thị nội dung nhanh

Cập nhật dữ liệu thời gian thực dễ dàng

Tương thích trình duyệt không có lỗi

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

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

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

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

yoon1139님의 프로필 이미지
yoon1139
질문자

답변 감사합니다!

yoon1139님의 프로필 이미지
yoon1139

작성한 질문수

질문하기