SPA (Single Page Application)
SPA는 필요한 정적 리소스를 최초로 시작할 때 '한 번' 다운로드 한다.
이후에 변경이 필요할 때, 페이지 전체를 Reload 하지 않고 변경된 부분만 갱신한다. SPA는 CSR 방식을 채택하고 있다.
CSR (Client Side Rendering)
-
CSR의 동작 순서
1. 서버에서 브라우저로 응답을 보낸다
2. 브라우저에서 JS를 다운로드 받는다
3. 브라우저가 React를 실행한다
4. 페이지가 보이고 상호작용 한다 -
CSR의 장점
1. 컴포넌트 단위로 UI를 구성해서 재사용이 편하고 중복 코드가 줄어든다
2. 페이지 전환 시 부드럽다고 느껴진다 (사용자 측면)
3. 변경된 사항만 서버에 요청을 보내기 때문에 효율적이다 (비용적 측면) -
CSR의 단점
1. 초기 페이지 로딩에 시간이 필요하다
2. SEO(Search Engine Optimization, 검색엔진 최적화)가 어렵다
SSR (Server Side Rendering)
-
SSR의 동작 순서
1. Server sending ready to be rendered HTML response to browser
서버가 렌더링할 준비가 된 HTML의 응답을 브라우저에게 보낸다
2. Browser renders the page, now viewable, and browser downloads JS
브라우저가 페이지를 렌더링하고 (이 때 사용자는 페이지를 볼 수 있다) JS를 다운로드 받는다
3. Browser executes React
브라우저가 리액트를 실행한다
4. Page now interactable
페이지를 상호작용 할 수 있다 -
SSR의 장점
1. CSR에 비해 렌더링 속도가 빠르다 == 사용자가 기다리는 로딩 시간이 짧다
2. SEO가 쉽다 -
SSR의 단점
1. CSR에 비해 서버에 부하가 많다
2. 페이지 전환 시, 화면이 깜빡거린다는 느낌을 받을 수 있다
SEO (Search Engine Optimization)
- 검색 엔진이란?
검색 엔진은 인터넷에 산재한 다양한 정보를 미리 수집, 정리한 후 검색 유저가 관련 내용을 검색했을 때 수시로 찾을 수 있도록 해주는 데이터베이스 관리 시스템이다. 검색 엔진은크롤링과인덱싱을 통해 정보를 카테고리화 한다.
크롤링: 웹 크롤러로 웹 사이트 관련 데이터를 가져오는 과정
인덱싱: 크롤링을 통해 얻은 정보를 검색 색인에 저장하는 과정
검색 엔진 최적화를 위해서는 CSR 방식보다는 SSR 방식이 용이하다.
이는 검색엔진 봇들의 크롤링 방식과 연관이 있다 -검색엔진 봇들은 Javascript를 해석하는 데에 어려움이 있어, HTML에서 크롤링을 하는데 CSR 방식은 클라이언트 측에서 페이지를 구성하기 전에는 HTML에 아무것도 없으므로 데이터를 수집하지 못해 검색엔진에 노출이 어려운 것이다.
References
https://velog.io/@skypedanny/NextJS-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0
https://www.bloter.net/newsView/blt201805130001
