Next.js SSR getServerSideProps

SSR

• 가장 기본적인 사전 렌더링 방식
• 브라우저 접속 요청이 들어올 때 마다 사전렌더링을 진행
• 페이지 내부의 데이터를 항상 최신버전으로 유지할 수 있음
• 데이터 응답속도가 느려지면, 사용자는 로딩을 기다려야 함

루트 페이지 컴포넌트를 서버사이드 랜더링방식으로 동작하도록 만들어 보자

[ index.tsx ]

export const getServerSideProps = () => {

  //서버에서만 실행됨
  console.log('서버사이드프롭스에요') // 출력되지 않음
  window.location // 브라우저에서만 동작하는 객체 당연히 사용불가

  const data = '서버로부터 불러온 데이터'
  
  return **{
    props: {
      data,
    },
  } // 정해진 객체 형태로 리턴해야 한다.**
} //SSR로 동작

문법

컴포넌트 바깥에 getServerSideProps를 만들고 export키워드를 붙여 파일에서 내보내기를 해준다.

정해진 객체 형태로 데이터를 리턴한다.

• getServerSideProps : 요 함수가 있는 페이지는 자동으로 SSR로 동작하도록 한다.

  • 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터를 불러오는 함수이다.
  • 브라우저에서 (/ )경로의 페이지 요청 → 서버에서 getServerSiderProps함수 동작 → 해당 컴포넌트페이지에 필요한 백엔드 데이터를 먼저 불러옴 → 페이지 컴포넌트가 실행됨
  • 사전렌더링을 하는 과정에서 딱 한번, 서버측에서만 실행되는 함수이다.
    • 브라우저 console에 출력되지 않는다.
    • 브라우저 환경에서만 이용할 수 있는 객체는 사용할 수 없다. ( ex: window 객체 ) ⇒ undefined

• 서버로부터 어떤 데이터를 불러오면(data) 이를 props 객체에 담아 리턴해준다.

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

  useEffect(() => {
    console.log('브라우저에서만.')
  }, [])
  
  return ( ... )

• 서버로 부터 받아온 데이터는 props 형태로 페이지 컴포넌트에게 전달할 수 있다.

• 타입형태 InferGetServerSidePropsType<typeof getServerSideProps>

  • 반환값 타입을 자동으로 추론

• Home 컴포넌트는 2번 실행됨.

  1. 브라우저에서 접속요청 받았을 때 사전렌더링될 때 서버측에서 실행
  2. hydration과정에서 브라우저에서 실행

• 때문에 컴포넌트 내부에서 window.~ 와 같은 브라우저측 코드가 있다면 server에서 실행될 때 에러 발생

• 브라우저에서만 실행되는 코드를 작성하고 싶다면 useEffect()를 사용하는 방법이 있다.

  • useEffect가 실행되는 조건이 컴포넌트가 마운트 된 이후 이기 때문.

    페이지에 SSR 적용

    페이지에 SSR을 적용해서 서버에서 직접 데이터를 불러오도록 하자

  실습에서 작성할 페이지는 아래와 같다

• index페이지 (/)

• search 페이지(/search?q=’’)

• book페이지 (/book/id)

기본적인 작성 방법은 아래와 같다.

1. src/lib/~.ts 파일에 데이터 패칭하는 함수 만들기
2. 페이지 별 getServerSideProps 함수 내부에서 데이터패칭함수 호출하기
3. 컴포넌트에 프롭으로 넘겨서 적용하기