Enhancing the Performance of Asp.net MVC SPA App through Server-Side Rendering

We are aiming to optimize the performance of our single page application built in asp.net mvc. The current framework consists of:

  • Server-side Asp.net mvc communicating with an SQL Database
  • Client-side SPA developed using JS/Html5 + requireJS and KendoUI

Our primary performance concerns revolve around the high communication between the client-side SPA and the server. This includes frequent requests for JS and HTML files needed for the pages, as well as data transactions with the SQL DB through mvc WebApi.

I am contemplating a change in our architecture to reduce the back-and-forth traffic between the client browser and the server. While I have been exploring server-side rendering options, it appears that implementing this into an established application might require significant modifications.

If anyone has suggestions on strategies to address this issue or can recommend any useful libraries, I would greatly appreciate it!

javascriptc#asp.netasp.net-mvcserver-side-rendering

Answer №1

When addressing a performance issue in an application, it's important to consider the usability aspect. Users may perceive slowness as difficulty in completing tasks rather than simply slow loading times. It's crucial to keep this in mind while troubleshooting.

There are two main components to consider: retrieving static files and ajax calls to service endpoints. Handling static files can be managed with tools like WebGrease or BundleConfig without major architectural changes. On the other hand, optimizing api calls requires reviewing the service and application design.

To improve performance, start by analyzing the conversations between the client and server through sequence diagrams. Look for ways to minimize chatter by fetching cacheable data in chunks and using asynchronous patterns for data pushes. By studying applications like Facebook and Trello that perform background data pushes, you can create a smoother user experience.

Ultimately, focus on UX design and observe how users interact with the application firsthand. This will provide valuable insights into any issues they may be facing and help prioritize improvements to enhance overall usability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to assign the value of a hidden element to data being posted

When using jQuery's post() method to call an ajax action that returns JSON data ({"Success": "true" } or {"Success": "false"}), the value of a hidden HTML element is supposed to be set to the Success value in the returned object. However, after settin ...

javascriptjqueryhtmlajaxjson

The CSS styles are failing to be applied to the submit button once it has been

When I have a form with a submit button that triggers a form submission on a PHP page, I want to have an onclick event on the submit button that changes its opacity using JavaScript. The issue I am facing is that after clicking the submit button, the opaci ...

javascriptcss

Search for objects in the array that have the same name, and then combine the values of those matching

I've done some research on various platforms, but haven't come across a solution to my specific issue. I'm looking to extract objects from an array and group them by their names in order to calculate the total hours for each matching object. ...

javascriptarrays

Display an icon within an HTML element when the content inside it exceeds its boundaries

Looking to display a copy to clipboard icon when the content inside a div overflows I am using ngFor to iterate through four divs, and if any of those divs is overflowing, I want to show an icon specific to that respective div. <div *ngFor div of Four ...

javascriptangularoverflowngforangular-ng-if

A customized Javascript application designed specifically for Blackberry Bold users, enabling them to effortlessly choose a country and seamlessly enter a correctly formatted zip code in the designated text field

I am currently developing a mobile web app for Blackberry Bold 9700 & 9650 devices running on the 5.0 browser. The main functionality of the app involves allowing users to select either US or Canada from a drop-down menu. Based on their selection, the ...

javascriptblackberry

Can you choose text in jQuery context by referencing a sibling element context?

In this example, the code appears as follows: <ul> <li><strong>This is a list header.</strong> And I want this text to vanish because it's not a list header!</li> </ul> The corresponding JavaScript code is: $( ...

javascriptjquery

Having trouble displaying HTML UL content conditionally in Reactjs?

My goal is to display a list of items, limited to a maximum of 5 items, with a "more" button that appears conditionally based on the number of items in the list. However, I am encountering an issue where passing in 5 li items causes them to be rendered as ...

javascriptreactjs

What is the best way to retrieve the initial element from an array field obtained through mongoose's populate method?

I am working with a mongodb collection and I am trying to populate a nested field when retrieving data from the database. My goal is to only return specific fields as outlined in the code below. Here is my schema: const hallSchema = new Schema({ hallNam ...

javascriptnode.jsmongodbfindpopulate

Continuously tapping on overlapping slides

I encountered an issue where the slide that I set the opacity to 0 on is still clickable, despite setting pointer events to none. In my slideshow, consisting of 2 slides, clicking on the first slide redirects me to the hyperlink of the second slide. Chec ...

javascripthtmlcss

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

javascriptcssfonts

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

I attempted to insert a PDF into my website using the <embed> tag. Unfortunately, it doesn't seem to be functioning properly in Internet Explorer when the Adobe Reader add-on is disabled. Is there a solution that will allow it to work even if th ...

javascriptjqueryhtmlcss

What is the best way to automatically have the first bar in a column highchart be selected when the page loads?

My highchart consists of a simple column. When I click on any bar in the chart, it gets selected. However, I also want the 1st bar to be selected by default. var chart = $('#container').highcharts(); Upon page load, I have obtained this object. ...

javascriptjqueryhighchartsclick

Frontend utilizing the Next-auth Github Provider for Profile Consumption

After following the official documentation for implementing SSO with the Next-auth Github provider in my App, I encountered an issue where the Client API documentation suggested using useSession() to retrieve session information, but it was not returning t ...

javascriptnode.jsnext.jsnext-auth

Ways to update the component's state externally

I'm new to Next.js (and React) and I'm attempting to update the state of a component from outside the component. Essentially, I am conditionally rendering HTML in the component and have a button inside the component that triggers a function to se ...

javascriptreactjstypescriptnext.js

What could be causing the AngularUI bootstrap datepicker to not appear?

Exploring the popup datepicker demo from angularUI bootstrap, which is embedded in their page and works perfectly. However, when I tried to create a minimal plunker here, the button click does not open the calendar. Any thoughts on what might be causing th ...

javascripthtmlangularjsangular-ui-bootstrap

Utilizing Newtonsoft Json.NET to extract and set only the values from a Json string using the

Is it possible to selectively assign values from a Json string using the Newtonsoft Json.NET deserializer, even if they are default or null values? In the scenario described below, I am trying to identify values that are included in the _values dictionary ...

c#jsonjson.netjson-deserialization

Exploring the process of setting up Jasmine tests for both services and controllers in Angular.js

I have been facing challenges in creating accurate tests for my Angular services and controllers, even though they are functioning correctly. I have searched extensively for a solution to this problem. Below is an example of my controller: angular.module ...

javascriptangularjsjasmine

What steps should I follow to properly set up my tsconfig.json in order to ensure that only the essential files are included when executing npm run build

Introduction I am seeking guidance on how to correctly set up my tsconfig.json file to ensure only the necessary files are included when running npm run build for my projects. I want to avoid any unnecessary files being imported. Query What steps should ...

javascripttypescriptlibrarieshelpertsconfig

Encountering an error with the node module timestampnotes: 'command not recognized'

I am encountering an issue while trying to utilize a npm package called timestamp notes. After executing the following commands: $npm install timestampnotes $timestamp I receive the error message: timestamp:126: command not found: slk Subsequently, I ...

javascriptnode.jsshellnpmread-eval-print-loop

Steps to produce a nuget package incorporating a .cshtml file with a handy helper function:

I've been working on developing a Nuget package for an MVC helper method that I recently created. The helper method is located in a .cshtml file within the App_Code folder of the MVC project structure. I'm following instructions from this artic ...

.netasp.net-mvcasp.net-mvc-4nuget