Angular Server Side Rendering

EO는 Search Engine Optimization(검색 엔진 최적화)의 약어로 사이트를 구글, 네이버, 다음 등등의 검색엔진에 검색이 잘 되도록, 상위에 노출이 되도록 사이트를 수정하는 것을 말합니다. 사이트를 검색엔진에 등록해서 접속자를 늘려야 하는 경우에 필요하며, 그렇지 않는 경우에는 신경쓰지 않아도 됩니다.

그런데 Angular사이트는 사이트의 컨탠츠가 검색엔진에서 아예 검색되지 않습니다. 그 이유는Angular가 SPA로 되어 있어 서버는index.html만 전달할 뿐 모든 컨탠츠가 사이트에 접속한 다음 생성되기 때문입니다. 검색엔진들은 서버에서 생성되는 파일을 수집하기 때문에Angular 사이트는 기본적으로SEO가 아예 불가능합니다.

그래서 해결책 => Server Side Rendering

Angular Universal은 Angular 사이트가 컨탠츠를 표시하지 않는 문제를 해결하기 위해 컨탠츠를 서버에서 만들어 줍니다. 기본 Angular 사이트는 다이나믹 서버가 필요 없지만 Angular Universal을 사용하면 Node JS 서버를 통해 Angular 코드가 실행되고 페이지를 만들어 클라이언트에 제공해 주게 됩니다.

좀 더 자세히 설명하면, Angular Universal를 이용해 서버용 Angular app을 만들 수 있습니다. 결국 하나의Angular 소스코드로 서버용Angular app과 클라이언트용Angular app 두개가 생성되고, 서버로 오는 요청은 서버용Angular app이, 클라이언트로 오는 요청은 클라이언트용Angular app이 처리하게 되는 것입니다.

 

 

Angular Universal을 적용하기 위해 해야 할 일

하나의 소스코드를 가지고 서버용과 클라이언트용 두개의Angular app을 만들게 되므로 발생할 수 있는 문제점이 있습니다.

본래Angular는 브라우저용 앱으로 웹브라우저의 기능들을 사용할 수 있습니다. 예를들어 브라우저의alert을 띄운다든가, 브라우저의local storage에 정보를 저장한다든가 등등.

하지만Angular Universal이 서버를 만들게 되면 해당 기능들이 사용되지 않는 것은 물론이고 에러를 내는 경우가 생깁니다. 

이 문제를 해결하기 위해 소스코드에서 현재 앱이 브라우저용으로 실행되고 있는지 서버용으로 실행되고 있는지를 인식하여 만약 서버용이라면 해당 부분을 실행하지 않도록 해야 합니다.

도움되는 사이트 : https://teamsmiley.github.io/2018/07/29/angular6-i18n-ssr-aot/

출처 : https://www.a-mean-blog.com/ko/blog/Angular-2/검색-엔진-최적화-SEO/Angular-Universal로-SEO-적용하기-상