getServerSideProps와 getStaticProps
렌더링 방식을 결정하는 데이터 호출 메서드
데이터가 필요한 페이지에서 빌드시점에 HTML을 정적으로 생성하고 싶으면 getStaticProps, getStaticPaths를, 서버요청(페이지 접근) 때마다 서버측에서 HTML을 매번 동적으로 생성하고 싶으면 getServerSideProps 메서드를 사용하면 된다.
정적 생성
- 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML파일을 모두 갖고 있는 상태이다.
- 페이지를 요청할 때 서버에서 갖고 있던 해당 페이지의 HTML을 응답한다.
- Next.js에서 권장하는 렌더링 방식이며, 한 번 응답한 후에는 CDN(content delivery network)이 파일을 기억(캐쉬, cache)하여 응답하기 때문에 화면을 그리는 속도가 굉장히 빨라지고 불필요한 서버 요청이 줄어든다.
getStaticProps
getStaticProps는 빌드 시점에 api를 호출하고 데이터를 응답 받아서 HTML 을 완성하는 정적생성을 위한 메서드이다.
export const getStaticProps = async () => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
);
const posts = await res.json();
return {
props: {
posts,
},
revalidate: 20,
};
};
export const getStaticProps = async (context) => {
const { id } = context.params;
const res = await fetch(`https://jsonplaceholder.typicode.com/photos/${id}`);
const photo = await res.json();
return {
props: {
photo,
},
};
};
위는 fake api를 이용하여 getStaticProps를 사용한 것이다. 이미 build 시점에 HTML을 만들어뒀기 때문에 서버의 데이터가 변하더라도 바뀐 내용이 적용되지 않는다. 하지만 revalidate 를 이용하여 일정 시간마다 새롭게 데이터를 받아 올 수 있다.
next에서 권장하는 메서드이다.
next는 페이지 폴더안 폴더명으로 라우팅을 자동으로 하는 장점이 있는데 이런 점을 이용해 id값을 이용해 상세 주소를 만드는 등의 행위를 할 때는 getStaticPaths가 필요하다.
getStaticPaths
export const getStaticPaths = async () => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/photos?_start=0&_end=10`
);
const photos = await res.json();
const ids = photos.map((photo) => photo.id);
const paths = ids.map((id) => {
return {
params: { id: id.toString() },
};
});
return {
paths: paths,
fallback: false,
};
};
위와 같이 사용하여 params에 path값을 넣어주면 된다.
동적 생성
- 페이지 요청이 있으면 server side에서 api를 호출하고 데이터를 응답받아서 서버측에서 HTML을 완성시키고 클라이언트에 전달한다.
- 요청을 할 때마다 서버측에서 HTML을 만들 시간이 필요하기 때문에 HTML을 응답하는 시간이 오래걸릴 수 있다는 단점이 있다.
- 서버에 데이터를 요청 할 때마다 서버에 바뀐 점들이 바로 적용된다.
getServerSideProps
export const getServerSideProps = async () => {
const res = await fetch( `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`);
const posts = await res.json();
return {
props: {
posts,
},
};
};
위는 fake api를 이용하여 getServerSideProps를 사용한 것이다. 서버 데이터가 변할 경우 데이터를 요청 할 때 마다 바뀐 데이터가 바인딩 된다. 하지만 매번 새롭게 HTML을 만들기에 시간이 오래 걸리 수 있다.
Author And Source
이 문제에 관하여(getServerSideProps와 getStaticProps), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pomeranian91/getServerSideProps와-getStaticProps저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)