Very few agencies concentrate their web development efforts on overall organizational marketing strategies. To increase your search result ranking, your technical strategy should include some best practices for optimal page load time and visibility to crawlers.
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.
Download our "Enabling SSR With Angular Universal The Right Way" one-pager here
Problems with Client-Side Rendering
- 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.
Dive deeper: 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.
Semrush vs Ahrefs: Detailed Comparison Chart - 2023 Report
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:
- json (build options)
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