[NextJS]NextJS가 SSR을 수행하는 방식

NextJS에서 제공하는 기능 중에 SSR 기능이 매우 주요하다.

그 기능을 자세히 한번 들여다 보자.

1. SSR과 CSR은 무엇인가?

CSR : 첫 렌더시 그냥 페이지로드하고 다시 렌더링함으로써 데이터를 불러옴. 그래서 데이터가 검색엔진에 확인이 안된다. 그러나 한 번에 데이타를 불러오므로 페이지 이동이 빠르다.

SSR : 첫 렌더시 데이터도 서버측에서 함께 로드된다. 렌더 한번이라 초기 로딩은 빠르고 검색 엔진에 데이터들이 확인된다. 그러나 페이지를 불러올 때마다 중복 데이터를 불러와야해서 페이지 이동 시 느리다.

▶ 이와 같이 차이가 있다. NextJS는 SSR을 기반으로 하지만 페이지가 로드 된 뒤에는 React에서 하는 CSR 방식을 이용한다.

▶ getInitialProps, getStaticProps, getStaticpath,getServerSideProps 방식을 이용하여 SSR을 한다.

2.getServerSideProps 사용 방법

  export const getServerSideProps = async()=>{
  const res=await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()
  return{
    props:{
      posts
    }
  }
}

3. getStaticProps 사용 방법

export const getStaticProps = async()=>{
  const res=await fetch('http://localhost:8080/api/posts')
  const posts = await res.json()
  return{
    props:{
      posts
    }
  }
}  

※ getServerSideProps(2)와 getStaticProps(3)의 차이는?

(2)는 페이지 로딩 시 데이타를 패칭하여 데이타를 계속 변경한다.
(3)은 빌드 시 패칭한 데이타를 그대로 유지한다.

▶ 그러면 getStaticProps를 쓸때는 과거 정보가 들어있으니까 쓸모 없는거 아닌가? 라는 생각이 들수 있다.

▶ 그래서 아래와 같이 revalidate라는 값을 넣어서 정해진 주기만큼 지나면 데이타를 refresh한다.

export const getStaticProps = async()=>{
  const res=await fetch('http://localhost:8080/api/posts')
  const posts = await res.json()
  return{
    props:{
      posts
    },
    revalidate:20
  }
}

3. getStaticPaths 사용 방법

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      { params: { id: "1" }},
      { params: { id: "2" }}
    ]
  }
//2페이지까지만 동적 라우팅 하도록 한다.

▶ 동적 라우팅을 사용할 때 어떤 페이지를 미리 Static으로 빌드할지 결정