웹 동작 원리 (SPA, CSR, SSR)

SPA는 웹 개발을 하다보면 한 번쯤 보는 단어이다. 

 

SPA란 Single Page Application의 약자로, 단 하나의 HTML 문서로만 돌아가는 웹페이지로 사용자의 요청(request)에 따라 내용이 동적(dynamic)으로 바뀐다. 

 

더 정확한 이해를 위해 정적인 사이트와 동적인 사이트에 대해 알아보자. 

출처: https://www.pluralsight.com/blog/creative-professional/static-dynamic-websites-theres-difference

정적인 사이트 (Static Website)	동적인 사이트 (Dynamic Website)
서버에 미리 저장된 파일(HTML, CSS, JavaScript 등)이 그대로 전달되는 사이트	서버에 있는 데이터를 가공처리 후 전달되는 사이트
항상 같은 내용을 보여줌	실시간으로 데이터가 변경됨
ex. 회사 홈페이지	ex. Youtube 추천 영상

 

예전에는 대부분 정적인 사이트였지만, 요새 데이터가 점점 많아지면서 그 많은 파일을 유지보수 하기에 시간이 많이 든다. 또한, 추천시스템 같이 데이터가 실시간으로 변경돼서 유저에게 보여줘야 하기 때문에 대부분 동적인 사이트로 바뀌는 추세이다. 

 

동적인 사이트가 많이 쓰이면서 렌더링 방식에 따라 CSR과 SSR로 갈린다. 

	CSR(Client Side Rendering)	SSR(Server Side Rendering)
대표적인 예	React.js	Next.js
장점	서버와 클라이언트 간의 데이터 양과 트래픽 현저히 감소 단 한번의 렌더링만 있으므로, 페이지 이동이 빠름	초기 렌더링 속도가 빠름 SEO 사용 가능
단점	SEO 사용 불가 코드 spliting으로 초기 렌더링이 느림	간단한 데이터 수정도 서버를 거쳐야 함 연속적 렌더링을 할 경우 서버 비용 증가 및 과부화로 서버가 터질 수 있음

 

여기서 가장 중요한 것이 바로 SEO의 사용 가능 여부이다. 

SEO(Search Engine Optimization)는 검색 최적화의 의미로, 사이트를 노출 시키는 것을 말한다. 

SEO의 기준은 PageRank에 따르며, 사람들이 해당 페이지를 많이 방문하고, 언급이 많을 수록 신뢰도가 높아져 상위 노출이 가능하다. 

 

SEO가 잘 안된 사이트라면 검색해도 안 나올 수 있다. 

예를 들어, apple 사이트 주소를 모르는 상태에서 해당 사이트에 가고 싶다면 대부분 검색창에 apple을 친다. 하지만 이때 만약 apple이 나오지 않는다면? 다른 사람에게 물어보거나 다른 사이트를 타고 타고 들어가는 수 밖에 없다. 

 

이게 만약 우리 회사 일이라면 정말 심각한 일이다. 

대부분 유료로 트래픽을 높이는 행위를 시도하지만, 만약 우리 웹페이지에 이러한 최적화 기능도 안되어 있다면 쉽지 않다. 

때문에 이것이 현재 CSR이 직면한 가장 큰 문제다. 

CSR의 경우 하나의 HTML에서 하나의 <div>로만 이루어져있으며, 구글이 매일 크롤링을 한다해도, 결국 빈 페이지만 크롤링하는 꼴이다. 

 

이러한 문제를 해결하고자, 웹페이지 header에 메타데이터를 정확하게 써 놓는 다던지, 

로그인과 admin 페이지는 CRA로 작업(eject 스크립트를 사용하면 CSR, SSR 혼합 사용 가능)하고, 다른 페이지의 노출을 위해 Next.js를 사용한다던지, 

혹은 HTML의 시맨틱 구조를 잘 활용하여 구글이 크롤링할 때 더 쉽게 정보를 입력할 수 있게 작업하고 있다.