웹사이트 만들기,서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR), 검색최적화(SEO)

 

취미로 계속 개발을 하다가 미니 프로젝트를 하기로 마음먹었습니다. 주식 관련된 것으로 하기로 결정했고 Saas 타입의 프로젝트를 기획할 생각입니다. 

 

우선 빠르게 접근할 수 있는 웹 앱으로 만들기로 했고 React.js를 사용할 예정입니다.

그리고 다음으로 결정해야 할 사항은 서버 사이드 렌더링 (SSR)로 할 것인지 클라이언트 사이드 렌더링(CSR)로 할 것인지 입니다.

---

반응형

서버 사이드 렌더링이란? 선택한 이유

 

서버 사이드 렌더링이란 브라우저가 매번 데이터를 서버측에서 요청해서 서버에서 연산 후 결과를 브라우저에 보내주는 방식입니다. 특징으로는 초기 로딩 속도가 클라이언트 렌더링보다 빠릅니다. 또 하나의 장점은 검색엔진최적화(SEO)가 가능합니다. 이것 때문에 서버 사이드 렌더링하는 방식으로 방향을 잡았습니다. 

 

 

일반적으로 React.js나 Vue.js 같은 프레임워크는 SPA 방식으로 한 페이지에서 변화하는 부분만 렌더링하는 구조로 되어있습니다. 그러므로 서버 사이드 방식으로 하려면, 그리고 자바스크립트라는 언어로 하려면 Next.js나 node.js를 써야합니다. 

 

저는 오직 검색 최적화(SEO) 때문에 서버 사이드 렌더링을 택한지라 Next.js를 사용하기로 했습니다. 

서버 사이드 렌더링을 위한 Next.js

Next.js에 대한 내용도 엄청 많으니 차근차근 프로젝트를 진행하면서 포스팅하겠습니다. 

 

검색 최적화 SEO를 하는데 중요한 요소

 

SSR 서버 사이드 렌더링은 정적 페이지로 렌더링되어 사용자한테 보여지기 때문에 초기로딩 속도가 빠릅니다.  그리고 검색엔진최적화를 위한 meta 태그가 미리 정의되어 내려와서 최적화에 도움됩니다. 

 

CSR환경에서 meta 태그를 제어하기 위해서는 react-helmet 이란 패키지를 사용할 수 있습니다.react-helmet 은 SEO에 필요한 메타 데이터를 쉽게 변경할 수 있게 해주는 라이브러리입니다.  이 라이브러리에 대해서는 나중에 다루겠습니다. 

 

 

React에서는 기본적으로 Html파일이 1개이고 이것을 동적으로 바꾸면서 로딩합니다. 그러므로 미리 html 파일의 내용을 보여주는 것이 유리합니다.  다음으로 중요한 요소는 pre-rendering 입니다.  pre-rendering을 하는 법은 ssr보다는 덜 복잡합니다. 오직 빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 들어왔을 경우 빈 html 대신 내용이 포함된 html을 가져갈 수 있습니다.

 

여기에 도움되는 라이브러리는 react-snap 입니다.

 

SSR은 아예 방식 자체를 바꾸는 것이기 때문에 처음부터 설계하고 해야합니다. 나만 사용하는 사이트가 아닌 이상 검색최적화 SEO를 생각할 수밖에 없고 그것을 고려해서 프로젝트를 구성해야합니다. 또 보안적인 측면에서 SSR이 유리할 수 있습니다. 모든 렌더링, 로직을 서버에서 처리하기 때문에 클라이언트 단에서는 해킹에 취약할 수 있습니다.