sixhustle.log
로그인
sixhustle.log
로그인
CSR, SSR, SPA, MPA
Sixhustle
·
2022년 3월 18일
팔로우
0
client
0
Client
목록 보기
2/3
Rendering
HTML, CSS, Javascript 등 개발자가 작성한 문서를 브라우저에 그래픽 형태로 출력하는 과정
CSR(Client Side Rendering)
데이터가 없는 html만 받아온다.
데이터는 html/static 파일들이 로드된 후에 요청해서 받아온다.
장점
화면을 모두 그린 후에는 서버의 의존도가 낮기 때문에 빠른 화면 전환이 가능하다.
보통 S3 + CloudFront 구성을 사용하여 SSR보다 경제적이다.
단점
초기에 javascript를 읽어 무엇을 그려야할지 판단하기 때문에 딜레이가 생긴다.
데이터가 없는 html이기 때문에 크롤링할 때 아무 내용이 없어 SEO(Search Engine Optimization: 검색엔진최적화)에 취약하다.
SSR(Server Side Rendering)
데이터까지 전부 삽입하여 완성된 html을 받아온다.
여러 클라이언트를 감당해야하는 부담감이 있다.
따라서, 정적인 컨텐츠를 주로 다루며, 이를 캐싱하여 사용한다.
동적인 컨테츠를 많이 다루면, 캐시 적용도 어렵기 때문에 단점이다.
고려해야할 관점
페이지 로딩 시간
서버 자원 사용
네트워크의 성능
SEO 최적화 유무
MPA(Multi Page Application)
Interaction이 발생할 때마다 서버로부터 새로운 파일을 받는다.
페이지를 이동하면서 새로 렌더링한다.
SPA(Single Page Application)
React는 index.html 하나의 파일로 구성되어 있다.
페이지가 한 번 로딩되면, 페이지가 새로 고침되지 않고 다른 페이지로 넘어가지 않는다.
Reference
https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#csr-client-side-rendering-vs-ssr-server-side-rendering
https://proglish.tistory.com/216
Sixhustle
팔로우
이전 포스트
CSS: Cascading Style Sheet
다음 포스트
CSS
0개의 댓글
댓글 작성