웹과 관련해 알아야 할 지식 몇 가지.
웹사이트 분류
Static website
정적 웹사이트. 화면에 보이는 콘텐츠를 다 담은 html 파일이 있어서, 서버에 저장된 html 파일 그대로 브라우저에 보여주는 웹사이트를 말한다. 반복이나 변화가 잦지 않은 회사 소개 페이지, 포트폴리오 페이지, gatsby 블로그 등을 정적 웹사이트로 제작한다.
Dynamic website
동적 웹사이트. 디자인 레이아웃은 그대로인데 출력되는 요소가 계속 바뀌는 웹사이트다. 요즘 대부분 웹사이트를 이 형태로 제작한다.
렌더링 방식
렌더링이란? 화면을 출력하기 위해 페이지가 구성되는 것. html이 만들어지는 과정을 렌더링이라 한다.
CSR(Client Side Rendering)
클라이언트 사이드 렌더링. 말 그대로 클라이언트가 웹사이트를 구성하는 방식을 말한다. <div> 하나 있는 빈 html 파일을 가져온 후 JS 파일을 불러와 html을 구성한다.
쇼핑몰 제품 상세페이지를 예로 들겠다. CSR 방식에서는 모든 제품 페이지 상세 설명이 들어간 html이 미리 완성되어있는 것이 아니다. 껍데기(레이아웃)만 있는 상태에서 제품 번호를 백으로 보내주고 백에서 해당하는 제품 데이터를 보내면 그것을 받아 html을 구성해서 화면을 내보내준다.
SSR(Server Side Rendering)
반면 서버 사이드 렌더링은 서버에서 html을 조합해 html 파일 자체를 응답하는 방식이다.
페이지 구성 방식
SPA(Single Page Application)
웹사이트에서 이동할 수 있는 여러 페이지가 있지만 html은 단 하나뿐인 형태를 말한다. 유저가 웹사이트에서 다른 페이지로 이동했을 때 물리적으로 페이지가 바뀐 게 아니라 JS가 dom을 수정해서 페이지가 바뀐 것처럼 보인다. 따라서 페이지를 이동할 때(사실은 이동한 것처럼 보이는 거지만) 서버 요청이 아예 없다.
장점
- html을 요청하고 받을 때까지 걸리는 시간을 절약할 수 있으므로 화면 전환이 빠르다.
- 화면 전환이 네이티브 앱처럼 부드럽다.(새로고침 없음. 화면 깜빡임 없음)
단점
- 한 파일 내에서 코드가 길어진다.
- 페이지를 구성하는 데에(페이지 완성까지) 시간이 오래걸린다.
- 최악의 단점! SEO 어려움
검색봇이 html 파일 내 태그와 요소를 긁어서 분석한 뒤, 검색어가 들어왔을 때 알맞은 웹페이지를 검색 결과로 내보내주는 것이 검색엔진의 동작 원리다. 그런데 SPA는 html 파일이 비어있다가 JS가 구성을 한 후에야 내용이 생기니 봇이 그때까지 기다렸다가 내용을 긁지를 못한다.
MPA(Multi Page Application)
물리적으로 페이지마다 파일이 각각 존재하는 형태다. 특성과 장/단점은 SPA와 반대다.
참고) SPA는 CSR, MPA는 SSR라고 생각하기 쉬운데 100% 그렇지는 않다. SPA도 SSR이 될 수 있다.