[241209 TIL] 본캠프 49일차 (Next.js의 렌더링 기법 4가지)

CSR (Client Side Rendering)

브라우저에서 JavaScript를 이용하여 동적으로 페이지를 렌더링하는 방식으로, 렌더링의 주체가 클라이언트이다.

 

장점

• 사용자와의 상호작용이 빠르고 부드럽다.
• 서버에 추가적인 요청을 보낼 필요가 없기 때문에 사용자 경험이 좋다.
• 서버 부하가 적다.

 

단점

• 첫 페이지 로딩 시간(TTV)이 길다.
• JavaScript가 로딩되고 실행되기 전까지는 페이지가 비어있기 때문에 SEO에 불리하다.

'use client';
import { Product } from '@/types';

export default function Home() {
    const [products, setProducts] = useState([]);

    useEffect(() => {
    	fetchData();
    }, []);

    const fetchData = async () => {
        const response = await fetch('http://localhost:4000/products');
        const products: Product[] = await response.json();
        setProducts(products);
    }

    return (
    	...
    )
};

 

 

SSG (Static Site Generation)

서버에서 페이지를 렌더링한 후 클라이언트에게 HTML 파일을 전달하는 방식으로, 렌더링의 주체가 서버이다.

 

장점

• 첫 페이지 로딩 시간이 매우 짧기 때문에 사용자 경험이 좋고 SEO에 유리하다.
• CDN 캐싱이 가능하다.

 

단점

• 정적인 데이터인 경우에만 사용 가능하다.
• 서버와의 통신에 의존하기 때문에 사용자와의 상호작용이 느리다.
• 서버 부하가 크다.
• 데이터에 의존하는 페이지인 경우 사용이 불가능하다.

import { Product } from '@/types';

export default async function Home() {
    const response = await fetch('http://localhost:4000/products');
    const data: Product[] = await response.json();

    return (
    	...
    )
};

 

 

ISR (Incremental Static Regeneration)

SSG와 마찬가지로  정적인 페이지를 제공하지만 설정한 주기마다 서버에서 페이지를 재생성하는 방식으로, 렌더링의 주체가 서버이다.

 

장점

• 정적 페이지를 먼저 제공하기 때문에 사용자 경험이 좋다.
• 주기적으로 페이지를 재생성하기 때문에 최신 상태를 (그나마) 유지할 수 있다.
• CDN 캐싱이 가능하다.

 

단점

• 실시간 페이지가 아니기 때문에 동적 페이지를 구현하기에는 한계가 있다.
• 데이터에 의존하는 페이지인 경우 사용이 불가능하다.

import { Product } from '@/types';

export default async function Home() {
    const response = await fetch('http://localhost:4000/products', next: { revalidate: 5 });
    const data: Product[] = await response.json();

    return (
    	...
    )
};

 

 

SSR (Server Side Rendering)

클라이언트가 요청할 때마다 서버에서 동적으로 페이지를 렌더링하는 방식으로, 렌더링의 주체가 서버이다.

 

장점

• 로딩 속도가 빠르고 보안성이 높다.
• SEO에 유리하다.
• 실시간 페이지를 제공한다.
• 데이터에 의존하는 페이지에서도 사용 가능하다.

 

단점

• 컨텐츠 변경 시 전체 사이트를 다시 빌드해야 되는데, 이 과정에서 시간이 오래 걸릴 수 있다.
• 클라이언트가 요청할 때마다 새로운 페이지를 만들어야 한다.

import { Product } from '@/types';

export default async function Home() {
    const response = await fetch('http://localhost:4000/products', { cache: 'no-store' });
    const data: Product[] = await response.json();

    return (
    	...
    )
};