getServerSideProps vs getStaticProps 알고가기
getServerSideProps vs getStaticProps
getStaticProps => SSG
getServerSideProps => SSR
SSG는 빌드된 시점에 fetch를 하고, SSR은 매 요청시마다 refetch를 한다는 차이점이 있다. SSR은 SSG보다는 효율이 떨어지지만 언제든지 내용을 수정가능하다.
url 내 쿼리를 활용하여 api 요청 후 해당 데이터를 props로 넘겨줄 경우 getServerSideProps를 사용한다.
getServerSideProps를 사용하면 Context Object가 파라미터로 해당 함수에 들어오는데, key로는 아래와 같은게 있다. (함수는 클라이언트가 아닌 서버에서 돌아간다.)
params: If this page uses a dynamic route, params contains the route parameters. If the page name is [id].js , then - params will look like { id: ... }.
req: The HTTP IncomingMessage object.
res: The HTTP response object.
query: An object representing the query string.
preview: preview is true if the page is in the Preview Mode and false otherwise.
previewData: The preview data set by setPreviewData.
resolvedUrl: A normalized version of the request URL that strips the _next/data prefix for client transitions and - includes original query values.
예제 코드
export const getServerSideProps: GetServerSideProps = async (context) => {
try {
const { menuId } = context.query;
const response = await axios.get<CategoryType[]>(
"http://localhost:8080/category/get/menu",
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
params: {
menuId: menuId,
},
}
);
const data = response.data;
console.log(data);
return {
props: {
CategoryData: data,
},
};
} catch (err) {
console.log(err);
return {
props: {},
};
}
};