About Eliran Eliassy

Eliran is an experienced FE developer, specialised in B2C applications
FE developer & trainer @ 500Tech

Co-Organiser @ AngularUP Annual Conference 
Co-Organiser and manager @ Angular-IL meetup

— WORKSHOP —

Server-Side Rendering of Angular Apps

Abstract

In this workshop Eliran will go through the Angular solution for Server Side Rendering, what’re the costs, who really need it, what strategies and techniques you want to use when serving your app from the server and most important – how easy it became with the new versions of Angular.

Agenda

• Part 1: The problem:
  • SPA vs MPA
  • Why SPA isn’t working well with SEO
  • What performance issues SPA have?
  • How social scrapers work? and why SPA isn’t working well with them as well?
• Part 2: Angular Universal to the rescue – Hands-on
  • Build the basic app
  • Get to know – Angular Universal, SSR (Server side rendering) tool for Angular.
  • Add Universal to our project using Angular CLI
  • Add our first SSR app – using the renderModuleFactory
  • SSR supporting multiple routes
  • Use TypeScript to render your page on the server
• Part 3: Use the ngUniversal
  • Use the ngUniversal express engine to gain easy setup with Angular Universal
• Part 4: Resolve SEO and Social scrappers issues
  • Add dynamic meta tags and titles to set up the page to get crawled by SEO and Social scrapers
• Part 5: Performance issues
  • Let’s measure the performance once we render our app in the server
  • How we can improve our loading performance?
    • Implement the app shall
    • Get to know the state transfer API.
• Part 6: Deployment:
• Deploy the app to Google function
• Part 7: Alternatives:
  • Get to know – Rendertron, alternative tool for SSR.

Objectives

The main goal of this workshop is to introduce the problem in Angular application in terms of SEO and loading performance and how we can solve it using Angular Universal.

Target audience

The target audience includes Angular developers, FE developers and any of whom interested in Server side rendering techniques.

Technical requirements

• Installations:
  • Git
  • NPM
  • Angular CLI
  • IDE for developing FE(e.g: Vscode, WebStorm)
• Technical knowledge:
  • Basic understanding of FE development
  • Angular 2+, TypeScript
  • Node (optional)