https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
를 보고 공부했다.
Data Fetching: getServerSideProps | Next.js
Fetch data on each request with `getServerSideProps`.
nextjs.org
1. getServerSideProps
getServerSideProps 함수를 페이지로부터 export한다면
Next.js는 매 요청할때마다 getServerSideProps로 부터 리턴된 데이터들을
이용해서 pre-render될것이다.
export async function getServerSideProps(context) {
return {
props: {}, // props로 페이지 컴포넌트에 전달해줄것이다.
}
}2. getServerSideProps 가 실행될때
getServerSideProps는 오직 server-side에서 만 실행이 되고,
절대 브라우저에서 실행되지 않습니다.
만약에 getServerSideProps 를 실행 한다면?
- page를 요청할때 getServerSideProps는 요청때마다 실행되고 리턴된 props로, 페이지는 pre-render될것이다.
- next/link 또는 next/router를 통해서 clinet에서 페이지 전환을 요청할때 Next.js는 getServerSideProps를 실행하는 server에 API요청을 보낸다.
- getServerSideProps는 JSON을 리턴합니다.
- getServerSideProps는 오직 페이지로부터만 export되어 페이지가 아닌 파일에서는 Export할 수 없습니당
- getServerSideProps는 독립된 함수라서 페이지 컴포넌트의 프로퍼티로서 추가한다면 작동하지 않는다
'Frontend > Next.js' 카테고리의 다른 글
| 3. Static Generation with data | 번역 (0) | 2023.02.16 |
|---|---|
| 2. Next.js pages 정리 | 공식문서 번역하면서 읽기 (0) | 2023.02.15 |
| 1. Next.js 시작하기 (0) | 2023.02.15 |
| Next.js에서 페이지이동이 필요할때 | (0) | 2023.02.04 |
| _app.tsx , _document.tsx 차이를 알아보자 (0) | 2023.01.27 |