2. React 환경에서의 SEO 처리 문제점 : CSR(Client Side Rendering)
: React 환경에서 웹 렌더링은 CSR (Client Side Rendering): 클라이언트 사이드 렌더링을 한다 !
: 정적인 페이지에서의 SEO 처리에는 문제가 발생하지 않지만, 동적인 페이지에서 SEO 최적화는 어려울 수 있다.
=> 검색엔진은 API로 응답 받은 데이터가 반영되기 이전의 html문서만을 받아 판단하기 때문에 우리가 원하는 정보를 입력할 수 없음.
CSR(Client Side Rendering) 란? : 렌더링이 클라이언트 쪽에서 일어난다. 문제점 : 맨 처음 url 요청에 웹문서가 가지고 있는 모든 정보, 링크페이지까지도 한번에 다 받아오기 때문에, 초기 화면 로드가 느릴 수 있고, SEO(검색엔진최적화)에 나쁜 성능을 보일 수 있다. (=> 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없음 . )
장점: 로드가 되고 나면 사이트 내에 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아진다는 점이 있다.
3. Next.js 프레임워크의 SSR(Sever Side Rendering)을 활용하여 SEO 처리하기 !
: SSR(Server Side Rendering) : 서버 사이드 렌더링에서는 브라우저에서 해야할 렌더링을 서버에서 렌더링하여 html파일을 브라우저에 보내준다. API 요청을 서버에서 진행하고 브라우저가 받은 html문서에는 SEO 처리에 필요한 정보가 들어 있기에 검색엔진 최적화에 유리하다 !
SSR (Server Side Rendering)이란? : 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
서버에서 이미 '렌더 가능한'상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다 !
4. 총정리! CSR vs SSR 차이
CSR
SSR
웹 페이지 로딩 시간
첫 페이지 : HTML,CSS와 모든 스크립트를 한번에 불러옴.
상대적으로 느림
나머지 로딩 시간 : 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아 왔기 때문에,
