SSR/SSG/CSR 알아보기

넥스트는 Page 를 첫 렌더링시 모두 SSR 방식을 이용하고 이후에는 CSR 방식으로 동작하는 과정을 자동화한 프레임워크입니다. 아래는 Next 공식문서를 읽어보며 개념 정리를 해봅시다.

 

SSR 과 CSR

SSR 이란 서버에게 요청할 때마다 서버에서 페이지를 동적으로 제작하여 클라이언트에게 전달하는 방식입니다. 

CSR 이란 페이지 제작을 브라우저에 설치된 앱에서 제작해서 렌더링하는 방식을 말합니다. SSR 을 사용하면 처음 사이트를 들어갈 때 로딩속도가 빠르고 CSR 을 사용하면 앱이 설치된 이후 페이지 이동속도, 반응속도가 빨라집니다. 넥스트는 두 방식의 장점을 모두 활용할 수 있는 프레임워크입니다. 

 

넥스트의 SSR 사용법 

넥스트는 기본적으로 모든 페이지는 SSR 방식으로 동작합니다. 페이지를 만드는 방법으로 App Router, Pages Router 방식이 있습니다. 이 글은 Pages Router(next 13) 를 기준으로 작성합니다. Pages Router 는  src/pages 디렉토리에서 디렉토리를 만들고 그 아래에 index.tsx (ts, js, jsx) 를 사용하면 가능합니다. 아래는 index.tsx 의 생김새입니다. 

// src/pages/dashboard/index.tsx

export default function Dashboard({ 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 } }
}

 

 

SSR 추가기능 getServerSideProps 과 getStaticProps 

서버사이드 렌더링방식을 좀 더 활용할 수 있도록 넥스트에서 제공하는 기능입니다. 여러가지 방법이 있으나 먼저 2가지 기능부터 알아보고자 합니다.

 

getServerSideProps

데이터가 필요한 페이지를 SSR 방식으로 제공하고 싶을 때 사용합니다. 기존의 리액트는 데이터를 활용하는 페이지를 렌더링 하려면 useEffect 를 통해 데이터를 페칭한 후 state 처리하여 렌더링 하는 방식입니다. 이 함수를 index.tsx 에서 활용하면 서버측에서 data 를 렌더링 한 페이지를 전달합니다. 넥스트는 사용자별로 데이터가 다른 페이지를 제공할 때 활용하는 것을 추천합니다. 이는 cdn 과 관련이 있는데 아래의 SSG 와 관련됩니다.아래는 getServerSideProps 의 활용방법입니다.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
// 먼저, 서버측에서 데이터를 페칭합니다. 이후 Props 로 데이터를 return 합니다.
export const getServerSideProps = (async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()

  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
 
 
// Page 는 prop 을 전달받고 데이터를 이용해 페이지를 렌더링합니다.
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

// 이후, 클라이언트에게 렌더링된 페이지를 전송합니다.

 

 

getStaticProps

똑같은 데이터가 필요한 페이지를 정적으로 제공하고 싶을 때 사용합니다. SSG 방식으로 페이지를 제공하고 싶을 때 사용합니다. SSG 방식이란 빌드타임에 정적인 파일을 미리 CDN 에 등록해두는 방식을 말합니다. 데이터로 표현하는 파일을 전송하면서 데이터가 달라지지 않을 때 사용하면 적절합니다. 넥스트는 여러사람에게 똑같이 보여지는 페이지를 구성할 때 활용할 것을 추천합니다.

 

import type { InferGetStaticPropsType, GetStaticProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

 

 

 

Client Side Rendering (CSR)

서버에게 빈 html 을 갖고온 후 javascript 를 설치 후 페이지를 보여주는 방식입니다. 초기 렌더링시 slight delay 가 존재하는데 이는 자바스크립트가 설치되고 실행되기까지의 시간 때문입니다. csr 의 장점은 자바스크립트가 로드되면 이후에 애플리케이션이 화면을 제작하기 때문에 routing 속도가 빨라집니다

 

 

 

https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering