Page Router (7) - SSR (Server Side Rendering)

2026.09.14 · 3분 읽기 · 조회 0

서버 사이드 렌더링(SSR)

• 가장 기본적인 사전 렌더링 방식
• 요청이 들어올 때 마다 사전 렌더링을 진행 함

방법은 간단하다.

// index.tsx
export default function Home(){
  return <div>...</div>
}

해당 페이지를 SSR 해주고 싶다면 컴포넌트 정의 위에

// index.tsx
export const getServerSideProps = () => {};
 
export default function Home(){
  return <div>...</div>
}

다음과 같은 함수를 정의한다. 이제부터 해당 페이지는 SSR이 된다(?)
해당 함수는 브라우저 진입 시 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터를 불러오는 함수이다. 라고 생각하면 된다.

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

만약 서버가 hello라는 값을 내려준다고 가정하자. 해당 함수의 리턴값은 무조건 { props : {데이터} } 의 형태여야 한다. 해당 값을 페이지 컴포넌트에 프롭스로 넣어주면 된다.

// index.tsx
export default function Home({data} : any){
  console.log(data)
  return <div>...</div>
}

이렇게 프롭스로 받아오면 페이지에서 사용할 수 있다. 타입은 일단 any라고 한다.

해당 함수는 사전 렌더링 과정에서 딱 1번만 실행이 되기 때문에 오직 서버측에서만 실행되는 함수이다.

export const getServerSideProps = () => {
  console.log("서버사이드프롭스임")
}

때문에 함수 내에서 이렇게 콘솔을 찍어줘도, 브라우저에는 뜨지 않고,
dev 모드를 실행한 터미널에만 찍힌다.

때문에 윈도우에서만 사용 가능한 window등의 객체는 해당 함수 내에서 사용할 수 없다.

페이지 컴포넌트의 렌더링

그리고 페이지 컴포넌트인 Home 컴포넌트도 주의할 점이 있다.
페이지 역할을 하는 해당 컴포넌트는

1. 브라우저로부터 접속 요청이 들어올 때 사전렌더링을 위해 서버 측에서 실행
2. 브라우저 측에서 Hydration 이 일어날 때 브라우저에서 한 번 실행

총 두 번이 실행된다.
해당 컴포넌트 내에서 찍은 콘솔은 역시 터미널에도 한 번 찍히고, 브라우저 콘솔에서도 한 번 찍힌다.

이런 페이지 컴포넌트도 서버에서 한 번은 실행될테니 당연히 window 같은 객체를 사용하면 "오류가 발생한다."

// index.tsx
export default function Home({data} : any){
  window.location
  return <div>...</div>
}

이런 식으로 작성하면,
에러가 발생한다.

만약 브라우저 측에서만 실행되는 코드를 작성하고 싶다면 useEffect 를 사용하면 된다.

export default function Home({ data }: any) {
 
  useEffect(() => {
    console.log(window.location);
  }, []);
}

이렇게 작성하게 되면 컴포넌트 마운트 시에만 작동하기 때문에 브라우저에서만 잘 작동하는걸 확인할 수 있다.

프롭스 타입 정의

// index.tsx
export default function Home({data} : any){
  console.log(data)
  return <div>...</div>
}

위에서는 프롭스로 받아오는 데이터의 타입을 any로 줬었는데 실제로는 다른 타입을 사용한다.

InferGetServerSidePropsType<typeof getServerSideProps>

복잡해 보이는 해당 타입을 사용하면 된다. 제네릭에 getServerSideProps의 타입을 넣게 되면 알아서 서버측에서 받아오는 프롭스의 타입을 추론한다.

context 가져오기

해당 함수의 첫 번째 인자로 context를 받아올 수 있다. 해당 인자에는 현재 페이지에 대한 메타데이터들이 들어있으므로 유용하게 써먹을 수 있다.
타입은 GetServerSidePropsContext이다.

export const getServerSideProps = (
  context : GetServerSidePropsContext) => {
  
  console.log(context)
 
  return {
    props: {
    },
  };
};

콘솔에 찍어보면 굉장히 많은 정보들을 볼 수 있다.
/search/?q=next 링크의 context 객체를 보면

이렇게 query 정보도 들어있으니 잘 활용하면 된다.

동적 경로일 때는 context.params를 이용해서 동적인 값을 가져와 사용하면 된다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글