프론트엔드 개발 첫걸음이라는 책을 읽다가 초반 즈음 흥미로운 내용이 있어 잊어버리기 전에 정리를 해두려고 합니다. 간략하고 얕은 지식이니 참고만 해주시면 감사하겠습니다.
SPA에서 화면 렌더링과 문제점
SPA는 고전 웹어플리케이션과 달리 서버로 요청시 완성된 HTML을 받는 형식이 아니라 비어있는 기본 HTML만을 응답받게 되고 그 이후 UI와 관련된 자바스크립트 프레임워크(vue.js, react, Angular)를 통해 화면을 완성하게 됩니다.
그렇다 보니 문제점이 발생하게 되는데, 구글같은 검색엔진이나 크롤러, 카카오톡이나 페이스북같은곳에서 링크를 보냈을때 생성되는 SNS 썸네일등에서 비어있는 화면이 보인다는점입니다.
이들은 URL에 요청을 보냈을때 응답받은 내용을 인덱싱하여 사용할 것인데, 앞서 말했듯 SPA 특성상 최초 URL 요청시 응답받는 페이지는 비어있는 페이지입니다. 실질적인 화면 구성은 서버에서 보내온 HTML로 하는것이 아니라 그 이후 브라우저에서 실행되는 자바스크립트가 하기 때문이지요.
대응방법
SPA 프레임워크에서 이러한 문제점을 알고 있기 때문에 대응 방법을 만들어 두었습니다. 일단 구글검색엔진은 어떤 방법인지는 모르겠으나 자체적으로 인덱싱할때 SPA 페이지도 완성된째로 인덱싱을 수행합니다.(정말 갓구글인것같습니다)
구글을 제외하고 첫번째 대응방법으로는 SPA프레임워크의 경우 자체적으로 제공하는 SSR(Server Side Rendering) 기능을 이용하는것입니다. 즉 크롤러 등의 요청인 경우 고전적인 일반 웹어플리케이션처럼 서버에서 모든 화면을 완성하여 최종본 HTML을 응답해주는것입니다.
이를 위한것이 React의 ReactDOMServer, Vue.js의 vue-server-renderer, Angular의 Angular Universal이 있습니다. 자세한 동작방식은 이후에 SPA에 대해 공부하면서 알아보고 포스팅할 예정입니다.
대표적으로 vue.js의 다음 링크를 참고합니다.
두번째 대응방법으로는 프리 렌더링입니다. 프리렌더링은 말그래도 미리 렌더링하는 것으로 크롤러가 서버에 요청을 하는 경우 서버측에서 가상브라우저에게 렌더링을 위임하여 렌더링한 결과를 저장해두고 이것을 응답하는 방식입니다. 프리렌더링을 제공하는 서비스로는 Prerender가 있습니다.
'웹[Web]' 카테고리의 다른 글
| [HTTP] HTTP 헤더 중 Content-Type 헤더와 Accept 헤더의 용도와 차이점 (0) | 2019.03.28 |
|---|---|
| [HTTP] HTTPS 사용시 혼합 콘텐츠(Mixed Content) 및 안전하지 않은 콘텐츠에 대한 설명 (0) | 2019.01.23 |
| [HTTP] HTTPS란? 비전공자를 위한 HTTPS 개념 알아보기 (3) | 2018.09.12 |
| [HTTP] HTTP 쿠키란(Cookie)? 쿠키 등장 배경 그리고 쿠키와 세션의 차이점. (3) | 2018.09.11 |
| JSON이란? JSON 규칙 (0) | 2018.03.24 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그