렌더링(Rendering)?
데이터와 명령을 받아서 시각적인 이미지나 결과물을 만들어내는 과정
웹브라우저가 HTML문서를 파싱해 DOM(Document Object Model)을 생성한 후, CSS파일을 해석해 스타일 규칙을 적용하고, JS를 실행하여 동적으로 변경되는 요소를 처리한다.
Ajax(Asynchronous JavaScript and XML)?
웹페이지는 전체를 다시 로딩 하지 않고, 일부분만 갱신 할 수 있음
JSON, XML, HTML, 텍스트 파일 등의 형태를 주고 받을 수 있음
프레임워크: Prototype, script.aculo.us, dojo, jQuery
검색엔진최적화(SEO (Search Engine Optimization, SEO))?
웹사이트와 웹페이지를 검색엔진이 쉽게 발견하고, 읽고(크롤링), 색인하고(인덱싱), 상위노출(랭킹)시켜 자연유입되는 트래픽양과 질을 높을 수 있도록 관련 검색 알고리즘의 특성을 고려해 웹사이트의 구조나 콘텐츠를 개선하는 일련의 작업을 말함
웹사이트가 유기적인 검색방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화 하는 과
성공적인 SEO를 수행하기 위해서는 간편한 사용자 지정과 콘텐츠 업데이트를 지원하고, 사이트 요소를 최적화하는데 필요한 도구를 제공하는 플랫폼을 통해 웹사이트를 제작하는 것
웹 애플리케이션의 구조: SPA / MPA
| 웹 애플리케이션의 구조 | SPA (Single Page Application) | MPA (Multiple Page Application) |
| 특징 | 한개의 페이지 구성된 애플리케이션 하나의 URL |
여러개 페이지로 구성된 애플리케이션 여러개의 URL 전통적인 웹사이트들은 MPA 형태로 되어있음 |
| 초기에 필요한 정적리소스를 다운로드 후 캐시에 저자하고, 페이지 갱신시 필요한 데이터만 받아 갱신(AJAX) | 새로고침하거나 사용자 요청에 전체페이지가 갱신됨(깜빡임) | |
| 렌더링 방식 | 일반적으로 CSR (Client Side Rendering) | SSR (Server Side Rendering) |
| 장점/단점 | 초기에 긴 로딩시간 소요 빠른 페이지 로딩(페이지 전환시) SEO 이슈(검색엔진의 크롤링) 부드러운 사용자경험(UX)과 빠른 반응성 |
초기 로딩시간이 짧음(서버에서 렌더링) 상대적으로 느린 페이지 로딩과 서버 부하(페이지 전환시) SEO 유리(각 페이지마다 URL을 가짐) 사용자 경험이 상대적으로 느림(전체를 새로고침) |
| 예를 들면 이런느낌 아닐까.. | <div>user.admin<div/>을 읽어 운영자 이름은 ㅇㅇㅇ을 보여줌 |
<div>운영자이름은 ㅇㅇㅇ<div/> |
*REST와 헷갈렸는데.. 위의 방식은 `프론트엔드 측면에서의 웹 애플리케이션 디자인 패턴`이다.
SPA(Single Page Application)
- SPA는 한 개의 페이지로 구성된 애플리케이션으로 일반적으로 CSR방식(자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링)으로 렌더링 한다.(SPA방식이 모두 CSR은 아님)
- 웹 애플리케이션에 필요한 정적 리소스를 최초 접근 시 한번만 다운로드하고 캐시에 저장해놓는다.
이후 페이지 요청 시, 갱신에 필요한 데이터만 JSON으로 전달 받아 갱신하여 기존 페이지를 수정해서 보여주는 방식 - 주로 JavaScript프레임워크(React, Vue.js, Angular 등)를 사용하여 구현
- 초기 로딩 시간이 오래 걸리지만, 이후에는 페이지 간 전환이 부드럽고 빠른 사용자 경험(UX)을 제공
- SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합
- 예시: Google 지도, 네이버 카페, GitHub 등
장점
- 부드러운 사용자경험 및 빠른 반응성
전체 페이지를 렌더링 하지 않고 변경된 부분만 갱신하여 네이티브 앱과 유사한 사용자 경험을 제공 할 수 있음 - 모바일 친화적
모바일 앱도 SPA와 동일한 아키텍처에서 개발되므로 모바일 개발을 염두해보두면 동일한 백엔도 코드를 재사용 할 수 있음 - 개발 간소화
서버에서 페이지를 렌더링 하기 위해 코드를 작성 할 필요가 없음. SPA는 보다 현대적인 것으로 간주되어 민첩한 개발 요구사항에 적합 - 로컬 스토리지 캐시
SPA는 모든 로컬스토리지를 효과적으로 캐시 할 수 있음
애플리 케이션은 하나의 요청만 보내고, 모든 데이터를 저장한 다음 이 데이터를 사용할 수 있으며 오프라인에서도 작동함
단점
- 초기 구동 속도
웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번 다운로드 하기때문에 초기 구동속도가 상대적으로 느림(SPA는 웹페이지보다는 애플리케이션에 적합한 기술이므로 트래픽 감소와 속도, 사용성, 반응성의 향상 등의 장점을 생각한다면 결정적인 단점이라고 할 수는 없다고 한다.) - SEO(검색 엔진 최적화) 이슈
- SPA는 자바스크립트로 구축됨. 자바스크립트를 읽지 못하는 검색엔진에 대해 크롤링이 되지 않아 색인이 되지 않는 문제발생
- 웹사이트가 검색엔진에 노출되는 방식
1) 검색엔진이 URL을 타고 들어와 사이트의 웹문서 파일을 읽음(주로 HTML 코드 파일)
2) 읽은 파일 내용을 토대로 검색엔진에 노출시킴 - 보안문제
XSS(교차 사이트 스크립팅)
MPA(Multiple Page Application)
- MPA는 여러 개의 페이지로 구성된 애플리케이션으로 일반적으로 SSR방식(자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링)으로 렌더링 한다.
- 각각의 페이지가 고유한 URL을 가지며, 일반적으로 사용자가 요청할 때마다 서버에서 해당 페이지를 전체를 로드하여 초기로딩 시간이 짧고, 검색엔젠 최적화(SEO)에 유리함
- 사용자 경험이 느림(페이지 전환 시 화면이 새로고쳐짐)
- 예시: Wikipedia, Amazon
장점
- SEO 친화적
여러페이지를 생성하기 때문에 상대적으로 더 많은 수의 키워드를 타겟팅할 수 있어 유기적 트래픽의 양이 자동으로 향상됨. 여러페이지의 HTML파일을 다운로드하여 페이지를 크롤링하기 때문에 검색엔진이 작동하는 방식에 더 적합함 - 확장성
다중 페이지로 원하는 만큼 페이지를 추가할 수 있음 - 첫 로딩이 짧음
서버에서 렌더링해서 가져와 초기 로딩시간이 짧음
단점
- 페이지 이동 시 느린 속도와 서버렌더링에 따른 부하(성능)
새로고침이나 페이지 이동시 전체 페이지를 렌더링하고, 불필요한 템플릿도 중복해서 로딩한다. - 복잡한 개발(생산성)
개발자는 클라이언트 측과 서버 측 모두에 프레임워크를 사용해야 하며, 애플리케이션 개발 시간이 길어짐 - 보안 및 유지보수
개발자는 모든 페이지가 안전한지 확인 해야하는데 페이지가 많아서 지속적으로 유지보수 하는 것이 어려움
렌더링 방식: SSR / CSR
SSR(Server-Side Rendering)
- 서버에서 초기 페이지 로딩 시에 HTML을 생성하여 완전한 페에지 전체를 클라이언트에게 전달
- 서버 측에서 화면을 그려주어 화면에 깜빡임 현상이 일어남
- SEO(검색 엔진 최적화): 초기 렌더링을 서버측에서 처리하기 때문에 페이지를 크롤링하고 색인화하기 용이함
- 짧은 초기 로딩 시간
- 서버 부하 증가: 매 요청마다 서버가 페이지를 렌더링해야하므로 서버 부하가 높을 수 있음
- 제한된 인터랙션: 페이지 렌더링 후에 클라이언트 측에서 동적인 상호작용이 제한 될 수 있음
CSR(Client-Side Rendering)
- 클라이언트 측 렌더링, 초기로딩 시 HTML과 기본적인 자원들을 받은 후, JavaScript를 사용하여 클라이언트 측에서 페이지를 렌더링
- 페이지 전환시 서버에 추가적인 데이터를 요청해 업데이트를 하는 방식으로 URL이 변경되지 않음
- 긴 초기 로딩시간
- 서버 부하 감소: 클라이언트 측에서 페에지를 렌더링
- 사용자 경험(UX) 유리
출처
https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/
