getServerSideProps()
Next.JS에서 사용되는 서버 측 데이터 로딩 메서드임.
getServerSideProps 는 서버에서만 실행 되서, 서버에서만 필요한 데이터를 로딩할 때 사용됨.
API_KEY 를 사용하게 되면 클라이언트 측에서 확인이 가능한데, getServerSideProps 메서드로 서버 단에서 실행하게하면 숨길 수 있음.
!! 반환되는 데이터는 JSON 직렬화가 가능한 데이터여야 한다.
export default function MyPage({data}) {
return <div>{data}</div>
}
export function getServerSideProps() {
const data = ...
...
return {
props: {
data: "Page Props",
},
};
}위의 예시 코드처럼 서버 측에서 실행할 코드를 입력하고 객체로 리턴을 해주어야 하는데, props 라는 키를 가진 객체 형태 안에 리턴할 정보를 객체 형태로 입력한다.
반환된 키는 해당 페이지에서 prop 로 사용할 수 있다.
async / await
getServerSideProps 에서 실행되는 코드는 데이터를 가져오는 데 시간이 걸릴 수 있으므로 비동기 함수로 작성할 수 있다.
!! 반환되는 데이터는 JSON 직렬화가 가능한 데이터여야 한다.
export async function getServerSideProps() {
const data = await (await fetch(`....`)).json();
...
return {
props: { data },
};
}context
getServerSideProps 함수의 매개변수 context는 Next.js의 서버 측 라우팅 컨텍스트를 나타내는 객체이다. 이 컨텍스트 객체는 다양한 정보를 포함하고 있어 서버 측 데이터 가져오기(logic)에 사용된다.
context 객체는 getServerSideProps 함수가 호출될 때마다 제공되며, 해당 함수 내에서 이 컨텍스트를 사용하여 서버 측 데이터 로직을 구현할 수 있다.
context 객체에 들어있는 정보들을 몇 가지 살펴보자.
context.req
Node.js의 http.IncomingMessage 객체임. 서버 측 요청에 대한 정보와 헤더, 쿠키 등의 데이터를 포함한다.
context.res
Node.js의 http.ServerResponse 객체임. 서버 측 응답을 조작할 수 있는 메서드와 속성을 포함한다.
context.query
라우트의 쿼리 매개변수를 나타내는 객체임. 예를 들어, /books?id=123와 같은 URL에서 id 매개변수에 접근할 수 있다.
context.params
동적 라우팅 경로에서 추출된 매개변수를 나타내는 객체임. 예를 들어, /books/[id]와 같은 동적 경로에서 id 매개변수에 접근할 수 있다.
context.resolvedUrl
요청이 해결된 URL을 나타내는 문자열.
