next js 기초 정리하기 page fetching 3+1

설치

1. yarn create-next-app .

Data Fetching 데이터를 가져오기

SSR Server Side Render

• SSR 서버가 그린다. => 서버가 데이터를 가져와서 그린다.
• getServerSideProps()

export async function getServerSideProps() 
	console.log("hi")
    return {
        props: { time: new Date().toISOString() },
    };
}

-> hi는 서버에서 그려서 나오기 때문에 콘솔에 안나옴
-> 새로고침을 해도 계속 데이터가 변한다.

CSR Client Side Render

react 쓰듯이 쓴다.

SSG Static-Site Generation

• 정적인 사이트를 생성한다. -> 정적인 사이트를 데이터를 가져와서 그려둔다.
• getStaticProps()

``jsx
export async function getStaticProps()
console.log("hi")
return {
props: { time: new Date().toISOString() },
};
}

• yarn dev로 는 제대로 볼 수 없기 때문에 yarn build 후 yarn start를 해야한다.
• build 하는 타이밍에 생성이 된다.
• 서버 부화를 줄인다.
• 새로고침을 해도 바뀌지 않는다.

※ getStacticPath()

ISR

• 증분 정적 사이트를 재생성한다. -> 특정 주기로 데이터를 가져와서 다시 그려둔다.
• 정적인 사이트를 데이터를 가져와서 다시 그려둔다.
• getStaticProps with revalidate

export async function - getStaticProps () 
	console.log("hi")
    return {
        props: { time: new Date().toISOString() },
      	revalidate:1 // 1초단위
    };
}