개요

최근 프로젝트에 결제 모듈을 붙일 일이 있었는데

KG 이니시스의 가이드가 최신화되어있지 않은 부분이 있어

React에서 Form을 서버로 넘겨 SSR을 해야했습니다.

가장 어려운 부분 중 하나는 KG 이니시스에서 제공해주는 javascript script를

어떻게 넣어야 의도대로 기능하는가? 에 대한 것이었는데

script태그를 react CRA의 root html에 넣어 해결되었습니다.

다만 이 경우 모든 페이지에 해당 스크립트가 삽입된다는 부분이 있는데...

이런 것도 SPA의 일종인가? 생각해보다

한 번 짚고 넘어가야겠다 라는 생각에 포스팅합니다.

What is SPA?

SPA : Single Page Application.

• 페이지가 하나인 어플리케이션
• 서버가 제공한 하나의 페이지에서 요청된 주소와 컴포넌트에 따라 여러가지 화면을 렌더링한다.

예를 들면 서버의 경우

index.html
home.html
login.html
register.html

등등... 여러 html 파일을 돌아다니며 수 많은 새로고침을 겪지만

React는 react-router를 이용하여 하나의 페이지에서
여러 컴포넌트를 돌아다니는 것으로 이해했습니다.

Example

예시로 제 프로젝트는 다음과 같이 라우팅되고 있습니다.

사용자가 특정 버튼을 누르거나, 혹은 URL을 입력했을 때
해당 URL에 설정된 컴포넌트로 이동합니다.

React 자체에 SPA 기능이 있는 것은 아니고,

위의 캡쳐사진과 같이 react-router 또는 react-router-dom lib이 필요합니다.

SPA의 장점

딱 한 번 렌더링된 이후부터는

필요한 때에만 서버와 통신하여 데이터를 받아오면 됩니다.

전체 페이지의 렌더링이 필요없어 사용자 경험이 개선됩니다.

또한 컴포넌트별 개발을 이용한 생산성 증대는 물론이거니와
개발하기에 따라 주소를 옮겨가며 페이지를 이동하는 것이 아니라

하나의 주소에서 부분적으로 컴포넌트를 바꾸는 것같은 효과를 낼 수 있습니다.

SPA의 단점

위의 캡쳐본과 같이... JS가 매우 방대합니다.

또한 JS 파일을 한 번에 받아오기 때문에 초기 구동 속도가 느립니다.

Webpack의 code splitting으로 해결 가능하다고 합니다.

보안 이슈가 있습니다.

최대한 클라이언트에 비즈니스 로직을 최소화하는 것이 방법이 될 수 있습니다.

검색 엔진 최적화가 어렵습니다.

이 부분은 SSR로 해결가능하다고 합니다만,
모르는 부분이 있어 추가 업데이트가 필요합니다.

검색엔진 최적화(SEO)에 대해

구글은 JS 엔진이 있어 CSR이든 SSR이든 상관없지만

네이버와 다음과 같은 포털은 엔진이 없어 빈 HTML로 인식하므로

SEO에 대한 문제가 발생합니다.

이에 대해 해결하는 것이

React : Next.js
Vue : Nuxt.js

위의 두 가지가 SSR with Hydration 기법으로 SEO를 지원합니다.

Next...Nuxt... 공부한 적이 없어 패스해보고

SPA와 SEO에 대해서, 경험에 비추어 생각해보면

예를 들면 메인 페이지 또는 핵심 키워드나 이미지가 들어간 페이지를

SSR로 돌려서 검색엔진에 노출시켜 접근을 유도하는 방식은 유효할까? 생각해봅니다.

마무리

다음은 CSR, SSR에 대한 포스팅 예정입니다.