반갑습니다.
지난번에 SPA에 대해서 글을 쓴 적이 있었는데요. 그 부분에 대해서 좀 더 이어쓰고자 합니다.
SPA Website는 MPA에 비해서 부분 렌더링을 통해, 동적 페이지를 구성할때 유리하다고 했습니다.
아! 그리고 Papago 또한 react로 되어있었습니다.
집에 가면서 왜 다른거 말고, 파파고는 React일까 생각해봤습니다.
이곳은 한글 -> 영어 번역을 해줍니다. 이 과정을 할때마다 페이지를 다시 새로고침하면 어떻겠나요?
으악!! 보기도싫어.. 하지만 수정이 일어나는 부분만 렌더링을 해준다면? 굉장히 깔끔하겠죠?
이것이야 말로 동적인 페이지라서 SPA컨셉이 잘 어울리는 것 같습니다.
또한 인공지능 처리도 서버에서 할텐데, 서버가 바빠 죽겠는데 client에서 대부분을 처리해준다면 더 좋겠죠.
말이 잠깐 옆길로 갔는데, SPA의 장,단점을 알아보고 특히 SEO에 대해서 더 알아보겠습니다.
SPA(Single Page Application)
-> MPA들처럼 서버에서 페이지를 받아올때마다 다시 새로고침 하지 않고, 변동이 있는 부분만 virtual DOM을 이용해 찾아서 re-render하는 웹 어플리케이션,브라우저를 말합니다
장점은 뭐가 있을까요?
1. 전체 페이지를 로드 할 필요가 없습니다. 일부만 바꿔주면 되기에 UX도 좋고, 퍼포먼스도 좋습니다
2. server의 부담이 적습니다. client-side js에서 대부분 처리가 되기 때문입니다
3. 한 번 페이지를 전부 로드하면, 웹 앱처럼 편안하고 빠른 UX를 줄 수 있습니다
4. 페이지를 바꾸지 않고 in-place로 컨텐츠를 변경할 수 있습니다. (1번과 비슷)
단점은 뭐가 있을까요?
1. 한번에 모든 컴포넌트,리소스를 불러오므로 초기 로딩시간이 길게 됩니다.
2. SEO(Search Engine Optimization)이 안됩니다.
3. 2번의 이유때문에 Analytic에 문제가 있습니다
4. history 관리가 힘듭니다. 페이지를 옮겨다니는게 아니고, 한 페이지 내의 state를 되돌려야 하기 때문입니다.
5. 서버가 그냥 DB처럼 데이터만 불러와주는 그런 역할만 합니다
여기서 2,3번에 대해서 잘 이해가 안가실겁니다. 저도 그랬고요
그래서 SEO에 대해서 알아보겠습니다.
SEO(Search Engine Optimization)
SPA는 검색엔진 최적화가 잘 안되어있다고 합니다.
이게 무슨말일까요?
Naver,Google같은 사이트는 제 블로그나 여러 홈페이지들을 Crawling 해서 분석도하고, 노출도 시켜줘야 합니다.
그런데 이러한것들을 할 수 없게(힘들게) 만드는게 SPA의 특징입니다.
현재 Naver는 아직도 SEO가 잘 안되어있습니다(네이버 개발자 포럼 오피셜), 하지만 구글은 되어있습니다.
구글은 어떻게 SPA를 분석할까요?
구글은 Googlebot을 이용해서 분석을 합니다.
이 bot은 search engine에서 searchable index를 생성하고 데이터를 가져옵니다.
따라서 이 bot이 잘 search할 수 있는 환경을 만들어주면, 좀 더 상위에 노출이 될 수 있습니다.
구글Bot은 HTML/CSS를 렌더링하면서 데이터를 얻습니다.
그러면 SPA website처럼 한 페이지에 다 뭉쳐있으면 어떻게 할까요? (다른걸 클릭해야 새로운 컴포넌트가 나올텐데요)
그래서 bot은 SPA에 대해서는 다른 방식을 채택합니다.
WebPage로 가서 js를 실행시킵니다. 그다음 ajax call을 통해서 각 페이지들을 촬영합니다. 페이지당 5~20초면 할 수 있다고 합니다.
이러한 과정으로 SPA에서 crawl을 할 수 있습니다.
따라서 구글은 SEO가 잘 되어있다고 볼 수 있습니다.
기본적으로 Vue, React로 만든 website들은 non-SEO friendly sites라고 합니다.
왜냐고요? 그냥 JS Infra가 잘못되어서 그렇습니다.
구글봇은 HTML/CSS로 되어있는 웹 사이트는 잘 crawling 합니다. 왜냐고요? 렌더링 하기에 좋은 형태니까요. 바로 실행시키면 됩니다.
하지만 js로 되어있는 React는 react component를 HTML/CSS로 변환도 해줘야 합니다.
또 다른 문제는 뭘까요?
Search Engine은 Web site '그 자체'가 아니고 web site page에 rank를 정합니다.
지금 이 블로그에 Ranking이 붙는게 아니고, 지금 쓰는 포스팅들을 ranking에 들게 하는겁니다.
각 페이지들에는 특정 인기있는 keyword들이 숨겨져 있습니다. 따라서 이런것들이 검색엔진 랭킹을 내는데 도움이 됩니다.
그러면 SPA는 어떨까요? 오우.. 한 페이지에 다 몰빵이 되어있네요? 컨텐츠만 갈아끼우면서 보여주니까 그렇습니다.
이러니까 검색엔진이 뭘 랭킹을 내기에 굉장히 힘들다고 볼 수 있습니다.
또한 interlink, 내부에 있는 링크들은(Nav to='~') 다 이동을 해 봐야 합니다. 그 다음에 데이터를 크롤링 해야죠.
이동을 하는 과정들 또한 SEO에 친화적이지 않은 원인 중 하나입니다.
React를 공부하면서, React 비관론자마냥 써놨네요.
그러면 React같은 SPA Websites는 쓰레깁니까?
늘 그렇듯 뭔가 편법은 있습니다. 편법은 좀 야비해보이고..
기술적 진보라고 합시다.
1. SSR (Server Side Rendering)
서버에 데이터를 매핑해놓고 browser에 보여줍니다
서버의 요청에 맞춰서 렌더링을 하는 과정을 말합니다.
이렇게 하면 웹페이지 렌더링을 하는것도 부하가 적습니다(한번에 안해도 되니까요). 또한 크롤러들이 페이지들을 인덱싱 하는데에 도움을 줍니다
가장 먼저 SSR은 virtual-dom에 대해서 수행되어야 합니다. 나중에 이 dom은 HTML string으로 변합니다. 그 string은 페이지에 추가되고, JS 에 의해서 실행되면서 그에 맞는 컨텐츠로 변경됩니다.
CSR,SSR에 대해서 자세하게 다음번에 포스팅 해보도록 해야겠습니다.
솔직히 와닿지 않습니다.
React는 Next.js를 쓰면 SEO friendly site를 제작할 수 있다고 합니다.
2. Pre-Rendering
SSR과 비슷하긴 한데..
라이브 서버에서 렌더링하는 SSR과 달리, Pre-rendering은 프로젝트 배포 전에 렌더링이 일어납니다.
미리 HTML을 만들어두고, 서버에서 요청할때 그에 맞는 HTML로 바꿔주는 것 입니다.
client-side js를 변환해서 dom을 만들지 말고, 미리 만든걸 불러옵니다.
이게 어떻게 SEO에 좋을까 생각했는데, 아까 말했듯 backend가 HTML/CSS면 bot이 crawl하기 좋다고 했는데, 그 원리가 아닐까 생각합니다.
그 외..
3. Slug URL
4. meta-tag
5. internal Linking 등...
----
Reference
https://www.cloudways.com/blog/single-page-website-spa-seo/
