SSR 2

[React] - 디벨킷이 SEO에게 선택받다.

가끔 구글검색창에 손이 가는 대로 검색하는 경우가 있다. 어떤 단어든 말이다. 우연찮게 손이 가는대로 오늘 프로젝트이름인 디벨킷을 검색해 봤는데 오잉? 익숙한 문구와 도메인이 가장 상단에 떠서 들어가 보니 우리가 만들었던 프로젝트의 웹페이지가 나왔다. 원래는 검색이 안 됐던 걸로 기억하는데 뭐지? 클라이언트 사이드 렌더링 방식으로 동작하는 SPA(이하 싱글페이지 애플리케이션) 프로젝트의 가장 큰 단점 중 하나가 검색 엔진 최적화가 안 되는 것인데 어떻게 우리 프로젝트가 검색엔진에 등록되는 것일까? 최근 SSR(이하 서버사이드 렌더링), CSR(이하 클라이언트 사이드 렌더링에 호기심이 생겨서 이것저것 공부해 보다가 이번 기회로 CSR은 어떻게 구글검색이 되는지 찾아보게 됐다. 처음엔 웹 호스팅과 서버 호스..

SSR(Server Side Rendering)

리액트와 Next.js에 대해 공부하면서 CSR과 SSR에 대해 자연스럽게 헷갈리게 됐고(?ㅋㅋ) 찾아보았다. 공부한 내용을 간략히 설명하자면 CSR과 SSR의 정의 CSR은 클라이언트 사이드 렌더링의 약어로 프론트엔드에서 렌더링을 해준다. SSR은 서버 사이드 렌더링으로 서버에서 렌더링을 한 파일을 내려준다. 이번 글에서는 SSR만 다루겠다. SSR 전통적인 방식의 웹사이트들은 대부분 SSR 형태로 서비스 해왔다. 페이지를 이동할 때마다 새 페이지를 요청하고 서버연산에 의해 렌더링 된 후 완성된 페이지형태로 응답한다. SSR 의 장점 1. SEO - 검색엔진 최적화 이미 DOM이 다 구성된 파일을 브라우저가 내려받기 때문에 검색 엔진들이 정보를 수집할 때 정확한 정보를 검색할 수 있어서 사용자들이 웹사..

기타 2022.11.21
반응형