Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
3 likes2,544 views
This document discusses server-side rendering (SSR) using Angular 2 and AWS Lambda. It begins with an overview of SSR and how it improves search engine optimization (SEO) and page load times compared to single-page applications (SPAs). It then covers Angular Universal for SSR with Angular 2, including using Node.js to render the app on the server. Finally, it proposes using AWS Lambda for SSR, caching rendered HTML and calling the Lambda function via API Gateway to improve performance. Code examples of rendering an Angular 2 app with Lambda are provided in the angular2-universal-render GitHub repository.
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
- 1. Angular 2 + AWS Lambda 2016. 11. 28. dots. AKIRA-MIYAKE
- 2. • AKIRA-MIYAKE • Blog: http://dream-of-electric-cat.hatenablog.com/ • Twitter: @DreamOfEleCat • GitHub: https://github.com/AKIRA-MIYAKE • + • UI JavaScript/HTML/CSS • Docker CI AWS • iOS
- 3. Agenda 1. 2. Angular2 3.
- 4. 1. (SSR)
- 5. • = HTML JS DOM : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
- 6. Single-Page Application(SPA) • JS • JS DOM • JS : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
- 7. • 3 → 40% • → 79% • → 52% • → 44% • 1 16% : https://blog.kissmetrics.com/loading-time/?wide=1
- 8. SEO • Googlebot • • Promise, Service Worker, Fetch API, Local Storage, ES6/ES2015 • onLoad • SPA : https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
- 9. Googlebot • • raw HTML • SPA URL raw HTML • : https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
- 10. SSR • Google Search Console Googlebot • • Pre-Rendering = SSR Googlebot
- 11. 2. Angular2 SSR
- 12. SSR • • • JS • PhantomJS, CasperJS • prerender.io • Virtual DOM • Virtual DOM JS • DOM HTML • Angular2, React, Vue 2.0
- 13. 2. Angular2 SSR
- 14. Angular Universal • https://github.com/angular/universal • Universal Angular • Node.js ASP.NET
- 15. Angular Universal ServicesComponents … AppModule for Browser AppModule for Node platformBrowserDynamic() .bootstrapModule() platformUniversalDynamic() .serializeModule() DOM HTML UniversalModule for Browser UniversalModule for Node Inject Modules Inject Modules Browser Server Angular Application
- 16. 3. SSR
- 17. • AWS Lambda Azure Functions Google Cloud Functions • Function-as-a-Service(FaaS) • FaaS : https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
- 18. • • •
- 19. AWS
- 20. • • Googlebot
- 21. • Lambda • •
- 22. Angular SPA Lambda • • HTTP • HTML S3 • • Cache
- 23. React • SSR • Isomorphic Node • Flux • Lambda • URL Lambda
- 25. • SPA SEO • Angular2 Angular Universal • • SSR SPA
- 26. angular2-universal-render • https://github.com/AKIRA-MIYAKE/angular2-universal- render • Lambda npm • express-engine • Cache