개발공부/CS
SPA, CSR, SSR
hani:)
2023. 12. 5. 15:51
오늘은 렌더링 방식에 대해 공부하고자 한다.
왜냐하면 프론트엔드 개발자는 각 렌더링 방식의 장단점을 이해하고, 웹 어플리케이션의 특성에 맞는 렌더링 방식을 선택할 줄 알아야 하기 때문이다!
렌더링 종류
렌더링 종류는 아래와 같다.
- 싱글 페이지 어플리케이션 (Single Page Application)
- 클라이언트 사이드 렌더링 (Client-Side Rendering)
- 서버 사이드 렌더링 (Server-Side Rendering)
이제 하나씩 자세히 알아보려고 한다.
싱글 페이지 어플리케이션 (Single Page Application)
- 모든 페이지가 단일 페이지로 구성되어 있는 방식
- 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션
- 예시로는 React, Vue.js 등이 있음
장점
- 초기 로딩 속도 빠름
- 사용자 인터렉션에 따라 필요한 부분만 업데이트
- 동적인 페이지 구성 가능 (HTML, CSS, JS 등으로 렌더링하기 때문)
단점
- SEO 취약
- 개발 난이도 높음
클라이언트 사이드 렌더링 (Client-Side Rendering)
- 브라우저에서 HTML, CSS, JS 등을 동적으로 렌더링하는 방식 (브라우저에서 동작으로 DOM을 그림)
- 최초 로드시 필요한 파일들은 전부 받고, 사용자의 인터렉션에 따라서 클라이언트단에서 받아와 렌더링을 해주는 방식
- 예시로는 React, Vue.js 등이 있음
장점
- 렌더링 속도가 빠름
단점
- 초반에 뼈대만 다운받기 때문에 SEO에 취약
- 초기 화면의 렌더링 속도가 느림
서버 사이드 렌더링 (Server-Side Rendering)
- 서버에서 HTML, CSS, JS 등을 렌더링한 후 브라우저에 전달하는 방식 (이미 다 만들어진 DOM을 받음)
- 예시로는 Next.js, Nuxt.js 등이 있음
장점
- 초기 화면의 렌더링 속도 빠름
- SEO에 최적화
단점
- 모든 렌더링마다 서버를 거침으로 속도가 느림
인터렉션
사용자가 목적을 달성하기 위해서 제품의 UI를 사용하여 상호작용하는 과정을 의미
728x90