7-2. [렌더링] 데이터 호출 메서드

[정적] 데이터가 필요한 페이지에서 빌드시점에 HTML을 정적으로 생성하고 싶으면 getStaticProps , getStaticPaths
[SSR] 서버요청(페이지 접근) 때마다 서버측에서 HTML을 매번 동적으로 생성하고 싶으면 getServerSideProps
[CSR] 빈 HTML을 받아와서 JS를 통해서 그려주고 싶으면 **useEffect()**를

getStaticProps
- 빌드 시점에 api를 호출하고 데이터를 응답 받아서 HTML 을 완성하는 정적생성을 위한 메서드이다.
```
import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async context => {
	// 생략
}
```
getStaticPaths
- 동적라우트이면서 정적으로 페이지를 생성하고 싶을 때 사용하는 메서드이다.
- 데이터가 바뀌지 않는 상세페이지에서 사용할 수 있다.
- getStaticPaths를 사용하면 동적라우트로 생성될 모든 경로에 대해 getStaticProps와 마찬가지로 빌드 시점에 api를 호출하고 데이터를 응답받아 모든 페이지를 정적으로 생성한다.
- 리액트 프로젝트와 달리 Next.js로 만든 프로젝트를 빌드할 때는 인터넷이 연결되어있어야 api를 호출하고 데이터를 응답받아서 정상적인 정적페이지를 생성할 수 있다.
```
export const getStaticPaths: GetStaticPaths = async () => {
	return {
		paths: [{ params: { id: '1' } }, { params: { id: '2' } }]
	};
};

export const getStaticProps: GetStaticProps = async ({ params }) => {

	const response = await axios(`${API_URL}/restaurant?id=${params.id}`);

	return {
		props: {
			data: response.data.restaurant
		}
	};
};
```

getServerSideProps
- 사용자가 페이지에 접근하는 요청이 있을 때마다 getServerSideProps(서버측)에서 api를 호출하고 응답받은 데이터를 해당 컴포넌트의 props로 넘겨주어 HTML을 완성하여 클라이언트로 전달한다.
```
export const getServerSideProps: GetServerSideProps = async () => {
	const all = await axios(`${API_URL}/restaurants`);
	
	return {
		props: {
			data: all.data.restaurants
		}
	};
};
```
  - 페이지 요청이 있을 때마다 서버에서 데이터를 가져오기 위해 api를 호출하고 응답하는 시간 + 응답받은 데이터로 HTML을 완성하는 시간 이 있어 Time to first byte (TTFB)가 느리다.
- case 1) 데이터가 시간에 따라 계속 변경되어서 페이지를 접근할 때마다 새로운 api를 호출해야하는 상황
- case 2) 무조건 서버측 렌더링을 해야하는 경우에만 사용한다.
- 그렇지 않은 경우에는 getStaticProps나 클라이언트측 렌더링이 낫다.
getInitialProps
- Next.js 9.3버전 이전에 사용했던 데이터 호출 메서드로, 지금은 getServerSideProps가 비슷한 역할을 하면서도 더 좋기 때문에 사용하지 않는다.