한 입 크기로 잘라먹는 Next.js(15+)

# Section2

11~12. SSR 소개 및 실습

SSR을 적용할 페이지에서 실습을 진행한다

getServerSideProps 함수

getServerSideProps 함수는 Next에서 약속된 이름의 함수이다 (일종의 규칙!)

컴포넌트보다 먼저 실행되어
① 미리 불러와야 할 데이터를 불러오고
② 그 다음에 페이지 컴포넌트를 실행한다

SSR 적용하기

SSR을 적용하고 싶은 페이지에서
① getServerSideProps 함수를 만들고
② export 해주면

export const getServerSideProps = () => { };

⇒ 해당 페이지는 자동으로 SSR로 설정된다

이 함수는 오직 서버 환경에서만 실행되기 때문에
함수 안에서 console.log나 window.location 같은 코드를 작성해도 브라우저에서 실행되지 않는다

return 값

getServerSideProps 함수의 return 값은 반드시 props라는 객체여야 한다

export const getServerSideProps = () => {
	return {
  	  props: { },
  };
};

props

getServerSideProps 함수의 return 값인 props는
해당 페이지의 컴포넌트에서 props로 받아서 사용할 수 있다

export default function Home({
 props,	
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <div>Home</div>
  );
}

+) props 타입 ⇒ InferGetServerSidePropsType<typeof getServerSideProps>
getServerSideProps 함수의 반환값 타입을 자동으로 추론해준다

+) 페이지 컴포넌트

페이지의 컴포넌트는
①서버에서 먼저 실행되고 ②브라우저에서 실행된다

만약 브라우저에서만 실행되도록 하고 싶다면 useEffect를 사용하면 된다
(컴포넌트가 마운트 된 이후에 실행)

context

context는 현재 브라우저로 부터 받은 모든 정보를 포함하고 있다

getServerSideProps 함수에서 context 파라미터를 통해
query나 params를 가져올 수 있다

export const getServerSideProps = (
  context: GetServerSidePropsContext
) => {
  const q = context.query.q;
  const id = context.params!.id
  return {
    props: { },
  };
};

Promis.all()

인수로 전달한 배열 안에 들어있는 모든 비동기 함수들을 동시에 실행시켜주는 함수이다

export const getServerSideProps = async () => {
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);
 return { props: { allBooks, recoBooks } };
};