학습 Next.js - Day 07 / 서버 사이드 렌더링 SSR

이유승·2024년 10월 8일

Next.js 학습

목록 보기

8/27

브라우저에서 접속 요청이 들어올 때마다, 사전 렌더링을 수행하는 방식. SSR 방식을 적용하는 방법은 다음과 같다.

export const getServerSideProps = () => {};

페이지 컴포넌트 내부에 getServerSideProps라는 이름의 함수를 구현하고, export로 내보내기를 적용해주면 Next.js는 해당 페이지를 SSR 방식으로 동작하도록 자동설정해준다.
해당 페이지로의 URL 요청이 들어오면, 가장 먼저 getServerSideProps 함수가 동작해서 내부 코드를 실행한다.
그 다음에 페이지 컴포넌트의 코드를 실행시킨다.

export const getServerSideProps = () => {

  const data = "hello";

  return {
    props: {
      data,
    },
  };
};

가령 요런 getServerSideProps 함수가 있다고 하면, 페이지가 호출될 때 가정 먼저 getServerSideProps 함수가 호출되어 동작한다.
getServerSideProps 함수에서는 return 키워드를 통해 페이지 컴포넌트로 넘겨줄 데이터를 설정할 수 있는데, 이는 반드시 props라는 이름의 객체로 넘겨주어야 한다.
getServerSideProps 함수는 사전 렌더링을 수행하는 과정에서 단 1번만 실행되며, 오직 Next 서버에서만 실행되는 함수이다.

따라서 브라우저에서만 실행이 가능한 window 등을 호출하려고하면 당연히 에러가 발생한다. Next 서버에는 window가 존재하지 않기 때문.

export default function Home({ data }: any) { 
	window.location;
}

Next.js에서 페이지 컴포넌트의 코드는 총 2번 실행된다.
-> 사전 렌더링을 위해 Next 서버에서 1번.
-> 수화 과정에서 브라우저에서 1번.
그래서 페이지 컴포넌트에서 window 객체를 호출하거나 하면 에러가 발생한다! 1번은 Next 서버에서 실행이 되기 때문.

export default function Home({ data }: any) { 	 

  useEffect(() => {
    console.log(window);
  }, []);

}

이를 방지하기 위해서, 브라우저에서만 작동하게 하는 코드 작성 방법이 존재한다.
-> useEffect 사용, useEffect는 컴포넌트 마운트 이후에 실행되는 Hook이기 때문에 Next 서버에서 실행되지 않는다.

export default function Home(data) { ... }

getServerSideProps에서 props로 data를 넘겨주었으니, 페이지 컴포넌트에서는 마찬가지로 data라는 이름으로 데이터를 받아와야 한다.

export default function Home({
  data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) { ... }

그런데 TypeScript를 사용한다고 하면, 이 data의 타입을 당연히 지정해주어야 한다. Next.js에서는 이를 위해 InferGetServerSidePropsType을 제공해주고 있다.
InferGetServerSidePropsType, getServerSideProps 함수에서의 반환값 타입을 자동으로 추론해준다.

string 타입의 데이터를 InferGetServerSidePropsType이 자동으로 추론해서 data의 타입 형식을 자동으로 파악해주고 있는 모습.

프론트엔드 개발자를 준비하고 있습니다.