01 - WHAT
getServerSideProps.
도대체 무엇인가.
공식문서를 참고해보자.
getServerSidePropsis a Next.js function that can be used to fetch data and render the contents of a page at request time.
그렇다.
getServerSideProps는 넥스트 함수로, 데이터 패칭 시 사용되며 요청된 시간에 페이지의 컨텐츠를 렌더링한다.
- page가 요청받을 때마다 호출되어 pre-rendering을 진행
- 서버 측에서 데이터 패칭
- SSR
- 빌드 이후 자주 변경될 수 있는 dynamic data가 들어갈 때 유용
- pre-render가 꼭 필요한 dynamic data가 있는 페이지에 사용하면 됨
- 매 요청마다 호출되기 때문에 성능은 getStaticProps에 미치진 못하지만, 내용은 언제든지 동적으로 수정 가능
기본 형태는 아래와 같다.
export async function getServerSideProps(context) {
return {
props: {
data: "abc"
}, // will be passed to the page component as props
}
}예제
우선 getServerSideProps는 페이지 컴포넌트에서 export함으로써 사용 가능하다.
export { default as getServerSideProps } from 'lib/getServerSideProps';아래 예제는 getServerSideProps에 있는 서드 파티 API로부터 데이터를 어떻게 패칭할 수 있는지 보여주고 있다. props를 통해 데이터를 페이지로 넘겨주고 있는 모습이다.
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
type Repo = {
name: string
stargazers_count: number
}
export const getServerSideProps = (async () => {
// Fetch data from external API
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo: Repo = await res.json()
// Pass data to the page via props
return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
export default function Page({
repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return (
<main>
<p>{repo.stargazers_count}</p>
</main>
)
}❓우리는 언제 getServerSideProps를 써야할까?
getServerSideProps는 개인화된 사용자 데이터나 요청 시에만 알 수 있는 정보에 의존하는 페이지를 렌더링해야 하는 경우 사용할 수 있다. 예를 들어 authorization header나 geolocation(위치기반)이 필요할 때!
만약 요청 할 때 데이터를 fetching할 필요가 없거나 데이터와 pre-rendering된 HTML을 캐시하려는 경우에는 getStaticProps를 사용하는 것이 좋다.
❓우리는 왜 getServerSideProps를 써야할까?
- 개인화된 데이터
- 사용자마다 다른 데이터를 보여주어야 할 때 getServerSideProps를 사용할 수 있다.
- 예를 들어, 특정 유저의 프로필 페이지와 같이 사용자마다 다른 데이터를 렌더링해야 할 경우에 사용될 수 있다.
- 실시간 업데이트
- 페이지를 요청할 때마다 항상 최신 데이터를 보여주어야 하는 경우에 유용하다.
- 예를 들어, 온라인 채팅 애플리케이션에서는 실시간으로 새로운 메시지를 받아와야 하므로 이러한 경우에도 이 기능을 사용할 수 있다.
- 인증 및 권한
- 특정 페이지에 접근하기 위해서는 유저의 인증 정보나 권한이 필요한 경우가 있다. 이런 경우에 getServerSideProps를 활용해 서버 측에서 유저의 인증 상태를 체크하고, 그에 따라 적절한 데이터를 가져와 렌더링할 수 있다.
- SEO
- 동적으로 변경되는 데이터를 가진 페이지의 경우, 검색 엔진 최적화를 고려해야 한다.
- getServerSideProps를 사용하면 매 요청마다 페이지의 HTML이 서버 측에서 생성되므로, 검색 엔진이 페이지를 크롤링할 때 항상 최신 데이터를 확인할 수 있다.
- 최신 정보
- 페이지의 요청마다 서버 측에서 데이터를 가져와 렌더링하기 때문에 최신 정보를 항상 보여줄 수 있다.
- 정적으로 빌드된 페이지의 경우엔 재배포를 해야지만 새로운 데이터가 반영되기 때문에, 이것과 비교하면 getServerSideProps는 엄청난 장점인 것 같다.
사용법
export const getServerSideProps = async () => {
try {
// 유저 정보 데이터를 패칭해오는 api
const res = await fetch('https://....');
if (res.status === 200) {
const user = await res.json();
return { props: { user }}
}
return { props: {} };
} catch (error) {
console.log(error);
return { props: {} }
}❓getServerSideProps는 언제 실행될까?
이 친구는 오직 서버사이드에서만 실행되고 브라우저에서는 실행되지 않는다고 한다.
- 페이지 request → getServerSideProps는 request time에 실행되고 반환된 값으로 pre-rendering
- 페이지를
next/link나next/router와 같은 클라이언트 사이드 페이지 이동을 통해 요청했을 경우
‼️여기서 잠깐!
함께 자주 언급되는 getStaticProps는 무엇일까?
getStaticProps
- 빌드 시에 딱 한 번만 호출됨 ⇒ static file로 빌드
- SSG (Static Site Generation)
- 빌드 후 고정된 내용이 있는 페이지를 로드할 경우 유용
- 호출 시마다 매번 데이터 패칭을 하지 않기 때문에 성능 측면에서 getServerSideProps보다 좋음
그렇다고 한다.
흠..
결론적으로 getServerSideProps는 pre-fetch를 원할 때 사용하면 된다.
예시로, getServerSideProps를 통해 사용자의 데이터(로그인 관련(에 해당하는 session같은 것들을 pre-fetch로 전달할 수 있다.
02 - HOW
- 문제 상황 : 로그인 기능을 가진 컴포넌트에서 getServerSideProps 없이 페이지를 요청하니 에러가 생기며 재로그인하도록 유도하는 로직이 있었다. (로그인을 한 상황에서)
- 개선 방법 : 아래 코드인 getServerSideProps를 export하니 해결할 수 있었다.
export { default as getServerSideProps } from 'lib/getServerSideProps';03 - RETROSPECT
Next.js는 배워도 배워도 어려운 것 같다. 흑흑
넥스트를 접한 지 이제 4개월이 되어가는데, getInitialProps와 getServerSideProps에 대해서 거의 몰랐던 상태라 또한번 공식문서의 중요성을 깨달았다.. 👿
아래는 참고하면 좋을 링크!
getInitialProps vs getServerProps · vercel next.js · Discussion #11211
04 - 오늘의 한마디
배가 너무 고프다..
