1. Next.js - Data Fetching

Next.js 가 제안하는 3+1 Data Fetching 방법

SSR (Server Side Render)

서버가 데이터를 가져와서 그린다.
SSR 담당하는 함수 : getServerSideProps

export async function getServerSideProps() {
	// show 터미널창
	console.log('server');
	return {
		props: { time: new Date().toISOString() }
	};
}

export default function SSR({ time }) {
	return (
		<>
			<h1 className={styles.title}>{time}</h1>
			<Link href={'/csr'}>CSR 로</Link>
			<Link href={'/ssg'}>SSG 로</Link>
			<Link href={'/isr'}>ISR 로</Link>
		</>
	);
}

새로고침 시 vscode 내의 터미널 창에서 콘솔이 보이는 것을 알 수 있다.

CSR (Client Side Render)

클라이언트가 데이터를 가져와서 그린다.
기존 React 사용법과 동일하다.

export default function CSR() {
	const [time, setTime] = useState();

	useEffect(() => {
		console.log('client');
		setTime(new Date().toISOString());
	}, []);

	return (
		<>
			<h1 className={styles.title}>{time}</h1>

			<Link href={'/ssr'}>SSR 로</Link>
			<Link href={'/ssg'}>SSG 로</Link>
		</>
	);
}

SSG (Static-Site Generation)

정적인 사이트를 데이터를 가져와서 그려 둔다.
SSG 담당하는 함수 : getStaticProps (with getStaticPaths)

export async function getStaticProps() {
	console.log('server ssg');
	return {
		props: { time: new Date().toISOString() }
	};
}

export default function SSG({ time }) {
	return (
		<>
			<h1 className={styles.title}>{time}</h1>

			<Link href={'/csr'}>CSR 로</Link>
			<Link href={'/ssr'}>SSR 로</Link>
		</>
	);
}

yarn dev 는 ssr처럼 동작한다. (새로고침할 때 마다 time이 업데이트)
yarn build -> yarn start를 실행하면
빌드 타이밍의 time이 저장되어 새로고침해도 정적인 상태를 유지한다.
즉, 빌드 시 정적 사이트를 미리 만들어 둔 것이다.
ex) 블로그 글 (수정 전까지의 상태)

ISR (Incremental Static Regeneration)

증분 정적 사이트를 재생성한다.
-> (특정 주기로) 정적인 사이트를 데이 터를 가져와서 다시 그려둔다.
ISR 담당하는 함수 : getStaticProps with revalidate

export async function getStaticProps() {
	console.log('server isr');
	return {
		props: { time: new Date().toISOString() },
		revalidate: 5 // n초 간격으로 데이터를 새배치 해줌
	};
}

export default function ISR({ time }) {
	return (
		<>
			<h1 className={styles.title}>{time}</h1>

			<Link href={'/csr'}>CSR 로</Link>
			<Link href={'/ssr'}>SSR 로</Link>
		</>
	);
}

revalidate 이 없다면 SSG와 동일해보일 것이다.
revalidate에 숫자를 부여한 후 build -> start 하면 입력한 숫자(초) 간격으로 데이터를 새 배치해서 불러온다.
ex) 5초 후에 새로고침을 하면 time 업데이트

SSR은 서버 부하가 올 수 있으므로 필요에 맞춰서 SSG + ISR를 사용하면 좋을 것 같다.