소개

---

• Next.js 의 SSR과 CSR을 효과적으로 관리하는 방법에 대해 설명한다.
• dynamic , useEffect , suppressHydrationWarning 의 차이점과 각각의 사용 상황을 다룬다.

1. dynamic을 사용하여 동적 컴포넌트 로딩

---

[ 설명 ]

• dynamic 함수는 클라이언트 전용 컴포넌트를 동적으로 로드할 수 있게 해준다.
• SSR을 비활성화하여 초기 로딩 시간을 단축하고, 특정 컴포넌트를 필요할 때 로드한다.

[ 사용 예시 ]

import dynamic from 'next/dynamic';

const HydrationTestNoSSR = dynamic(() => import('@/components/hydrationTest'), 
                                   {ssr: false});

const Page = () => {
  <div>
  	<h1>My Page</h1>
  	<HydrationTestNoSSR />
  </div>
}

export default Page;

[ 언제 사용하면 좋은가? ]

• 클라이언트 전용 컴포넌트를 로드할 때
• 초기 로딩 성능을 최적화할 때
• 브라우저 API를 사용하는 컴포넌트를 다룰 때

2. useEffect를 사용하여 클라이언트 사이드 로직 실행

---

[ 설명 ]

• useEffect 훅은 컴포넌트가 마운트된 후 클라이언트 사이드에서 실행된다.
• 서버와 클라이언트 간의 상태를 동기화하거나 클라이언트에서 특정 로직을 실행하는 데 유용하다.

[ 사용 예시 ]

import { useState, useEffect } from 'react';

const TimeComponent = () => {
  const [time, setTime] = useState('');
  
  useEffect(() => {
    setTime(new Date().toLocalTimeString());
  }, []);
  
  return (
    <div>
    	The Current time is: {time}
	</div>
	);
};

export default TimeComponent;

[ 언제 사용하면 좋은가? ]

• 클라이언트에서 실행되어야 하는 로직이 있을 때
• 데이터 패칭, DOM 조작, 이벤트 리스너 설정 등 클라이언트 전용 작업

3. suppressHydrationWarning 으로 경고 억제

---

[ 설명 ]

• 서버와 클라이언트 간의 HTML 불일치로 인해 발생하는 경고를 억제한다.
• 주로 클라이언트에서만 동적으로 업데이트되는 컴포넌트에서 사용된다.

[ 사용 예시 ]

import { useState, useEffect } from 'react';

const TimeComponent = () => {
  const [time, setTime] = useState('');
  
  useEffect(() => {
    setTime(new Date().toLocalTimeString());
  }, []);
  
  return (
    <div suppressHydrationWarning>
    	The Current time is: {time}
	</div>
	);
};

export default TimeComponent;

[ 언제 사용하면 좋은가? ]

• 서버와 클라이언트 간의 타이밍 차이로 인해 HTML 불일치가 발생할 때
• 클라이언트에서만 동적으로 변하는 데이터를 다룰 때

결론

---

Next.js 에서 서버와 클라이언트 간의 동기화는 중요한 과제이다.

dynamic 은 동적 컴포넌트 로딩과 초기 로딩 성능 최적화에 유용하며,
useEffect 는 클라이언트 사이드 로직 실행에 필수적이다.
suppressHydrationWarning 은 불필요한 경고를 억제하여 클라이언트에서만 동적으로 변하는 데이터를 처리할 때 유용하다.

각 방법의 적절한 사용을 통해 더 나은 사용자 경험을 제공할 수 있다.