How to use Angular Universal for SSR
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Server-side rendering improves SEO, initial page load performance, and enables proper social media preview cards for Angular applications. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented SSR in production Angular applications throughout my 11 years of framework development. The most reliable approach is using Angular Universal, which renders your application on the server before sending it to the client. This method provides the benefits of SSR while maintaining the full functionality of your Angular app.
Add Angular Universal to your project using the Angular CLI schematic.
ng add @nguniversal/express-engine
Here the Angular CLI adds all necessary files for server-side rendering including a Node.js Express server configuration. The command modifies your angular.json to include server build targets and creates server.ts for the Express server setup. Build both client and server bundles with npm run build:ssr, then start the server with npm run serve:ssr. The server pre-renders pages on request and serves fully-rendered HTML to clients and search engine crawlers.
Best Practice Note:
This is the approach we recommend for CoreUI Angular applications requiring SEO optimization and improved initial load performance.
Always check for platform-specific code using isPlatformBrowser and isPlatformServer to avoid Node.js API usage in browser code, and use TransferState to avoid duplicate HTTP requests between server and client.
