밸!하!
밸로그여러분 안녕하세요!
오늘의 주제는 바로 SPA vs MPA 그리고 SEO(검색엔진 최적화)입니다!
먼저 SPA와MPA가 무엇일까요??
바로 알아볼까요??
SPA
SPA는 Single Page Application의 줄입말로 한개의 페이지로 구성된 애플리 케이션을 의미합니다
SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 처음 랜더링이 될때 한번에 다운로드를 하게됩니다!
이후 새로운 페이지또는 동적리소스가 필요할때마다 랜더링을 하게되는데요!
이 SPA의 방식을 바로 CSR 즉 Client Side Rendering이라고 말합니다!
그럼 이러한 방식의 장점은 무엇일까요??
SPA의 장점
-good UX
좋은사용자 경험입니다!
그이유는 처음에 모든 정적 데이터들을 가지고 오다보니
전체페이지를 업데이트를 할필요가 없어 빠르게 화면을 보여줄수있습니다
이는 웹사이트의 성능과 직결되기에 정말 중요한데요!
또한 처음 랜더링을 할때 다 가지고 오다보니
전체 페이지를 업로드하면서 발생하는 깜박거림이 없어집니다
게다가 페이지의 일부만 바뀌는 것이기때문에 어플리케이션의 반응이 훨씬 빠릅니다!
개발하는데 있어서의 장점은
서버의 사용없이도 개발을 시작할수있습니다 또한 크롬안에서 디버깅을 할수있게되는데요
이를 통해서 소스코드로 돌아가지 않더라도 어떤것이 문제인지 바로 알수있습니다
마지막으로 로컬스토리지를 효과적으로 캐시할수있습니다
SPA의 경우 서버에게 정적리소스를 한번만요청을 합니다
그리고 받은 데이터는 전부 저장해놓습니다 즉 오프라인상황이 되더라도 사용이 가능하다는겁니다!
정말 엄청난 장점이죠!
그럼 장점만 있는걸까요??
아닙니다! 단점도있는데요
SPA의 단점
-처음에 모든 페이지를 불러오다보니 초기화면이 보이는 속도 즉 초기구동속도가 느립니다
그러다 보니 SEO(하단에 설명)측면에서 분리한 부분이 있다는것입니다
이렇게 SPA의 장점과 단점에대해서 알아봤는데요!
이번엔
MPA에 대해서 알아볼수있도록 하겠습니다
MPA란
Multiple Page Apllication의 줄임말로 SPA와는 다르게 여러개의 페이지로 구성된 애플리케이션입니다!
SPA와의 차이점은 MPA는 새로운 페이지를 요청할떄마다 정적리소스가 다운이된다는겁니다!
즉 새로 다운로드되기때문에 전체페이지를 다시 렌더링을 하게 되는데요
정적인 요소 즉 HTML,이미지등의 파일들이 전부 다운로드되고 다시렌더링이 됩니다!
그럼 이러한 방식의 장점은 무엇일까요?>
MPA의 장점
바로 SEO관점에 유리하다는겁니다!
왜그럴까요?
MPA는 완성된 형태의 HTML파일을 서버로부터 전달을 받습니다 그렇기 떄문에 검색엔진이 페이지를 크롤링하기에 적합하여 최적화됩니다!
MPA의 단점
새로운 페이지들이 이동하면 화면이 깜빡이게 됩니다
왜냐하면 새로운 값을 가져올때마다 전체페이지를 다시렌더링하기 때문입니다!
또한
프론트엔드와 백엔드가 밀접하게 연관되어있습니다!
서로의 의존성이 높아 개발의 효율이 떨어진다는 겁니다!
자 이렇게 MPA와 SPA에 대해서 알아보았는데요
중간중간 SEO에 대한 이야기가 나왔었습니다
그럼 SEO가 도대체 무엇일까요??
SEO란
SEO를 보기위해
저희는 랜더링 방식에 대해서 알아볼 예정입니다
첫번쨰로
SSR
입니다
SSR은 서버사이드렌더링의 줄임말입니다
앞서 설명드렸던 MPA와 같이
페이지를 이동할떄마다 새로운 페이지를 요청하고 모든 템플릿은 서버연산을 통해서 렌더링하고 완성된 페이지 형태로 응답을 하게 됩니다
이 과정이 바로 서버사이드 렌더링입니다!
그다음은
CSR
입니다
CSR은 클라이언트 사이드 렌더링의 줄임말로써
최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식입니다!
앞서 이야기드렸던 SPA가 여기에 해당하는데요
주의할점은 모든 SPA가 CSR은 아니라는것을 알고가주시면 좋을것같습니다
자 이렇게 알아본이유는
결국 SEO를 설명하기 위함인데요
SEO는
검색엔진최적화의 줄임말입니다
ㅁ라 그대로 웹사이트가 검색결과에 더 잘보이도록 최적화하는 과정인데요
이것을 흔히 검색링크 개선이라고도 합니다
검색 엔진은 웹을 크롤링 (en-US)하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.
검색 엔진은 일부 SEO 가이드라인을 제공하긴 하지만 대형 검색 엔진의 경우 결과 랭킹은 영업 비밀로 취급합니다. 따라서 SEO는 검색 엔진의 공식 가이드라인에 더해 경험적인 지식, 논문과 특허 등에서 가져온 이론적 지식을 결합한 과정입니다.
SEO는 세 가지 큰 방향으로 나눌 수 있습니다.
기술적,콘텐츠작성,인기도
총 3가지인데요
기술적인 측면으로는
마크업시 SEMANTIC tag를 사용하게 된다면 점수에 가산점이 있습니다!
콘텐츠 작성
방문자 층에 맞는 언어로 콘텐츠를 작성합니다
마지막으로
인기도입니다
많은 링크가 있다면 더많은 트래픽을 받습니다
자 오늘은 이렇게 여러가지를 알아보았는데
오늘도 지식을 한개 쌓아가는 시간이었습니다
그럼 밸~바!
