반응형
📝SPA (Single Page Application)
전체 페이지가 아니라 필요한 부분만 다시 로드 하는 것
예) 인스타그램 좋아요 누를 때 좋아요 숫자만 로드 되는 것
📝MPA (Multi Page Application)
페이지가 전체 다시 로드 하는 것
예) 인스타그램 좋아요 누를 때 페이지 전체가 새로고침 되는 현상
📝CSR (Client Side Rendering) (React, Angular, Vue)
- SPA방식에서 사용한다
- 정적 리소스 초반에 전부 다운로드 후 필요한 부분에 데이터만 받아 클라이언트에서 다시 그려준다
- 유저 → 웹사이트방문 → 서버에 컨텐츠요청 → 뼈대HTML → JS다운로드 → 동적 DOM 생성
- JS 다운과 동적 DOM 생성때문에 초기 로딩 속도가 느림 하지만 이후 구동속도는 빠름
- 서버에 부하가 적다
- 검색엔진최적화에 불리하다
- 빈 뼈대에 React 따위가 스크립트로 JS 다운 받아 붙이는 형태이기 때문에 JS 다운 받아 동적 DOM 생성 전까지는 아무것도 정보가 없어서 검색엔진이 HTML 파일을 읽어 수집할 내용이 없다
- 화면 깜빡임이 없음
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때 로딩창을 띄울 수 있는 장점이 있다
- 웹 페이지와 사용자의 상호작용(이벤트 핸들링)이 많은 경우 CSR 활용
- 아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리
📝SSR (Server Side Rendering) (PHP, JSP, Next)
- MPA방식에서 사용한다
- 요청시 서버에서 렌더링한다
- 검색엔진최적화에 유리하다
- 서버 부하가 있다
- 첫 화면 렌더링이 빠르게 필요한 경우 SSR 적합
- 웹 페이지와 사용자의 상호작용(이벤트 핸들링)이 적은 경우 SSR 활용
- 참고로 Next의 경우는 그릴 수 있는 건 SSR 그 외에는 CSR처리하게끔 한다
📝TTV (Time To View)
사용자가 웹을 볼 수 있다 → 자바스크립트로 인한 동작은 안 됨
📝TTI (Time To Interact)
클릭 등 인터랙션이 가능해진다 → 자바스크립트로 이벤트 처리
📝SSG (Static-Site-Generator)
- HTML을 빌드타임에 각 페이지 별로 생성하고 해당 페이지 요청이 들어올 경우 이미 생성된 HTML 문서를 반환
- 동적요소 추가가능하고 페이지들이 많이 있기는 하지만 내용들이 변할 일은 크게 없고 동적요소들은 적은 블로그 같은 것에 활용한다
- Gatsby, NextJS 등의 라이브러리를 활용하면 CSR에 특화된 리액트로 정적으로 웹페이지를 생성하여 서버에 미리 배포해둘 수 있다
- 검색 페이지의 경우 같은 검색 키워드이지만 위치에 따라 결과가 다르던가 할 경우 SSG를 사용하면 다른 결과마다 페이지를 만들기 때문에 엄청난 양의 HTML이 만들어지니 진짜 정적인 곳만 유의해서 사용해야한다
📝SEO (Search Engine Optimization)
웹페이지들을 검색엔진이 수집해 분석 후 검색해 나오는 검색 결과들의 우선순위를 정하는데 사용된다.
반응형