SSR & SSG

웅서트 스터디 세 번째 주제 - SSR & SSG in Next.js
넥스트의 렌더링 방식에 대해 아주 간략하게 알아보자!

---

Next.js

넥스트는 SSR, SSG을 지원하는 React 기반의 Js 프레임워크이다.

특징 & 장점

• Page 기반 라우팅
• pre-rendering(SSR & SSG)
• SEO 최적화

SSR(Server Side Rendering)

말 그대로 서버단에서 페이지(html)을 렌더링 하여 보내주는 방식이다.

그래서 이게 뭐가 좋다고?

페이지를 미리 렌더링하여 사용한다.
이것은 유저에게 측에 훨씬 빠르게 페이지를 렌더링해줌으로써 더 좋은 경험을 제공해줄 수 있다.

But

쉽게 말해 렌더링 작업을 서버에 떠넘긴다.
페이지를 요청할 때마다 서버에서 렌더링 해주어야 하기에 서버 부하가 크다.

SSR vs CSR

기본적으로 Plain React 환경을 포함한 기본 자바스크립트 환경에서는 CSR 방식으로 렌더링된다.

여기서 CSR이란?

CSR(Client Side Rendering) : 클라이언트 단에서 페이지를 렌더링하는 방식

각각의 특징과 장단점을 고려해보자

	시간, 효율
로딩시간	SSR (첫 로딩은 SSR, 나머지 로딩은 CSR이 더 빠르나, 평균적으로는 SSR이 더 빠르다)
SEO 최적화	SSR
서버 부하	CSR

서비스(프로젝트)의 유형에 따라 선택적으로 사용하자

SSG(Static Site Generation)

이름처럼 정적인 페이지를 미리 렌더링하여 사용하는 방식이다.

요청시 렌더링하는 방식이 아닌 빌드와 함께 미리 렌더링된다.
즉,

빠르다, CSR은 당연하고 SSR 보다도 훨씬 빠르다.

특징 & 장점

• 서버 부하가 적다 : SSR과 달리 빌드시에 렌더링 되기에 매번 렌더링할 필요가 없어 서버 부하가 적다.
• 속도 : 요청 전에 미리 렌더링되어 있기에 초기 렌더링 속도가 상당히 빠르다(CSR은 비교도 안되고, SSR 보다도 훨씬 빠르다.)

단점

정적이다. SSG 방식의 로딩 속도의 비결이기도 하지만 한계이기도 하다.
동적으로 콘텐츠의 변경이 힘들며, 데이터가 변경되어도 빌드 과정에서 렌더링 된 페이지기에 반영이 힘들다.

하지만!

이러한 SSG 방식의 단점을 해결해줄 친구가 있다.

ISR(Incremental Static Regeneration)

이름 그대로이다.

ISR을 통해 정적인 페이지를 재생성시켜줄 수 있다.

재생성 시간을 지정해줌으로써 이를 실행할 수 있는데, 이때 사용하는 키워드가 revalidate 이다.

revalidate

아래와 같이 revalidate를 설정해줄 수 있다.

export const getStaticProps = async () => {
  const res = await axios.get('api');
  const posts = await res.json();

  return {
    props: { 
      posts,
    },
    revalidate: 10, // 밀리초 단위인 다른 기능들과 다르게 초단위이다.
  };
};

---

넥스트..

넥스트는 프론트엔드 분야에서 크게 각광받는 Js 프레임워크이다.

넥스트를 사용하는 가장 큰 이유이자 장점은 크게 SSR, SSG를 통한 빠른 로딩과 SEO 최적화를 꼽을 수 있다.

이중 SSR과 SSG는 공감하면서 SEO 최적화는 크게 신경쓰지 않는 사람들이 있다.

하지만 우리의 목표는 결국 서비스를 만드는 것. SEO 최적화는 서비스 노출에 있어서 상당히 중요한 부분이다.

우리가 코더가 아니라 정말 프로젝트의 성공을 위하는 개발자로서 성장하고자 한다면 이부분을 잊어선 안된다고 생각한다.

Next.js ... 열심히 해보자!!