서버 사이드 렌더링 (Server-side Rendering, SSR): Angular Universal

 

 Angular Universal은 Angular 애플리케이션을 서버에서 실행하는 테크닉입니다.

일반적으로 Angular 애플리케이션은 브라우저 에서 실행됩니다. DOM에 페이지가 렌더링되고 사용자의 동작에 반응하는 것도 모두 브라우저에서 이루어집니다. 하지만 이와 다르게 Angular Universal은 서버 에 미리 정적 으로 생성해둔 애플리케이션을 클라이언트가 실행하고, 그 이후에 클라이언트에서 앱을 다시 부트스트랩하는 테크닉입니다.

 이 방식을 사용하면 애플리케이션을 좀 더 빠르게 실행할 수 있기 때문에 사용자가 보는 애플리케이션 화면도 빠르게 띄울 수 있습니다.

 

 

서버사이드 랜더링이 필요한 이유?

1. 검색 엔진 최적화(SEO)를 통해 웹 크롤러에 대응하기 위해
2. 모바일 장비와 저사양 장비에서 동작하는 성능을 끌어올리기 위해
3. 사용자에게 유효한 첫 페이지를 빠르게 표시하기 위해

 

동작원리

Universal 웹 서버는 static HTML 페이지를 template 엔진에 랜더링 하며, 브라우저의 도움 없이 DOM, XMLHttpRequest 또는 low-level 을 서버에서 처리할 수 있습니다.

서버는 클라이언트의 요청을 ngExpressEngine에 전달하고 renderModuleFactory() 함수를 통해 template 태그의 내용을 랜더링하여 client에 전달합니다.

ng add @nguniversal/express-engine    아래의 파일들이 만들어지고 수정되니다. src/     index.html app web page     main.ts bootstrapper for client app       main.server.ts * bootstrapper for server app 서버에서 boostrap 하기 위한 코드     style.css styles for the app app/ ... application code     app.server.module.ts * server-side application module     server.ts * express web server 노드 서버를 가동하는 코드 이며, express 엔진을 호출     tsconfig.json TypeScript client configuration     tsconfig.app.json TypeScript client configuration 클라이언트의 설정     tsconfig.server.json * TypeScript server configuration 서버의 설정     tsconfig.spec.json TypeScript spec configuration     package.json npm configuration

 

 

유의점

1. 랜더링 시점이 클라이언트가 아닌 서버로 변경되었으므로, 브라우저 명령을 더 이상 사용할 수 없습니다.
2. 즉, window, document, navigator, location은 더 이상 사용할 수 없습니다.

3. 이를 해결하기 위해 Angular에서는 Injectable한 Location, DOCUMENT와 같은 몇 가지 API를 제공합니다. (더 정확히는 platform의 상태가 server 일 때만 사용 불가 합니다. 더 자세한 설명은 Angular Universal Platform 을 확인하시기 바랍니다.)

4. 마찬가지로 클릭이나 유저의 이벤트 또한 서버 사이드에서는 처리할 수 없으므로 이를 처리할 랜더링 대상을 결정해야 하며, 반드시 Routing 기능을 구현하여야 합니다.

5. 링크는 반드시 절대 링크 값을 사용해야 합니다. Angular 공식 사이트에서는 아래의 코드를 가이드로 제시하고 있습니다.

 

서버 시작하기

npm run build:ssr && npm run serve:ssr

 

 

 

 

 

 

참고

https://angular.kr/guide/universal

불러오는 중입니다...

https://ksrae.github.io/angular/angular-universal/

Angular Universal