Enabling Server Side Rendering With Angular Universal The Right Way

Why Transcend Digital does NOT recommend Client-Side rendering

Websites are ranked in Google and Bing search results based on metrics in algorithms where bot crawlers identify the best content to showcase for a particular search. The search engine optimization strategies and aspects of web pages will boost the overall website’s ranking in the search engine. According to Google, one such metric is page load time. Faster page load time is directly correlated to users spending more time on the page.

For most client-side rendering websites or apps, the browser makes a request to the server, which responds with the HTML file without content until the browser fetches all elements. This means that the user sees a blank page until the content is fetched and compiled before it is displayed.

CSR uses the slow initial load to help the subsequent pages to load fast. CSR communicates with the server only for run-time data. For most single-page applications, it ultimately puts the web pages lower in search page results.

Further Reading:

• Download our "Enabling SSR With Angular Universal The Right Way" one-pager here

Problems with Client-Side Rendering

• Search engines don’t honor rendering JavaScript: This was true from our audit with PMD Beauty, Botox.com, and perniaspopupshop.com. An angular single-page application will mostly render an empty page when a user loads a product page URL the first time and the only special element is an app-root element. The actual content for the product page comes via the js into this root element. Though the google crawler tries its best, it is not perfect. Majority of the content displayed in JavaScript is not noticed by the web crawler and this reduces its ranking in the search results.
• Load time of the first meaningful page: Research shows that most single page application with CSR takes 2 to 4 seconds to load the first meaningful page. In transcend digital, we strive to hit our KPU of 1-2 seconds per page. This is important for user retention.
• Site preview: Site and page previews helps convert user product page or homepage. When our brands share a product link on blogs or social media platforms, a good preview helps in conversion. Since the source code of CSR pages for single-page applications take longer to load as there is no content in the root source code, the preview is not generated fast enough, and this affects conversion.

Why Server Side Rendering is better for SEO

Dynamic loading of the root element on the server will solve most problems for SEO. This was our solution for our brands that use angular headless commerce solutions. Now with SSR , users and search engines can see meaningful content and site preview. After angular is loaded and takes over the page, the app will work as expected. This reduces overall load time and helps the crawler read the site better.

With Server Side Rendering, when the user clicks on a link, the browser makes a call to the server, and the server provides a rendered website to the client. The client's Javascript bundle then allows the single-page framework to operate and render the full page.

Further Reading:

• 3 Reasons CSR for Single Page Applications (SPA) is the Weakest Link

Enable SSR with Angular Universal

The Angular Universal technology renders Angular applications on the server. (Reference: https://angular.io/guide/universal). We can get it with the @angular/platform-server package.

An Angular application executes in the browser, renders pages in the DOM in response to user requests from the browser. Angular Universal runs on the server, generating static application pages that get rendered on the client-side. This reduces overall load time, and the user views the application elements before it becomes 100% interactive. This makes it accessible to search engines and third-party social media services.

• AppModule imports BrowserModule which is then used to run the app in the browser.
• Configure AppModule in the main.ts file which renders the app.
• For server-side rendering, we load the whole application in AppServerModule. This module imports native ServerModule from angular.main.server.ts which will be created as the entry point for the server build.

 Basically, we will be generating two builds - one for the browser and one for the server.

Setting up Angular Universal

To add Angular Universal to your app:

ng add @nguniversal/express-engine/clientProject

The above command adds/modifies the below files:

• ts
• server.ts
• ts
• json (build options)
• json
• server.json

Further Reading:

• To learn more about how SSR impacts page load times, download our PMD Beauty case-study here

Building the App

Next step, we build the client and server for the app. The build process is different for both client and server, as both these platforms are different. Once the build is over, we can see two sub-folders for client and server under the ‘dist’ folder.

 Next thing we need is a Node.js server to perform the below functions:

• Pre-render the application and deliver the generated HTML whenever the request comes in (https://angular.io/guide/prerendering)
• Provide application bundles via the webserver

 Steps for setting up the server code

• Set up the Express server
• Serve the files statically from the browser folder.

Set up Express engine to render HTML

• Register ngExpressEngine, the engine that is a script which tells Express how to render the specific HTML. (Register the ‘view’ engine called ‘html’).
• Tell Express to use the engine whenever the request comes in and when something needs to be rendered. This will be the route. (Not every route can be handled by serving it statically).

To learn on the best application interface practices and extensive services for your website and application building needs, head over to transcenddigital.com