리액트의 SPA (SIngle Page Application)

🐕 SPA의 등장 배경

싱글 페이지 어플리케이션...은 전통적인 HTML로 구성된 페이지와 조금 많이 다릅니다.

전통적 방식은 MPA(Multi Page Application)이라고 부르는군요!

 

대표적으로 SPA로 구성된 웹페이지를 떠올려보면 페이스북...정도가 떠오르네요

원래는 사용자가 웹사이트내의 다른 페이지로 이동하면

HTML 파일로 된 페이지의 전체를 다 불러와야 했습니다.

레이아웃이 크게 다르지 않다면 이건 리액트에서 안바꿔도될 애들까지 다 리렌더링하는수준의

비효율성이었을거에요

 

웹이 발전하면서 사용자와 웹 간의 많은 상호작용이 필요했습니다.

하지만 이런 상호작용은 비용이 저렴하지 않아요

따라서 불필요한 렌더와 트래픽은 최대한 피하는게 좋을 것이고

그렇기 때문에 업데이트에 필요한 데이터만 서버에서 전달받아

javascript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식인

SPA가 보편화되는 것!!

---

👻SPA는 한마디로

서버로부터 새로운 페이지를 불러오는게 아니라 현재 페이지를 동적으로 재작성하는 웹사이트

를 말한다.라고 할 수 있다.

---

🥶 SPA를 쓰면 좋은 점

1. 사용자 경험에 아주 좋다..

문서 전체를 불러오지 않고 필요한 부분만 불러와서 동적으로 만들어쓰다보니

불필요한 트래픽이 발생하지않고 효율적이다.

 

2. 서버 또한 불필요한 데이터를 넘겨주면서 생기는 과부하 문제에서 자유로워진다.

 

3. 페이지 로딩 속도가 빠르다.

---

🌞SPA를 쓰면 안 좋은 점

1. Javascript 파일의 크기가 비대해진다.

어쩔 수 없음 동적으로 생성하려면 Javascript를 통해야하고

그러다보면 자바스크립트 파일의 크기가 커질 수 밖에...

2. 첫 화면 로딩 시간이 길어진다.

이것도 어쩔 수 없음... 자바스크립트 파일이 커지는 만큼

그 코드를 읽는 시간도 오래걸림

3.검색엔진 최적화 문제 (SEO)

HTML 문서가 텅 비어있기 때문에 검색엔진이 보기에는

그냥 텅 비어있는 글로밖에 안보이게 된다.

따라서 SPA 방식을 채택해버리면 검색엔진에 노출되기가 힘들다.

3.1 앞서 말한 문제로 인해 크롤링이 어렵다는 문제

3.2 하나의 Meta Data에서 오는 문제

3.3 크롤러에게는 그냥 하나의 페이지로만 인식된다는 것

---

😋SPA의 역사

위키백과님에 따르면 용어의 기원은 명확하지 않아도

개념은 적어도 2003년 초에 논의되었다고 한다.

처음 이거 떠올린 사람은 얼마나 이 문제를 답답해하다가 만든 것일까

문과적사고 ㅈㅅ

---

🤢MPA의 특징

아까 전통적인 웹페이지는 MPA 방식이라고 했습니다.

이 MPA 방식에서는 탭을 이동할 때마다 새로운 HTML 소스들을 매번 불러오다보니

브라우저 창이 깜빡이는 현상이 발생합니다.

어라..? 깜빡이는거... 불쾌하다..?

---

🤮SPA 구현을 위한 라이브러리 ,프레임워크 

대표적으로 React, Vue, Angular가 있습니다.

리액트는 라이브러리냐 프레임워크냐 논란이 많으니 넘어가도록 하겠읍니다.

---

🐶그럼 SPA도 쓰면서 SEO도 잘하고싶으면요??

당연히 이거에 대한 문제도 다 고민을 해보고 대안으로 나온 게 있습니다.

1. SSR(Server Side Rendering)

다들 한번씩은 들어본 그 단어 서버사이드렌더링

서버쪽에서 렌더링을 해준다는 소리죵

SPA는 기본적으로 CSR(Client-side Rendering) 방식으로 구현되지만

크롤링을 위해서라면 SSR 방식으로 사이트를 구축하는게 좋습니다.

SSR에 대해서는 나중에 더 알아봐용

대표적인 SSR 프레임워크로는 Next.js , Nuxt, Angular Universal 이 있습니다.

2.  동적 렌더링(Dynamic Rendering)

만약 SSR 을 적용하지 못하는 상황이라면 동적 렌더링을 통해 SEO할 수 있습니다.

동적 렌더링이란 서버에 요청을 보낸 주체가 사람인지 크롤러인지 판단하고

크롤러에게는 사전에 렌더링 해둔 HTML 버전 페이지를 보여주는 방식이에요!

이 동적 렌더링은 react-helmet, prernder-spa,plugin , prerender.io, puppeteer 등으로 할 수 있음

3. History API

History API는 SPA 방식이 웹사이트에서 주소가 바뀌지 않는다는 문제를 해결해주기 위한 API로

싱글페이지에 주소를 부여하는 기능을 합니다.

---

https://www.ascentkorea.com/seo-for-spa/

SPA의 SEO, 어떻게 해야할까? - 어센트 코리아

위 포스트를 적극 참조하며 적었습니다.

이해했다고 생각할 때가 가장 무서울 때다.