What is the proper way to load different sections of my site asynchronously? [on hold]

Question

I have an application that is written using C# on the top of ASP.NET Core 2.2 framework.

I am trying to figure out the best way to load different sections of my website asynchronously to improve page load performance.

For example, I have a page the displays info about an item which is the main content. Then on the side, I am showing related products that are nice to have, but are not required for the page to load and should not impact the TTFB .

I thought, instead of loading everything at once, I should be loading the "related" product asynchronously to increase performance. I am trying to figure out what is the proper way to load the related products.

My first thought is to using ajax request. I could use jQuery/vanilla Js to make an async call to another action that returns partial HTML code and then I would inject that code into my main page. I am not sure if returning partial HTML is a recommended approach or not.

Is using ajax request the only option for rendering different sections of the website on different threads/HTTP-request? Is there another way (possibly use C# ) to render the different sections of the website without impacting the TTFB and improve the user experience?

Answer 1

Maybe you should try to use some kind of front-end framework? This is well known practise used in a wide range of projects. You can try to use:

• Angular: https://www.toptal.com/angular/angular-5-asp-net-core
• React: https://reactjs.net/tutorials/aspnetcore.html
• VueJs: https://hackernoon.com/how-to-integrate-vue-js-typescript-with-asp-net-core-web-application-6e9aa6f2bcef

Personally I m using Vue.js, because of its component-driven style, and of cours of its speed (Which is going to be far better with vue.js 3.0)

Of course, using jQuery is good idea, but it have one big disadvantege: - amount of code you need to write.

Hope my answer helped you, at least, just a bit.