[NextJs] CSR , SSG , SSR , ISR 예제

※ CSR (Client Side Rendering)

import SubLayout from '@/components/SubLayout';
import { useState, useEffect } from 'react';

function Csr() {
	console.log('csr');
	const [Now, setNow] = useState('');

	useEffect(() => {
		//데이터가 연산 되는 시점은 클라이언트단에서 컴포넌트가 재 실행 될 때 마다
		setNow(performance.now());
	}, []);

	return (
		<SubLayout name={'CSR'}>
			<p>CSR 방식 테스트 페이지 입니다.</p>
			<h1>{Now}</h1>
		</SubLayout>
	);
}

export default Csr;

 

 

※ SSG (Static-Site-Generation)

import SubLayout from '@/components/SubLayout';

function Ssg(props) {
	return (
		<SubLayout name={'SSG'}>
			<p>SSG 방식 테스트 페이지 입니다.</p>
			<h1>{props.now}</h1>
		</SubLayout>
	);
}

export async function getStaticProps() {
	//해당 프로젝트를 빌드시에 한번만 호출
	console.log('ssg');
	return {
		props: { now: performance.now() },
	};
}

export default Ssg;

 

※ SSR (Server Side Randering)

import SubLayout from '@/components/SubLayout';

function Ssr(props) {
	return (
		<SubLayout name={'SSR'}>
			<p>SSR 방식 테스트 페이지 입니다.</p>
			<h1>{props.now}</h1>
		</SubLayout>
	);
}

export async function getServerSideProps() {
	/*
		- 페이지 접속시 마다 호출 (서버단에서 동작)
		- full load 되는 것이 아닌 정적인 페이지는 재활용하고 동적으로 서버에서 fetching 한 데이터만 hydration
		- build 타임에 실행되는 것이 아닌 페이지가 랜더링 될때마다 실행
	*/
	console.log('ssr');
	return {
		props: { now: performance.now() },
	};
}

export default Ssr;

 

※ ISR (Incremental Static Regeneration)

import SubLayout from '@/components/SubLayout';

function Isr(props) {
	return (
		<SubLayout name={'ISR'}>
			<p>ISR 방식 테스트 페이지 입니다.</p>
			<h1>{props.now}</h1>
		</SubLayout>
	);
}

export async function getStaticProps() {
	/*
		해당 프로젝트를 빌드 시 호출
		revalidate에 지정한 시간 마다 새로 revalidate해서 새로운 pre-render-page로 재빌드 (현재 5초)	
	*/
	console.log('isr');
	return {
		props: { now: performance.now() },
		revalidate: 5,
	};
}

export default Isr;