react.js를 학습하며 CRS와 SSR에 대해 학습하였다. 이번에는 next.js에서 사용하는 SSG, ISR에 대해 정리해보고자 한다. 이왕 하는거 CSR과 SSR도 다시 정리해보자!

1. CRS (Client Side Rendering)

클라이언트 사이드 렌더링이다. react.js는 기본적으로 클라이언트 사이드 렌더링을 사용한다.

1-1. 동작 방식

빈 html을 먼저 받아온 후 js을 통해 컴포넌트를 렌더링한다. HTML이 하나이기 때문에 SPA 특징이라고 볼 수 있다. 유저와의 상호작용이 잦은 경우 적합하다.

1-2. 장점

• 페이지 전환 : 페이지 전환에 필요한 js 번들을 초기에 다운로드 하므로 페이지 전환 시 매우 빠르다.

• TTV와 TTI 차이 : 하이드레이션(Hydration) 과정이 필요없으므로 바로 인터렉션이 가능하다.

  <aside> 💡 하이드레이션(Hydration) : 정적인(논인터렉션) HTML에 JavaScript 이벤트 및 상태를 연결하여 인터렉션이 가능하도록 하는 과정

  </aside>

1-3. 단점

• 초기 로딩 속도 및 빈 화면 노출 : js를 통해 컴포넌트를 전환하여 view를 렌더링하므로 js 번들 크기가 크면 초기 로딩 속도가 느릴 수 있고 로딩하는 동안 사용자가 빈 화면을 보게 된다.
• SEO 불리 : 빈 HTML을 사용하므로 SEO에 불리하다.

1-4. 체크 리스트

• 검색엔진에 노출되지 않아도 되는(않아야하는) 페이지인가?
• 유저와의 인터렉션이 잦은가?
• 화면 업데이트 혹은 전환이 잦은가?
• 초기 로딩이 조금 느리더라도 부드러운 사용자 경험이 중요한가?

2. SSR (Server Side Rendering)