CSR / SSR / ISR / Universal Rendering 이란?

서론

현재까지 진행한 프로젝트는 모두 클라이언트 사이드 렌더링(CSR) 방식으로 진행했었다.

최근 Next.js를 찾아보면서 서버 사이드 렌더링(SSR)방식에 대해 관심을 가지게 되었고

여러가지 렌더링 방식에 대해 적어보려 한다.

---

CSR(Client Side Rendering)

브라우저가 웹 페이지를 직접 렌더링하는 방식이다.
클라이언트가 서버로부터 HTML과 Javascript 파일을 받은 후 Javascript를 통해 DOM을 조작하여 웹 페이지의 내용을 추가하거나 변경한다.

초기 페이지가 로드되면 DOM 조작은 클라이언트에서 이루어지므로 즉각적인 업데이트가 가능하기 때문에 상호작용이 빠른 특징이 있다.

 

하지만! 서버에서 웹 페이지를 구성에 필요한 Javascript 파일을 모두 받아야하기 때문에 초기 페이지 로드가 느릴 수 있다.

더군다나 받아야할 파일이 많아지고 커지면 커질수록 그에 비례해서 초기 로드 속도는 더 느려진다. 또한 일부 검색 엔진 크롤러가 Javascript를 온전히 실행하지 못하는 경우도 있어 검색 엔진 최적화(SEO)가 어려울 수도 있다.

 

SSR(Server Side Rendering)

웹 서버에서 페이지를 렌더링하고 클라이언트로 완성된 HTML을 보내는 방식이다.

초기 페이지 로드 시간이 빠르다.

클라이언트는 서버로부터 완성된 HTML을 받기 때문에 CSR과 달리 Javascript 파일을 받고 실행할 이유가 없다. 때문에 초기 페이지 로드 시간이 빠르다. 또한 검색 엔진 크롤러가 서버로부터 완성된 HTML을 가져오기 때문에 SEO에도 유리하다. 검색 엔진이 Javascript를 온전히 해석하지 못하고 HTML은 가능하기 때문에 완성된 HTML이 더 유리한 것이다.

 

하지만! 서버에서 새로운 HTML을 매번 생성해야 하기 때문에 서버에 부하가 증가할 것이고 새로운 페이지를 요청할 때마다 페이지 리로드가 필요하므로 웹 사이트내의 상호작용이 느릴 수 있다.

 

ISR(Incremental Static Regeneration)

Next.js 9.5 버전부터 제공된 SSG의 단점을 보완하기 위해 생긴 기능이다. SSG는 생성된 페이지를 캐싱하여 이후에는 캐시된 페이지를 제공하는 방식이지만 데이터가 자주 변경되는 웹 사이트에서는 내용이 정확하지 않을 수 있다는 이슈가 존재했다.

그래서 ISR은 정적 페이지를 빌드 시에 생성한 이후에 설정된 시간에 따라 주기적으로 페이지를 재생성한다.
Next.js에서 제공하는 getStaticProps 함수 내에 revalidate옵션을 사용하여 ISR을 구현한다.(Next js 13 미만 버전 : ISR 링크)

Data Fetching: Incremental Static Regeneration | Next.js

 

하지만 Next.js 13부터는 완전히 달라졌다. fetch API에서 next.revalidate 옵션을 사용해서 캐시 수명을 설정한다. (Next.js 13 : Background Revalidation)

Data Fetching: Revalidating | Next.js

 

Universal Rendering

또는 Isomorphic Rendering

CSR과 SSR의 각 장점만을 사용하고자 두 렌더링 방식을 적절히 조합하여 하이브리드처럼 사용하는 방식이다.
Universal Rendering의 특징은 서버에서 초기 렌더링을 하고, 이후의 상호작용은 클라이언트에서 처리한다.
Next.js는 이런 렌더링 방식을 쉽게 구현 가능하도록 도와준다.

---

마무리

하지만 근래에 회사들의 채용 공고를 보면 Next.js가 필수 요구 조건이 되어가는 추세로 보인다.
더군다나 React 18 버전에서는 서버 컴포넌트가 추가되고 Next.js 13 버전의 문서에서는
Next.js로 어플리케이션을 구축하려면 서버 컴포넌트 같은 React의 최신 기능에 익숙해지는 것이 도움이 된다고 명시하고 있다.

To build applications with Next.js, it helps to be familiar with React's newer features such as Server Components.

React가 서버 컴포넌트를 정식 버전에 추가하는 것을 보면 서버 사이드 렌더링이 앞으로 대세가 될 것 같은 느낌적인 느낌..!

지켜봐야 알 수 있겠지만 왠지 대세가 될 것 같다..ㅎ

 

끗!

 

---

참고

https://nextjs.org/