[04장][동호] 서버 사이드 렌더링

[khakhiD]

퀴즈

1. 서버 사이드 렌더링 웹 애플리케이션의 가장 큰 장점을 알려주세요.
2. Next.js의 Data Fetching 메서드 중 서버 사이드 렌더링을 구현하기 위한 메서드는 무엇인가요?
   2.1. 위 메서드 없이 빌드할 경우, Next.js는 해당 페이지를 어떻게 처리하나요?

답

정답

1. 초기 페이지 로딩 시간의 단축과 검색 엔진 최적화
2. getServerSideProps
3. 서버 사이드 렌더링이 필요하지 않은 페이지로 간주하고, 빌드 시점에 미리 만들어도 되는 페이지로 간주하여 빌드할 때 미리 트리쉐이킹 해버립니다. 서버 측에서 사전에 렌더링되지 않고 클라이언트 측에서 필요할 때마다 요청 시에 서버에서 렌더링됩니다. 이는 해당 페이지가 동적으로 생성되며, 서버에서 매 요청마다 새로운 페이지를 제공한다는 것을 의미합니다. 이러한 페이지는 서버 사이드 렌더링(SSR)이 아니라 서버 사이드에서 동적으로 처리되는 페이지로 간주됩니다.

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[leeminhee119]

정답

1. HTML을 서버에서 미리 그려 브라우저에 전달하기 때문에 최초 페이지 진입했을 때 FCP가 빨라질 수 있다. SPA는 최초 진입 시 자바스크립트가 빈 HTML에 내용을 그리기 때문에 HTML의 크기가 큰 경우 이 시간은 더 오래 걸릴 수 있다. 하지만 SSR는 서버에서 미리 다 그려서 보내주기 때문에 이 경우 더 유리하다.
2. getServerSideProps
   2.1. 없으면 서버에서 렌더링하지 않고 브라우저가 렌더링한다. 서버사이드렌더링이 필요없는 정적인 페이지로 간주한다.