기본적으로 MPA(Multi Page Application)는 SSR 방식을 채택하고, SPA(Single Page Application)는 CSR 방식을 채택하고 있다.
그리고 next.js 공식문서에서 권장하는 SSG(Static Site Generation)방식이 있다.
SSR,CSR,SSG에 대해 자세히 살펴보자.
SSR(Server Side Rendering)
SSR이란 Server Side Rendering의 약자이며, 서버로부터 만들어진 html파일을 받아서 페이지 전체를 렌더링하는 방식이다.
클라이언트가 초기화면 로드를 위해 서버에 요청을 보내면 서버는 화면생성에 필요한 데이터를 모두 가져와 html,css,js코드를 브라우저에 응답으로 전달한다.
이러한 SSR 방식은 화면에서 조금의 변경사항만 있더라도 리소스 전체를 다시 받아와서 서버에 부담이 생길 수는 있지만, 각각의 페이지가 있어 head에 검색정보가 페이지마다 알맞게 존재하므로 SEO(검색엔진 최적화)에서는 유리하다.
검색엔진에서 상위 노출이 필요하거나, 페이지마다 데이터가 자주 바뀌는 경우는 SSR 방식이 적합하다.
React로 개발하다가 SSR 방식이 필요하다면 Next.js프레임워크를 사용하면된다. next.js에서 getServerSideProps함수만 정의하면 SSR방식으로 쉽게 구현이 가능하다.
CSR(Client Side Rendering)
CSR이란 Client Side Rendering 의 약자로 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식이다.
클라이언트에서 초기화면 로드를 위해 서버로 요청을 보내면 처음에는 필요한 모든 리소스로 응답하지만, 이후 화면에서 변화가 생기면 처음과 다른부분의 리소스만 응답하여 빠르게 화면전환이 된다.
이런 방식은 사용할 때 빠른속도로 웹사이트를 이용할 수 있고, 서버부하가 적다는 장점이 있다. 그러나 초기렌더링 속도가 느리다는 점과 웹 크롤러가 페이지 색인화 시 빈페이지처럼 보여 SEO에는 불리하다는 단점이 있다.
데이터 보호와 보다나은 사용자 경험을 제공하고 싶을경우 CSR방식이 적합하다.
SSG(Static Site Generation)
SSG방식은 정적 페이지를 생성하는 것으로, 빌드할 때 고정된 데이터를 담은 리소스를 생성한다. pre-render에 필요한 파일이 모두 생성되므로 많은수의 페이지가 있거나 자주 업데이트 되지 않는 페이지에 적합하다.
Next.js 공식문서에서 SSG방식을 권장하는데, 그이유는 SSR,CSR과 비교했을 때 속도도 빠르고, 불필요한 리렌더링을 줄여주기 때문이다. next.js에서는 getStaticProps함수를 사용하여 SSG방식을 편하게 사용할 수 있다.
업데이트가 적거나 고정된 데이터를 사용하는 페이지에는 SSG방식이 적합하다.
ISR(Incremental Static Regeneration)
SSG의 단점을 보완한 방식으로, revalidate가 필요한 SSG페이지에 적합하다.
ISR 방식은 빌드시에만 생성하는 것이 아닌, 특정 시간마다 정적 페이지를 재생성할 수 있다.
next.js에서 getStaticProps의 반환값으로 revalidate값을 주면 해당시간마다 정적 페이지에 필요한 데이터를 반영하여 재생성한다.
데이터의 양이 많지않고, 수요에 따라 업데이트가 필요한 경우 ISR방식이 적합하다.