개발공부/Next.js
getServerSideProps()
soOoOnger
2022. 11. 9. 21:01
지정된 이름이며 NextJS가 찾는다.
getStaticProps 와 차이점이라면
이 함수는 빌드 프로세스 중에는 실행되지 않는다는 것이다.
하지만 배열 다음에 서버에서 실행된다.
export async function getServerSideProps(){
//fetch data from an API
return{
props:
}
}
왜냐하면 이 함수는 여전히 페이제 컴포넌트에 프랍을 받기 때문이다.
그리고 여전히 api에서 데이터를 패치한다.
여기에는 revalidate를 쓸 수 없다. 요청이 들어 올 때마다 실행되기 때문이다.
그래서 시간을 지정할 필요가 없다.
여기서 할일은 context 매개변수로 한다.
콘텍스트 변수에서 요청 객체에 접속할 수 있다.
그리고 응답 객체가 들어온다.
export async function getServerSideProps(context){
const req= context.req;
const res = context.res;
//fetch data from an API
return{
props:
}
}
getServerSideProps() 은 페이지가 요청이 들어올 때마다 프리 제너레이트 된다.
getServerSideProps() 와 getStaticProps()중에 getStaticProps 이 좀 더 좋다.
여기서는 html 파일을 프리 제너레이트 하기 때문이다.
그 파일은 CDN에 저장되고 서브 된다.
그리고 요청이 들어올 때마다 데이터를 다시 만들고 패치하는 것보다 빠르다.
따라서 getStaticProps 페이지일 때가 더 빠르다 캐시하고 사용하기 때문이다.
콘크리트 요청 객체에 접속해야 한다면 getServerSideProps를 사용해야한다.
getStaticProps에서는 요청과 응답에 접속하지 않기 때문이다.
매초 여러번 바뀌는 데이터를 가지고 있다면 revalidate는 도움이 안된다.
그때 getServerSideProps 선택하는게 좋다.