[React] CSR과 SSR

 

1. CSR (Client Side Rendering)

• SPA가 사용하는 렌더링 방식.
• 최초 로딩 시, 브라우저가 서버에 HTML, CSS, JS등 각종 리소스를 받아옴.
• 이 리소스들은 사용자의 상호작용에 따라 JS를 동적으로 렌더링 하고, 필요에 따라 데이터를 서버에 요청해서 받아옴.
• 따라서 서버 부하는 줄지만, 초기 로딩이 느리고 SEO(검색어 최적화)불가.(구글 제외)

 

2. SSR (Server Side Rendering)

• 서버에서 렌더링을 마치고 완전한 HTML을 브라우저로 전달해서 렌더링.
• 즉, 서버에서 데이터까지 포함해 페이지를 만들어 브라우저에게 전달함.
• 따라서 새로운 페이지로 이동할 때마다 서버에 페이지를 요청하고 새로고침이 되어 화면이 깜빡이는 현상 발생.
• 초기로딩이 빠르고 SEO(검색어 최적화)가능.

 

3. CSR은 왜 SEO(검색어 최적화)가 힘든가

웹 크롤러는 HTML 정보를 수집한다.

CSR은 사이트 뷰를 생성하는데 자바스크립트가 필요하다.

그 전까지는 HTML내용이 비어있기 때문에 크롤러는 크롤링 할 수 없다. 

• 웹 크롤러는 월드와이드웹(WWW)를 탐색하는 컴퓨터 프로그램.
• 웹 상의 거의 모든 웹페이지가 무엇에 대한 것인지 파악하여, 필요할 때 정보를 추출할 수 있도록 하는 것이 목적.
• 웹 크롤러는 방문한 사이트의 모든 페이지의 복사본을 생성하고, 검색 엔진은 크롤러가 생성한 페이지를 보다 빠른 검색을 위해 인덱싱 함.
• 대부분 검색 엔진이 운영하며, 검색 엔진은 웹 크롤러가 수집한 데이터에 검색 알고리즘을 적용하여 사용자의 검색 질의에 대한 응답으로 관련 링크 제공.
• URL에서 웹페이지를 크롤링 하고, 이 과정에서 다른 URL에 대한 링크를 찾게 되면 다음으로 크롤링할 페이지 목록에 추가

 

* 검색 색인화(인덱싱)

- 정보를 필요로 하는 사람에게 인터넷의 어디에서 그 정보를 찾을 수 있는지 알려주기 위해 검색엔진이 만드는 목록.

- 즉, 검색시 정보를 빠르게 찾아 주기위해 정리한 색인.

- 주로 페이지에 보이는 텍스트와 사용자에게 보이지 않는 메타데이터에 중점을 둠.

- 유저가 단어를 검색하면 검색 엔진은 해당 단어가 나타나는 모든 페이지의 색인을 검토해 가장 관련성이 높은 페이지 선택.

 

 

 

 

 

참고 https://www.cloudflare.com/ko-kr/learning/bots/what-is-a-web-crawler/