[Next.js] Data Fetching의 방법들
도깨비젤리
·2022. 9. 20. 22:15
한 줄 요약
Next.js는 4가지의 Data Fetching을 제공한다.
1. SSR
2. CSR
3. SSG
4. ISR
1. SSR
SSR. (Server Side Render)는 말 그대로 서버에서 데이터를 패칭하여 화면을 그린다는 뜻이다.
서버 측에서 화면을 준비할 수 있다는 것은 React와 차별되는 Next만의 큰 장점인 만큼, 공식화된 방법을 통하여서만 수행할 수 있다. 이때 사용하는 함수가 getServerSideProps이다.
export async function getServerSideProps() {
return {
props: { randoms: Math.round(Math.random() * 100) },
};
}
export default function Home({ randoms }) {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="title">{randoms}</h1>
</main>
//....
* 결과
서버측에서 지정한 props를 페이지로 넘겨주는 것을 볼 수 있다.
여기서 재미있는 점은 getServerSide 함수 안에서 사용한 console.log는 브라우저가 아니라 터미널에서 실행이 된다.
이를 응용한다면, getServerSideProps는 오롯히 서버단에서만 실행되므로, 서버에 있는 데이터들을 이용하여 페이지로 넘겨줄수 있다는 것을 의미한다.
2. CSR
CSR (Client Side Render)는 클라이언트 (대개 사용자의 브라우저)가 어디서인가 데이터를 가져와서 그린다.
우리가 익숙한 SPA 애플리케이션에서의 랜더링 방식을 Next에서도 사용할 수 있다.
CSR의 구현은 따로 정형화 되어있지 않고, 기존 React를 사용하듯 사용하면 된다.
(윗 사진의 파란색 마커 표시 처럼)
3. SSG
SSG(Static Site Generation)는 말 그대로 정적인 문서를 생성하여 보여주는 것이다.
SSG는 getStaticProps라는 정해진 함수를 사용하여 구현할 수 있다. 그런데, 개발환경에서 이를 확인해보면 SSR와 동일하게 이 함수는 서버단에서 동작함을 볼 수 있다. (새로고침할때마다 서버에서 데이터가 생성됨)
그래서 SSG와 SSR이 동일한 것인가? 라고 생각할 수 있으나, 앱을 빌드하고 나면 두 방식의 차이를 명확히 알 수 있다.
SSG는 앱이 빌드 되는 시점에 결정된 데이터를 계속해서 사용한다.
만약 SSG 방식을 사용한 페이지가 런타임에 결정되는 값 (Date 등)을 사용하여 랜더하였다면, 해당 페이지는 몇번을 새로고침하든 빌드한 당시의 값을 사용할 것이다.
그렇기 때문에 SSG는 서버의 부하를 최소화 할 수 있으며, 정적인 문서를 제공하는 블로그 혹은 뉴스채널을 만드는데 많이 사용된다.
SSG는 현재 path를 사용하여 구현할 수 도 있는데, 이는 getStaticPaths라는 정해진 함수를 사용하여 구현이 가능하다
export async function getStaticProps() {
return {
props: { random: Math.round(Math.random() * 100) },
};
}
export default function ssg({ random }) {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="title">{random}</h1>
</main>
//....
4. ISR
ISR (Incremental Static Regeneration)은 증분 정적 사이트를 만드는 방안이다.
쉽게 말해서, 일정한 주기마다 데이터를 가져와서 다시 그리는 것으로, 정적인 웹에 주기적으로 데이터를 다시 부어준다고 생각하면된다.
getStaticProps 에 revaildate라는 속성을 같이 사용하여 구현한다.
export async function getStaticProps() {
return {
props: { random: Math.round(Math.random() * 100) },
revalidate: 1,
};
}
export default function ssg({ random }) {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="title">{random}</h1>
</main>
///...
기본적으로 SSG 와 동일하나, revalidate라는 속성도 같이 return 해주면 revalidate의 value second 마다 데이터를 갱신해주어 다시 화면을 그려준다
'웹 > React' 카테고리의 다른 글
| JSX에서 list를 랜더링 하는 방식 (0) | 2022.04.03 |
|---|---|
| [React 기초] Todo list 만들기 :: 3)InputForm,TODOS (0) | 2021.06.12 |
| [React 기초] Todo list 만들기 :: 2) App, Container, Titlebar (0) | 2021.06.12 |
| [React 기초] Todo list 만들기 :: 1) Intro (0) | 2021.06.12 |
