Next.js : SSR. getServerSideProps / 클라이언트 사이드 페칭 필요한 경우(2)

Next.js의 핵심 기능을 위한 두가지 함수.

 

첫번째가 getStaticProps() 사전 정적 생성을 위한 함수이고,

두번째가 getServerSideProps() 이다.

 

gerServerSideProps와 getStaticProps의 가장 큰 차이점은,

 

- 함수가 실행되는 시점

- 클라이언트 요청에 대한 접근성

두가지라고 할 수 있다.

 

getStaticProps의 경우 말 그대로 사전 생성이다. 

사전 빌드될 때 실행되며, 그렇기 때문에 실제 클라이언트의 요청과는 별개의 것이라고 할 수 있다.  

 

반면에

1) getServerSideProps 함수의 경우 사용자의 요청이 일어날 때 실행되는 함수이다.

 

페이지 컴포넌트에 이 함수가 있다면 해당 페이지에 대한 요청이 들어 올 때마다 이 함수가 실행되게 된다. 

여기서 중요한 것은 getServerSideProps 함수는, 배포된 서버 / 개발 서버에서만 실행된다는 것.

 

getStaticProps와 충동을 일으킬 수 있기 때문에 하나의 컴포넌트에서는 두 함수 중 하나만 사용한다.

 

 

2) 그리고 기본 props로 받는 context 객체의 구성 중 요청(req)값을 통해 사용자 요청에 대한 정보를 알 수 있다. 

 

그러므로 getServerSideProps는 사용자 페이지에 적합하다.

사용자 페이지는 고유의 페이지이므로 SEO는 관련이 없고 페이지를 미리 렌더링할 필요도 없다.

 

다만 Next.js는 getServerSideProps를 정말 필요할 때만 사용하라고 권고한다. CDN에 캐싱되지 않기 때문에 느리기 때문이다.

데이터를 미리 가져올 필요가 없다면 클라이언트 측에서 데이터를 가져오는 것도 고려해봐야 한다.

 

 

CSR vs SSR

일반적으로 CSR의 경우, 초기에 페이지가 일단 렌더가 된 후, 클라이언트에서 데이터를 불러오며 다시 한 번 렌더링이 된다.

한편, SSR을 수행하는 경우, 처음 렌더가 될 때 서버 측에서 데이터도 함께 가져와서 그려준다.

 

그렇기 때문에 SSR의 경우, 한 번에 렌더링이 되기 때문에 초기 로딩속도가 빠르지만

페이지를 넘길 때마다 중복되는 데이터일지라도 서버측에서 다시 불러와줘야하기 때문에 페이지 과부하가 걸릴 위험성이 CSR에 비해 크다.

 

그럼에도 SSR을 사용하는 이유는 페이지가 로딩될 때 데이터도 동시에 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문.

따라서 첫 로드시 빈 상태인 CSR과 달리 검색엔진 최적화에 효과적이다.

 

 

예시코드.

import { GetServerSideProps } from 'next' // 타입을 위한 import

function Page({ data }) {
  console.log(this.props.data)
 //res.json()이 찍힙니다
}


export const getServerSideProps: GetServerSideProps = async (context) => {
 
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // data 없을 땐 리턴값을 달리함
   if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
  
  //pageProps로 넘길 데이터 
  return { props: { data: data } }
}

export default Page

 

요청이 왔을 때 실행하는 함수이기 때문에, reValidate속성은 사용할 수 없다.

프로젝트를 생성하기 전에 보내주는 것이 아니라, 요청이 왔을 때. 그때 ! 실행 - 생성해서 보내주는 것이다 ! 

 

 

 

동적페이지

getServerSideProps의 context는 요청 객체 (req) 전체에 접근할 수 있다. 

동적 페이지라면 여전히 params에 접근해서 생성 가능 하다.

const { params, req, res } = context;

 

getServerSideProps의 페이지 동적생성은 굳이 getStaticPaths함수가 필요하지 않다. getStaticPaths함수는 어떤 페이지를 사전생성할 것인지 알려주는 함수인데 getServerSideProps는 사전생성 하지 않기 때문.

 

getServerSideProps는 결국 '이 페이지에 요청이 오면 서버사이드에서 이 함수 먼저 실행해서 값 보내줄거야~' 라는 의미를 내포.

 

 

 

클라이언트사이드 페칭이 필요한 경우

 

정적생성과 서버사이드렌더링.

두가지 방법이 아닌 클라이언트 사이드 페칭이 필요한 경우가 있다. 

 

Fetching data on the client side If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the client side. An example of this is user-specific data.  First, immediately show the page without data. Parts of the page can be pre-rendered using Static Generation. You can show loading states for missing data. Then, fetch the data on the client side and display it when ready. (공식문서)

 

데이터가 자주 업데이트 되거나(ex) 주식데이터), 굳이 사전 렌더된 데이터가 필요 없는 경우. 

공식문서에는 데이터가 필요없는 부분을 사전 생성해서 보여주고, 나머지 부분을 클라이언트 사이드에서 페칭하는 방법이 나와있다. 

 

 

 

 

 

 

 

참고사이트 :

https://nextjs.org/docs/getting-started

https://velog.io/@devstone/Next.js-100-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-initialProps-webpack-storybook#-getstaticprops