서버와 클라이언트의 상태를 일치시키기, Isomorphic

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 / Next.js 사용자 / SSR 기술 이해도 중간 이상

핵심 요약

• window, document, location 등의 브라우저 전용 객체는 SSR 환경에서 사용 불가
• Isomorphic 코드 작성이 서버-클라이언트 동기화를 위해 필수적
• getServerSideProps API를 통해 서버 데이터를 클라이언트에 전달하여 Hydration Mismatch 방지

섹션별 세부 요약

1. SSR 기초 개념

• SSR(Server Side Rendering): 서버에서 HTML 생성 후 브라우저로 전달
• SEO 최적화와 빠른 초기 로딩의 장점 제공
• Next.js는 SSR을 프레임워크 차원에서 지원

2. SSR 환경에서 발생하는 문제

• window is not defined 에러: 브라우저 전용 객체 사용 시 서버에서 실행 불가
• 예시 코드:

```javascript

const name = new URL(location.href).searchParams.get('name');

```

• Hydration Mismatch: 서버/클라이언트 렌더링 결과 불일치로 경고 발생

3. Hydration 프로세스

• 4단계 흐름:

1. 서버에서 HTML 생성
2. 초기 상태(props)를