[ETC] SSR, CSR, SEO에 대하여

React나 Vue, Angular 같이 SPA 방식으로 개발하는 경우 SEO가 잘 되지 않는다는 단점이 있다. 그래서 사용자들에게 정보 제공하고 유입을 증가시키는 경우 SPA 방식이 불리할 수가 있다.

React의 경우로 CSR, SSR을 비교해보자

✅ CSR

✨작동원리/순서

- 유저가 앱에 접속하면, 브라우저가 jacascript 정보가 들어있는 빈 html 문서를 전달함

- 브라우저는 js 파일을 다운로드하고 유저는 빈화면을 보게 된다(접속에 대한 응답)

- js 파일의 다운로드가 끝나면, 리액트 코드가 있는 js 파일을 실행

- 리액트 코드는 UI를 렌더링함

- 그럼 유저는 화면을 보게됨

➡️ 브라우저가 js 코드를 가지고 있지 않거나, 요청 중인 상태라면 UI를 구성할 수 없고, 유저는 빈화면을 보게 됨. 리액트 코드가 실행되기 전까지는 유저 화면에 아무것도 보이지 않을 것. 이렇게 클라이언트 측에서 UI를 빌드하는 방식을 CSR

✨장점

- 초기 로드가 완료되면 이후 렌더링이 빠름

- 서버에 요청할 것이 거의 없어서 서버 부담이 적음

- Web application에 좋음

✨단점

- SEO에 좋지 않음(초기 html 파일이 비어있기 때문에 봇이 데이터 수집하기 어려움)

- 초기 로드가 오래 걸림

- 외부 라이브러리가 필요한 경우가 많음

✅SSR(Next.js)

✨작동 순서

- 사용자 접속

- 서버에서 react 동작

- 서버에서 html 코드를 만들어서 이미 완성된 <html>과 <script>를 클라이언트에 보냄

- 클라이언트에서는 완성된 html과 script를 연결해주면 끝

➡️ 검색 엔진들이 이미 서버쪽에서 만들어진 html을 크롤링할 수 있기 때문에 유리해짐

✨장점

- SEO가 좋다(html파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능)

- 초기 로딩 속도가 빠름

✨단점

- 서버에서 전체 앱을 미리 렌더링하기 때문에 컴포넌트 로딩이 오래걸리면 유저가 빈화면을 볼 수도 있음

- 서버에 매번 요청하기 때문에 서버 부하가 큼

- 페이지를 요청할 때마다 새로고침되어 UX가 다소 떨어짐

- 검색엔진 최적화는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 것으로 검색 랭크 개선이라고 부름

✨ CSR은 검색엔진 최적화를 할 수 없다?

메타데이터라고 불리는 웹페이지에는 나타나지 않고 웹 크롤러나 검색엔진을 통해 수집되는 데이터
- 페이지의 랭킹을 매기거나 검색 결과를 나타내는데 사용

[타입스크립트] typeof, keyof, 타입가드 (0)	2024.09.10
[ETC] 개발 서버 및 빌드 실행 ✨ (npm run start/ dev/ build) (26)	2024.09.02
[패키지매니저] yarn vs npm 정리 ✨ (0)	2024.02.22
[프론트엔드 언어 ] 프론트엔드 언어 정리 ✨ (React, Vue.js, Angular) (0)	2024.02.14
인증 방식 정리 ✨ (3)	2024.01.21

티스토리툴바