SPA, CSR, SSR

오늘은 렌더링 방식에 대해 공부하고자 한다.

 

왜냐하면 프론트엔드 개발자는 각 렌더링 방식의 장단점을 이해하고, 웹 어플리케이션의 특성에 맞는 렌더링 방식을 선택할 줄 알아야 하기 때문이다!

 

렌더링 종류

렌더링 종류는 아래와 같다.

 

1. 싱글 페이지 어플리케이션 (Single Page Application)
2. 클라이언트 사이드 렌더링 (Client-Side Rendering)
3. 서버 사이드 렌더링 (Server-Side Rendering)

 

이제 하나씩 자세히 알아보려고 한다.

 

싱글 페이지 어플리케이션 (Single Page Application)

• 모든 페이지가 단일 페이지로 구성되어 있는 방식
• 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션
• 예시로는 React, Vue.js 등이 있음

장점

1. 초기 로딩 속도 빠름
2. 사용자 인터렉션에 따라 필요한 부분만 업데이트
3. 동적인 페이지 구성 가능 (HTML, CSS, JS 등으로 렌더링하기 때문)

단점

1. SEO 취약
2. 개발 난이도 높음

 

클라이언트 사이드 렌더링 (Client-Side Rendering)

• 브라우저에서 HTML, CSS, JS 등을 동적으로 렌더링하는 방식 (브라우저에서 동작으로 DOM을 그림)
• 최초 로드시 필요한 파일들은 전부 받고, 사용자의 인터렉션에 따라서 클라이언트단에서 받아와 렌더링을 해주는 방식
• 예시로는 React, Vue.js 등이 있음 

장점

1. 렌더링 속도가 빠름

단점

1. 초반에 뼈대만 다운받기 때문에 SEO에 취약
2. 초기 화면의 렌더링 속도가 느림

 

서버 사이드 렌더링 (Server-Side Rendering)

• 서버에서 HTML, CSS, JS 등을 렌더링한 후 브라우저에 전달하는 방식 (이미 다 만들어진 DOM을 받음)
• 예시로는 Next.js, Nuxt.js 등이 있음

장점

1. 초기 화면의 렌더링 속도 빠름
2. SEO에 최적화

단점

1. 모든 렌더링마다 서버를 거침으로 속도가 느림

 

인터렉션

 

사용자가 목적을 달성하기 위해서 제품의 UI를 사용하여 상호작용하는 과정을 의미