들어가며..

렌더링 전략이란 웹 페이지 or 웹 애플리케이션을 웹 브라우저에서 사용자에게 제공하는 방식을 말한다. 오늘 알아볼 Next.js의 렌더링 전략은 기존의 프레임워크와는 완전히 새로운 수준을 제공한다. 이번에는 Next.js의 렌더링 전략에 대해 알아보자.

SSR(Server Side Rendering)

서버 사이드 렌더링은 웹 페이지를 제공하는 가장 흔한 방법이다. Next.js에서는 서버에 HTML 페이지를 동적으로 렌더링하고 웹 브라우저로 전송할 수 있다. 또 *하이드레이션을 이용하여 처리한다.

💡 하이드레이션(hydration)
하이드레이션은 서버 측에서 생성한 HTML 페이지를 구성하는 각각의 DOM 객체에 필요한 JS코드를 추가하여 클라이언트가 동적으로 렌더링 할 수 있는 것을 말한다.

SSR을 적용하면 좋을 때를 알아보자. 예를 들어 블로그를 만든다고 해보자. 사람들이 작성한 블로그를 한 페이지에 렌더링 한다고 할 때 SSR을 적용하기 적합하다. 사용자가 페이지에 접근하면 서버는 페이지를 렌더링 해서 HTML 페이지를 만들 클라이언트로 보낸다. 그리고 브라우저는 받은 페이지에 필요한 JS코드를 추가한 뒤 각 JS 코드를 하이드레이션한다. 그렇기에 페이지를 새로 고치지 않아도 사용자와 웹 페이지가 원활하게 상호작용할 수 있다.
이제 SSR의 장단점을 알아보자!

👍 이 놈은 더 안전한 웹 애플리케이션 관리가 가능하다

SSR을 사용하면 페이지를 서버에서 렌더링한다는 것은 쿠키 관리, 주요 API 과 같은 작업들을 서버에서 처리하기에 중요한 데이터를 클라이언트에게 노출할 필요가 없다.

👍 이 놈은 웹사이트 호환성이 뛰어나다

클라리언트 환경이 JS를 사용하지 못하거나 오래된 브라우저라도 SSR을 사용하면 웹 페이지를 제공할 수 있다.

👍 이 놈은 SEO 가 뛰어나다

서버가 렌더링한 HTML 콘텐츠를 클라이언트가 받기만 하기 때문에 웹 크롤러와 같은 검색 엔진 웹 문서 수집기가 페이지를 렌더링할 필요가 없기에 SEO 점수가 높아진다.

---

👎 이 놈은 TTFB가 늦어질 수 있다.

SSR은 새로운 페이지로 넘어갈 때 마다 페이지를 렌더링 하기 때문에 서버에서 페이지를 생성하는 데에 시간이 걸려 TTFB(Time to First Byte)가 느려질 수 있다.

👎 서버에 부하가 갈 수 있다.

SSR은 페이지를 로딩할 때마다 서버에 요청을 보내기 때문에 서버에 부하가 갈 수 있다.

SSG(Static side Generation)

SSG는 페이지의 일부 혹은 전체 페이지를 빌드 시점에서 미리 랜더링 하는 방법이다. 웹 애플리케이션을 빌드할 때 내용이 거의 변하지 않는 페이지는 정적으로 만드는것이 아무래도 좋을 것이다. Next.js는 이런 페이지를 빌드 과정에서 정적인 페이지 형태로 미리 렌더링 하여 HTML 마크업 형태로 제공해준다. (SSR 처럼) 이제 SSR의 장단점을 알아보자.

👍 이 놈은 확장이 쉽다

정적인 페이지는 단순 HTML 파일이기에 CDN을 통해서 파일을 제공하거나 캐시에 저장하기 쉽다. SSG는 별도의 연산 없이 정적 자원 형태로 제공되기에 서버에 부하를 거의 주지 않는다

👍 이 놈은 성능이 좋다

SSG는 웹 서버에서 정적 파일을 보내기만 하고 클라이언트 부라우저는 파일을 받아서 표시만 하면 되기에 정적 HTML 마크업 내에 미리 렌더링한 내용만 있으면 된다. 즉, 각 요청별로 발생할 수 있는 지연 시간을 최소화 할 수 있기에 좋은 성능을 보인다.

👍 이 놈은 API 요청을 더 안전하게 할 수 있다

SSG는 필요한 정보가 이미 미리 렌더링 되어있기에 서버에서 클라이언트에게 민간한 데이터를 보낼 필요가 없어지기에 사용자가 악의적인 행동을 할 여지를 주지않는 무시무시한 녀석이다.

---

👎 이 놈은 데이터의 변화를 바로 적용시킬 수 없다

만약 우리가 페이지에 어떠한 데이터를 바꾸고 싶어 바꿨지만 SSG 를 사용하면 빌드 시 이미 페이지가 캐싱되어있기에 데이터의 변화가 바로 적용되지 않는다.
이러한 SSG의 문제를 해결하기 위해서 ISR 이라는 녀석이 태어났다.

ISR(Incremental Static Regeneration)

ISR은 앞서 말했듯이 정적 사이트 생성을 사용하면서도 동적 데이터를 자주 업데이트해야 하는 경우에 유용하게 사용된다. 간단한 코드를 통해 ISR을 사용하는 법을 알아보자!

export default function Example({ data }) {
  return (
    <div>
      <h1>Example Page</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('zoooso');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 600,
  };
}

위 코드에서 getStaticProps 함수는 페이지를 사전 렌더링하기 위해 필요한 데이터를 가져오는 역할을 한다. revalidate 옵션은 페이지의 재생성 주기를 설정한다. 위 코드에서는 10분마다 한 번씩 페이지를 재생성 하도록 설정되어있다.

마치며

사실 이번 기회를 통해 렌더링 전략에 대해 처음으로 자세히 공부해 보았다. 이런 전략들을 더 공부해서 효율적인 코드를 짜는 개발자가 될 수 있도록 노력해보도록 하겠다! 그럼 20000