22.05.23 SSR CSR

Next.js 와 Apollo Client 를 기술 스택으로 사용하는 프로젝트를 분석하기 위해서

SSR 과 CSR 의 차이점을 파악해야 한다. 

 

데이터를 가져와서 렌더링하는 3가지 방법: static, server, client 

 

Static Rendering => 빌드 타임에 HTML 정적 파일로 페이지가 생성된다. 

Server-Side Rendering => 각 요청에 대해 페이지가 동적으로 생성된다. 모든 요청에 대해 서버 요청을 하게 된다. 

 

Client-Side Rendering => 브라우저에서 앱 요청하면 페이지를 불러오고 그 다음에 데이터를 요청한다. 

업데이트 되는 부분이 적다면 DOM 이 변한 부분만 다시 렌더링한다. 

 

초기 렌더링으로 따지면 SSR 이 빠른 것이 맞지만

처음부터 렌더링하기 때문에 페이지네이션에는 CSR 이 더 빠름! 

 

getStaticProps 

API 에서 데이터를 가져오기 전에 빌드할 때 페이지 생성한다. 

 

getServerSideProps 

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

 

 

 

 

참고문서링크 

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js