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가 다소 떨어짐
✅SEO
- 검색엔진 최적화는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 것으로 검색 랭크 개선이라고 부름
✨ CSR은 검색엔진 최적화를 할 수 없다?
- 취약한 편이지 안되는 것은 아님. 하지만 많은 크롤러가 자바스크립트는 지원하지 않기 때문 → 불리하다~
✅ 메타태그
- 메타데이터라고 불리는 웹페이지에는 나타나지 않고 웹 크롤러나 검색엔진을 통해 수집되는 데이터
- 페이지의 랭킹을 매기거나 검색 결과를 나타내는데 사용
'프론트엔드 👩🏻💻' 카테고리의 다른 글
| [타입스크립트] 타입 종류✨ (3) | 2024.09.11 |
|---|---|
| [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 |