问题
I am working with Angular 6.1.0. The problem I am trying out the demo on Server Side Rendering via the official doc here.
They say, it's angular Universal meaning:
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal generates static application pages on the server through a process called server-side rendering (SSR). You can easily prepare an app for server-side rendering using the Angular CLI.
Now I have an angular application that has a bunch of screens and some kinda UI flow with user interaction. More of a PWA (Progressive Web App) than a website.
The application contains user log-ins that are completely static and is the landing view. The application contains dynamic views as well like views with charts and views that need calling APIs to fetch data.
The problem I am facing is that even after gzip, --prod & almost all things from a bunch of websites, the time it takes to load the first view (log-in) is around 30-60 seconds.
My questions are:
- Is it advisable to use SSR, to make the static User Log in page Server Rendered for the application to load quickly?
- If Yes, Do I need to port my whole Angular Application to Angular Universal? If Yes, is there any link that I can follow?
回答1:
Server side rendering is often helpful for speeding time to initial render. Generally you shouldn't have to change much to add SSR to an angular application, but any direct access of browser apis / dom will need refactoring to abstractions provided by angular. For example you may need to use Renderer2 object (eg: https://alligator.io/angular/using-renderer2/)
The process for adding SSR is documented pretty well at the link you provided to the official docs, and there are a variety of blog posts around it too - just beware of outdated information.
One thing to bear in mind is that unless you use cookie based authentication you won't be able pre-render pages that require a user to be logged in (as you won't have their session information on the server side)
Another option you could look at for improving the startup time of your application is lazy loading of features / routes. You can more information about this here: https://angular.io/guide/lazy-loading-ngmodules
来源：https://stackoverflow.com/questions/53972946/the-dicision-boundary-between-angular-angular-universal