서버 컴포넌트에서 loading이 필요 한 이유

nextjs는 서버에서 페이지가 만들어 나가기 때문에 loading이 필요 없을 줄 알았는데

Streaming 이라는 형태로 전달 된다고 한다.

CSR과는 아래와 같은 차이가 있는데

nextjs 참 잘 만든 것 같다.

1. CSR (Client-Side Rendering)

클라이언트 사이드 렌더링에서는 컴포넌트가 직접 로딩 상태를 관리합니다:

'use client';

function NewsList() {
  const [news, setNews] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/news')
      .then(res => res.json())
      .then(data => {
        setNews(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>{news.map(item => <NewsItem key={item.id} {...item} />)}</div>;
}

2. Server Component Streaming

서버 컴포넌트에서는 Next.js가 자동으로 로딩 상태를 처리합니다:

// app/news/page.jsx
async function NewsPage() {
  const news = await getNews();
  return <NewsList news={news} />;
}

// app/news/loading.jsx
export default function Loading() {
  return <div>Loading...</div>;
}

주요 차이점

1. 초기 로드

• CSR:
  • 빈 페이지 로드
  • JavaScript 다운로드
  • 로딩 UI 표시
  • 데이터 fetch
  • 최종 컨텐츠 표시
• Streaming:
  • 로딩 UI가 포함된 HTML 즉시 전송
  • 서버에서 데이터 준비
  • 준비된 컨텐츠로 자동 대체

2. 네트워크 통신

• CSR: 여러 번의 네트워크 왕복 필요
• Streaming: 단일 연결을 통한 점진적 전송

3. SEO

• CSR: 초기에는 빈 컨텐츠만 제공
• Streaming: 완성된 HTML 제공으로 SEO 친화적

4. 사용자 경험

• CSR: 상태 변경 시 깜빡임 현상 가능
• Streaming: 부드러운 컨텐츠 전환

언제 무엇을 사용할까?

CSR이 적합한 경우

• 실시간 데이터 업데이트가 필요할 때
• 사용자 인터랙션이 많은 경우
• 작은 데이터를 자주 갱신할 때

Streaming이 적합한 경우

• SEO가 중요한 페이지
• 대량의 데이터를 로드할 때
• 초기 로딩 성능이 중요할 때