getServerSideProps()
2022. 11. 9. 21:01ㆍ개발공부/Next.js
지정된 이름이며 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 선택하는게 좋다.
'개발공부 > Next.js' 카테고리의 다른 글
getStaticPaths,getStaticProps (0) | 2022.11.12 |
---|---|
정적 사이트 생성에 대한 추가정보 (1) | 2022.11.09 |
정적 페이지에 대한 데이터 가져오기 (0) | 2022.11.09 |
NextJS Link (1) | 2022.11.07 |
NextJS html 파일이 있을까? (1) | 2022.11.07 |