SPA, CSR 등등이 뭔지 알아보기 전 먼저 알아야 할 것이 바로 Dynamic Website와 Static Website이다. 이에 대해 하나씩 살펴보자!
Static Website
정적인 웹사이트를 말한다. 서버에 저장된 html파일이 그대로 브라우저에 보이는 것을 말한다. 개츠비가 가장 대표적인 정적 페이지라고 할 수 있다. 아래 캡쳐는 내 블로그에서 개발자도구를 열었을 때의 화면이다.
우리가 쇼핑몰이나 일반적인 웹사이트를 들어가면 배너 혹은 페이지들의 변형이 있곤 하는데 이와는 달리 static은 정말 말 그대로 정적이다! 변화가 없다. 그래서 기술블로그 혹은 기업소개 페이지는 대부분 static website이다.
왜 gatsby를 기술블로그로 많이 쓰는 지는 이 분 블로그에 잘 나와있으니 참고하시오..!
Dynamic Website
정적인 웹사이트의 반대말로 동적인 웹사이트를 말한다. 서버에 저장된 html파일이 그대로 브라우저에 그려지는 것이 아닌 동적으로 html파일이 만들어 지는 것! 예시는 딱히 떠오르는 사이트가 없어서 위코드의 영원한 친구 마켓컬리로 대신한다 ㅎ
신규 회원가입 하면 100원에 구입할 수 있는 상품이 매번 같은 게 아니라 달마다 다른 것들이 나오고 중간 중간 쿠폰 이벤트나 명절 이벤트가 있으면 배너 또한 동적으로 바뀌는데 이때 각 데이터들을 백앤드 서버에서 가져와서 html을 조작해서 페이지가 동적으로 작동하는 것!
여기서 랜더링 방식에 따라 갈리는게 바로 CSR과 SSR이다. 그 전에 SPA부터 짚고 넘어가자.
SPA(Single Page Application)
리액트 같은 요즘의 웹페이지들을 SPA라고 한다. 전형적인 옛날 웹페이지 방식인 MPA(Multi Page Application)와 달리 SPA는 하나의 index.html이 있고 나머지는 js를 이용해서 동적으로 화면을 그리는 것! SPA가 발달하면서 ui/ux를 담당하는 프론트앤드 개발자와 서버/데이터를 담당하는 백앤드 개발자의 구분이 더 명확해졌다.
다시… 본론으로 넘어가서 CSR과 SSR을 살펴보자.
CSR(Client Side Rendering)
가장 대표적인게 바로 리액트라고 할 수 있다. 리액트로 만든 페이지는 CSR이라고도, SPA라고도 할 수 있다. 위에서 SPA를 설명했던 것과 같이 비어 있는 html태그들에 js들이 채워지면서 랜더되는 페이지를 말한다.
하지만 초기 랜더링 속도가 느리다는 단점과 SEO(Search Engine Optimization:검색엔진 최적화) 문제가 있다. 그래서 나온 게 바로 서버사이드 랜더링 방식이다.
SSR(Server Side Rendering)
프론트단에서 어떤 툴을 쓰느냐에 따라 SSR방식은 다양하다.
리액트를 쓴다면 ?
- react-snap
- Next.js
뷰를 쓴다면?
- Vue-server-renderer
- prerender-spa-plugin
- Nuxt.js
앵귤러를 쓴다면?
- server.engine
위에서 써본거라곤 Next.js밖에 없는데 그마저도 아직 마스터 못했네.. 큽…
지난번에 구글 웹세미나 갔을땐 구글검색에 잘 걸리게 하려고 SEO 쓰는건 비추한다고 했다 그래도 네이버나 다음 기타 등등 사이트에서 검색이 잘 되게 하려면 서버사이드 랜더링을 이용하는게 좋겠쥐..!
사실 세션 앞부분을 쪼꼼 많이 놓쳐서.. 이게 맞게 정리한 글인지도 잘 모르겠다 ㅜㅜ
어떤 사람들은 동적인 웹페이지를 SSR이라고도 하고, 또 어떤 사람들은 SPA를 CSR이라고도 하는데 SPA도 SSR이 될 수있고.. 그러니까 이런 논쟁은 1도 중요하지 않다는 것..
Reference
- 예리님의 세션
- 개츠비 왜 쓰는지 http://tlog.tammolo.com/tags/gatsby/