[04장][상훈] 서버 사이드 렌더링

[bbearcookie]

퀴즈

Page Router 기준으로 Next.js 프레임워크에서는 같은 컴포넌트라고 하더라도 SSR로 그려질 수도 있고, CSR로 그려질 수도 있습니다.
(ex. 최초 페이지 렌더링은 SSR로 동작하지만, 이후 Link 컴포넌트로 라우팅하면 CSR 방식으로 동작)

따라서 useLayoutEffect 와 같이 서버 환경에서는 동작할 수 없는 훅이나, 브라우저에 의존하는 API를 사용하는 경우 이에 대비하는 로직 처리를 해야 하는데요, 어떻게 할 수 있을까요?

답

정답

window, document 등 브라우저에만 존재하는 객체가 있는지 체크하고 분기 로직을 처리합니다. (예시: https://github.com/Andarist/use-isomorphic-layout-effect/blob/main/src/index.ts#L3)

import { useEffect, useLayoutEffect } from 'react'

export default typeof document !== 'undefined' ? useLayoutEffect : useEffect

댓글 작성법

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

[leeminhee119]

정답

음.. getServerSideProps함수를 제외시켜 서버사이드렌더링시키지 않는다..?