SSR
SSR은 Server Side Render로 서버가 데이터를 가져와서 그리는것을 의미한다.
getServerSideProps()
getServerSideProps()는 요청할 때 마다 html이 새로 생성되기 때문에 데이터가 계속 업데이트 된다.
page를 사용자가 요청하면 getServerSideProps가 실행되어 프론트가 서버에 직접요청 후 데이터를 받아와서 page 컴포넌트에 time을 props로 전달하여 렌더링한다.
getServerSideProps 는 계속 데이터가 바뀌어야하는 페이지의 경우 사용한다.
즉 요청이 들어오면, 서버에서 데이터를 가지고 와서 page에 props로 전달해주는 것이다.
// 새로고침하면 time의 값이 업데이트된다.
export async function getServerSideProps(){
console.log("서버에서 데이터 보내는중..")
return {
props:{time: new Date().toISOString()}
}
}
export default function Home({time}) {
return (
....
<main>
<h1 className={styles.title}>
{time}
</h1>
</main>
)
}CSR
CSR은 Client Side Render로 클라이언트(브라우저)가 데이터를 가져와서 그리는 것을 의미한다.
Next.js에선 CSR을 담당하는 함수는 따로 없다. React에서 사용하는 방법과 동일하게 사용하면 된다.
// 기존에 React에서 사용하던 useState와 useEffect를 사용하는것이 CSR
export default function CSR() {
const [time, setTime] = useState();
useEffect(() => {
setTime(new Date().toISOString())
},[])
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>
{time}
</h1>
</main>
}SSG
Static Side Generation. 즉, 정적인 사이트를 생성한다는 의미다. 정적인 사이트를 데이터를 가져와서 그려둔다는 의미이다.
미리 서버에 빌드된 html 파일을 그려두어 저장하고, 사용자가 요청할 때마다 그 저장된 html을 재사용한다.
항상 정적인 페이지를 보여주기 때문에 서버에 주는 부하가 적다.
getStaticProps
간단히 설명하면 미리 정적인 페이지를 그려놓는 기능을 한다.
// 새로고침 해도 build할때 만들어진 페이지만 보여지게 된다.
// 새로고침을 하더라도 시간은 바뀌지 않는다.
export async function getStaticProps(){
console.log("서버에서 데이터 보내는중..")
return {
props:{time: new Date().toISOString()}
}
}
export default function SSG({time}) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>
{time}
</h1>
</main>
)
}중요한것은, 개발환경에서는 SSG는 제대로 동작하지 않고 SSR처럼 동작한다. 그렇기 때문에 SSG가 제대로 동작하는지 확인하려면 build를 통해 확인해야 한다.
build후에 확인해 보면, 새로고침을 하더라도 데이터가 바뀌지 않을텐데, 그 이유는 build한 시점을 기준으로 SSG를 사용한 페이지가 만들어졌기 때문이다.
Data Fetching을 SSG로 했다면, build한 타이밍에 데이터를 다 가져와서 우리가 보여줄 static한 페이지를 생성하게 된다.
그렇기에 SSG는 데이터가 변하지 않는 정적인 페이지에 사용해야 할 것이다.
ISR
Incremental Static Regeneration. 증분 정적 사이트를 재생성한다. 즉, 특정 주기로 정적인 사이트를 데이터를 가져와서 다시 그려준다는 의미다.
getStaticProps
기존에 SSR에서 사용하던 함수인 getStaticProps를 통해 구현할 수 있다. 하지만 revalidate를 통해 특정 주기를 정해주어야 한다.
export async function getStaticProps(){
console.log("서버에서 데이터 보내는중..")
return {
props:{time: new Date().toISOString()},
revalidate:1, //초
}
}
export default function ISR({time}) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className={styles.title}>
{time}
</h1>
</main>
)
}SSG와는 다르게 새로고침을 해도 데이터가 업데이트가 된다. revalidate의 값을 지정해주면, 그 시간마다 데이터를 fetching 해준다.
정보를 특정 주기를 업데이트 하는 페이지에 사용하면 좋을것 같다.
