웹페이지 렌더링 방식(CSR, SSR, SSG)

웹페이지 렌더링 방식의 특징과 상황에 따른 렌더링 방식 선택

1. CSR(Client Side Rendering)

• 브라우저에서 동적으로 태그와 스타일을 생성해 페이지를 채운다.
• 최초에 하나의 페이지(비어있는 페이지)만 서버로부터 불러와 렌더링하고, 이후 모든것들을 브라우저에서 렌더링한다. (SPA)
• 한 번 렌더링하고 난 이후에는 필요한 부분만 렌더링하기때문에 효율적이다.

장점

• 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임없이 부드럽게 페이지가 바뀌어 사용자 경험이 좋다.
• 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생한다.

단점

• 모든 스크립트 파일이 로드될 때 까지 기다려야하기때문에 초기 로딩 속도가 느리다.
  (최초에 빈페이지를 받아오기때문에 페이지 로드에 필요한 자바스크립트 코드, 프레임워크, 라이브러리 등을 모두 불러오기때문)
• 최초에 빈 페이지만을 받아오므로, 검색엔진 최적화에 불리하다.
  (최근에는 대부분의 웹크롤러들이 클라이언트 사이드에서 필요로하는 자바스크립트를 실행하고있어 문제가 어느정도 해소되었긴하다)

선택 상황

• 동적이고 SEO가 중요하지 않은 사이트를 구축하는 경우.
• 유저의 상호작용이 많고, 유저의 개인정보를 기준으로 서비스하는 페이지에 적합.
• 예시로 유저 프로필페이지, 결제 내역, 어드민 전용 페이지 등.

SPA(Single Page Application)

• 브라우저가 프론트엔드 서버에 접속해서 html, css, js의 한 페이지를 받아온 뒤, 보여주고싶은 부분을 동적으로 보여주는 어플리케이션.
• 매번 서버에 접속할 필요없이 보여줄 부분만 잘라서 보여준다.
• CSR방식으로 렌더링된다.
• 페이지를 새로 가져오는 것이 아닌, router를 통한 컴포넌트의 교체만 일어난다.
• 페이지 전환이 굉장히 빠르다.

---

2. SSR(Server Side Rendering)

• 브라우저가 서버에 페이지를 요청하면, 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송한다.
• 브라우저는 응답받은 HTML을 그대로 렌더링한다.
• 브라우저가 페이지를 요청할 때 마다 해당 페이지에 관련된 HTML, CSS, JS파일 및 데이터를 받아와 렌더링한다.
• 이미 페이지로드에 필요한 데이터를 서버에서 미리 불러왔기때문에 클라이언트 사이드에서 별도의 코드를 더 불러올 필요가 없다.
• 따라서 첫 페이지의 로딩이 빠르다.

장점

• 처음 페이지 접근 시 서버로부터 해당 페이지에 필요한 데이터들만을 가지고 만든 HTML을 전달받기때문에 유저가 사용하기까지 걸리는 시간이 CSR에 비해 빠르다.
• 크롤러에게 완성된 페이지를 전달하기 때문에 검색엔진 최적화에 유리하다.

단점

• 서버로부터 매번 페이지를 전달받기 때문에 서버에서 페이지를 생성하는 시간이 소요된다.
• 서버로 짧은 시간에 많은 요청이 있는 경우 HTML을 만드는 연산작업이 서버에 많은 부하를 줄 수 있다.
• 웹 어플리케이션 내에서 페이지 전환시 전체 페이지가 사라지고 새로운 페이지 HTML을 받으면서, 깜빡임이 발생해 사용자경험흘 헤칠 수 있다.

선택 상황

• 정적인 페이지가 많고, SEO가 중요한 사이트를 구축하는 경우.
• 페이지 내용에 데이터베이스에 있는 데이터가 필요하고, 검색엔진 최적화가 필요한 페이지에 적합하다.
• 예시로 가격이나 할인율이 변하기 쉽고 검색엔진 최적화가 필요한 상품 상세보기 페이지가 있다.

MAP(Multiple Page Application)

• 사용자가 페이지를 요청할 때 마다 서버로부터 완전하게 만들어진 HTML파일을 받아와서 페이지 전체를 렌더링하는 어플리케이션.
• SSR방식으로 렌더링한다.

---

3. SSG(Static Site Generation)

• 미리 HTML파일을 만들어서 서버에 배포하는 것.
• 데이터가 거의 변하지 않는 경우에는 서버에 매번 request를 보내고, response를 받아와 그리는 것이 비효율적이다.
• 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다.

장점

• 미리 만들어둔 페이지를 브라우저에서 제공하므로 렌더링 속도가 매우 빠르다.
• SSR과 마찬가지로 완성된 페이지를 크롤러가 수집하므로 검색엔진 최적화에서 유리하다.

단점

• 모든 url에 대해 개별 HTML파일을 생성해야 해서 url을 미리 예측할 수 없거나 양이 너무 많으면 적용이 어렵다.

선택 상황

• 데이터가 변하는 일이 없으며 모든 사용자에게 같은 화면을 보여주는 사이트를 구축하는 경우.
• 검색엔진 최적화가 필요한 페이지에 적합.
• 예시로는 회사 소개사이트, 동아리 홈페이지, 포트폴리오, 뉴스같은 정보성페이지. 

---

4. SSR + CSR

• 첫 화면, 메인 랜딩페이지등은 빠른 초기 로딩을 위해 SSR방식을 적용해서 개발하고, 이후 사용자의 사용에 따라 이동하는 페이지들은 CSR방식을 적용하여 웹사이트를 구축하여 두 렌더링 방식의 장점을 모두 충족시킬 수 있다.

 

참조

https://velog.io/@eeeve/%EC%9B%B9-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D-CSR-SSR-SSG

https://im-developer.tistory.com/227