SSR? CSR? SEO?

SSR(Server Side Rendering)

말 그대로 서버측에서 랜더링을 함. 서버측에서 클라이언트 측 페이지를 랜더링 한 다음 완전히 랜더링된 페이지를 클라이언트에 보낸다. 정적페이지나 읽기가 기본설정인 경우 자주 사용 

MPA(Multiple Page Application) : 여러개의 싱글 페이지로 구성된 애플리케이션

MPA는 SSR 방식으로 랜더링 하기때문에 새 페이지 요청시마다 서버에서 렌더링 된 정적 리소스를 다운로드한다

 

과정 

- 유저가 웹사이트에서 요청을 보내면 서버는 'Ready to Render', 즉시 랜더링 가능한 리소스체크, 컴파일 후 완성된 HTML컨텐츠로 html을 만든다

- 컴파일된 HTML이 추가 렌더링 및 표시를 위해 클라이언트에 전달되는 순간 이미 렌더링이 된다. 그러나 아직 자바스크립트가 읽히기 전이기 때문에 사이트는 조작이 불가하다

- 클라이언트가 자바스크립트를 다운받는다

- 다운받는 사이에 유저는 컨텐츠를 볼 수 있지만 사이트 조작이 되지않는다. 하지만 이때의 사용자 조작을 기억한다. 

- 브라우저가 프레임워크를 실행하고 자바스크립트가 성공적으로 컴파일되면 기억하고있던 사용자조작이 실행되고 웹페이지는 상호작용이 가능해진다

 

장점

SSR은 인터넷이나 장치속도가 빠르지 않더라도 페이지가 빠르게 랜더링 되기때문에 사용자가 쾌적한 경험을 가질 수 있다 (서버에서 이미 '랜더 가능한'상태로 클라이언트에 전달됐기 때문에, JS가 다운로드 되는동안 사용자는 무언가를 볼 수 있다)

백엔드 템플릿과 프론트엔드 프레임워크 사이를 왔다갔다 하는대신 전체 앱을 개발하기위해 동일한 언어와 동일한 선언적 구성요소 모델을 사용할 수 있다.

완성된 형태의 HTML파일을 서버로부터 전달받기때문에 SEO 검색엔진 크롤러가 랜더링된 페이지를 직접 볼 수 있어 크롤링에 적합하다. 때문에 페이지의 콘텐츠가 클라이언트 유형보다 더 빨리 인덱싱 된다.

 

단점

새로운 페이지를 요청할 때마다 리로딩(새로고침)현상이 발생한다

불필요한 템플릿도 중복해서 로딩한다

정적사이트 생성엔 이상적일 수 있지만 빈번한 서버요청과 데이터가 많은 리로드를 하는 복잡한 응용프로그램에서는  병목현상으로 인해 전체적으로 느린 페이지 랜더링을 느낄 수 있다

모바일 앱 개발시 추가적인 백엔드 작업이 필요해 생산성이 저하될 수 있다

동일한 요청을 하는 사용자가 높을시 속도가 매우느려질 수 있으며 시간은 ms단위이기 때문에 큰 단점이 될 수 있다

SSR은 CSR보다 복잡한 캐시를 얻는다

자바스크렙트 웹의 기본값이 아니므로 서버가 모든 콘텐츠 랜더링의 부담을 떠안아 서버비용이 증가하고 리소스를 많이 사용해야한다 

 

---

CSR(Client Side Rendering)

말그대로 클라이언트측에서 랜더링을 함. 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트는 그것을 받아 랜더링을 시작한다.

SPA(Single Page Application) : 단일 페이지로 구성된 애플리케이션

SPA는 CSR방식으로 랜더링하기 때문에 단 한번만 리소스(HTML, CSS, JS)를 로딩하고 이후엔 데이터를 받아올 때만 서버와 통신하고 기존페이지의 내부를 수정해서 보여준다

 

 

과정

CDN : 여러지역에 설치된 캐시서버들을 사용해 본서버로 들어오는 요청들을 분산 처리하는 서비스

- 사용자가 웹사이트에 요청을 보내면 CDN(콘텐츠 전송 네트워크)이 HTML과 JS로 접글할 수 있는 링크를 클라이언트로 보낸다 

- 클라이언트는 HTML과 JS를 다운로드 받는다. SSR과 달리 사용저는 아무것도 볼 수 없다

- 브라우저가 자바스크립트를 다운로드하고 실행하면 데이터를 위한 API가 호출되고 이때 사용자들은 placeholder를 보게된다

- 서버가 API요청에 응답하면 API로부터 받아온 data를 placeholder자리에 넣어주고, 이제부터 페이지 상호작용이 가능해진다

 

 

장점

- 빠른 랜더링 (첫 페이지 로딩시 나머지 부분을 구성하는 코드를 받아왔기 때문에 이후 로딩에선 빠르다. SSR의 경우 과정을 다시 실행하기 때문에 느림)

- 필요한 부분만 갱신하기 때문에 네이티브앱에 가까운 자연스러운 페이지 이동과 UX를 제공할 수 있다

- 서버와 템플릿 연산을 클라이언트로 분산시켜 서버부하감소

- 컴포넌트 별 개발에 용이해 동일한 API를 사용하도록 설계가 가능하다

- 웹앱의 경우 복합적인 UI디자인을 갖는다. 그 말인 즉슨 다양한 기능을 가진 페이지들로 구성되기 때문에 많은 양의 동적데이터가 필요하다. 이 때 SSR에 비해 월등한 속도를 가지게 된다

 

단점

- 느린 첫로딩

- 외부 프레임워크 라이브러리 필요

- 크롤러가 볼 컨텐츠가 미비해 SEO가 어렵다

- 일부 또는 전체 콘텐츠 미포함

- 프론트에 보이는 정보들이라 보안이슈가 생길 수 있다

 

 

 

 

 

---

SEO(Server Engine Optimizing)

검색엔진으로부터 웹사이트나 웹 페이지에대한 웹사이트 트래픽의 품질과 양을 개선하는 과정

검색엔진이 크롤러를 사용하여 검색어 주제와 비교하여 웹을 크롤링 하면서 페이지에서 페이지로 링크를 따라가고 찾은 콘텐츠의 색인을 생성한다

크롤러는 일정한 규칙에 의해 동작하므로 SEO를 진행하며 규칙을 따라가면 웹사이트가 검색결과의 보다 높은곳에 노출되어 수익으로 연결될 수 있다

국내와 해외의 검색엔진 우선순위 배치기준이 달라 보편적인 SEO적용시 경우에 따라 스팸으로 분류될 수 있다

 

온페이지 SEO 

웹사이트 내에서 검색엔진 최적화를 위해 하는 작업: H태그, 메타태그, 이미지 및 콘텐츠 최적화 ,글자수, 내부링크 등이 요소가 된다

 

오프페이지 SEO

웹사이트 외부에서 검색엔진 최적화를 위해 하는 작업: 관련성, 신뢰성 및 권한이 포함되며 사이트로 향하는 백링크가 주된 작업이 된다