Today our frontend are built with a mix of razor and react, with a mix of jquery in it (I know). Some part of the react is serverside rendered with react.net but not all. We are also on the .net 4 stack and not .net 5/6
Today we get poor performance when going through googles pagespeed and the higher ups blame that for poor sales (I don't think thats the reason at all, but oh well).
But for that reason we are allowed to rebuild the frontend as the code is 2-4 years and hard to upgrade to newest packages as that haven't been maintained
As a backender I would have done it like this:
But the frontenders in my team doesn't agree and want to keep using react, but I'm not sure how to server side render react and get it high performing in .net 5/6 and DXP?
So thats bring me to my question. If you could start from scratch, hosting in DXP and using newest Optmizely commerce (.net 5/6), how would you build the frontend?
What are the primary detractors in Google PageSpeed?
We find ourselves using Blazor components in a lot of places where we would previously have used something like React or Vue. However, that may obviously require additional skillsets among the frontend developers (using C#/Razor rather than JS/HTML).
Not totaly sure what you ask for, but here is a screenshot of the report
Anyway, thats a little of topic as my question is more general
I liked the Blazor idea, but I can't force the frontenders to learn that :/
I'm considering just making epi headless with url like api.domain.com and have the frontend seperate. Just to make the frontends happy and then they can use react with nextjs
HTML from the server and closely connected to the SQL Server database. Work with performance hat on from the start. Use dotTrace, measure and find slow places regularly.
Vanilla JS or Hotwire.
Add loading="lazy" to most images.
Have a strict CSP and connect its policies to the consent functionality so that you limit any 3rd party resources and make all new 3rd parties go through a process to get on the site.
Make the consent dialog not block the site, check https://www.gov.uk/ as an example.
Wow! I'd love to get my hands on this. Second Johan's suggestions.
You'll want to lazy load images, set async on your js / css. Also make sure you are bundling correctly. You can also run your razor partials async and defer any long running creation of html to individual controllers.
I would get your team to look at caching as a first pass. Browser caching, output caching, caching complex menus or contentloader reads in episerver cache (ISyncronizedObjectInstanceCache), caching any 3rd party responses. Did I mention caching?
OK thank you very much for this information and you can also contact help desk for further assistance