React 고급 기술 익히기 - 4편: 코드 스플리팅과 서버 사이드 렌더링(SSR) 최적화

 

1. 코드 스플리팅(Code Splitting) 이란?

코드 스플리팅은 애플리케이션을 여러 개의 번들로 나누어 필요할 때만 로드하는 기법입니다.

React.lazy와 Suspense 사용

<script>
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

export default function App() {
  return (
    <Suspense fallback={"Loading..."}>
      <LazyComponent />
    </Suspense>
  );
}
</script>

React Router와 코드 스플리팅

<script>
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

export default function App() {
  return (
    <Router>
      <Suspense fallback={"Loading..."}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}
</script>

2. 서버 사이드 렌더링(SSR)이란?

SSR(Server-Side Rendering)은 React 컴포넌트를 서버에서 렌더링한 후 HTML을 클라이언트에 전달하는 방식입니다.

Next.js에서 SSR 구현

<script>
export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await res.json();

  return {
    props: { post: data },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}
</script>

정적 사이트 생성(SSG)

<script>
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await res.json();

  return {
    props: { post: data },
    revalidate: 10, // 10초마다 갱신
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}
</script>

3. CSR, SSR, SSG 비교

렌더링 방식	방식 설명	장점	단점
CSR (Client-Side Rendering)	모든 렌더링을 클라이언트에서 수행	빠른 상호작용, 서버 부담 적음	초기 로딩 속도가 느림, SEO에 불리
SSR (Server-Side Rendering)	서버에서 HTML을 생성해 제공	SEO 최적화, 빠른 첫 페이지 로딩	서버 부담 증가, 응답 속도 지연 가능
SSG (Static Site Generation)	정적인 HTML을 미리 생성해 제공	매우 빠른 로딩 속도, 서버 부담 최소화	데이터 변경 시 빌드 필요

4. 결론

• 코드 스플리팅을 활용하여 초기 로딩 속도를 개선하세요.
• SSR을 활용하면 SEO와 초기 렌더링 성능을 개선할 수 있습니다.
• Next.js의 getServerSideProps(SSR)와 getStaticProps(SSG)를 활용하여 성능 최적화를 진행하세요.

다음 5편에서는 React 애플리케이션의 보안과 성능 최적화를 다뤄보겠습니다. 🚀

질문이나 의견이 있다면 댓글로 남겨주세요! 😊