State of play with Frontend in 2024
# help-with-umbraco
r
Hi, we’ve been doing some research trying to establish what is the best way to proceed with frontend builds with Umbraco at the moment. Just wondering what everyone else is up to? The way we see it, there is the traditional method of building HTML/CSS/JS templates (and any static frameworks etc) and then transforming into cshtml. Or the headless approach of using SPA frameworks React/Next etc – and then requesting the data via an API. Naturally the SPA frameworks are great for when there’s a lot of interaction, just thinking if they’re overkill for brochure-wear sites that are SEO dependant. Has anyone come across of merging the two approaches?
s
Depends on what you are comfortable with. With the delivery API the barrier to "modern" frontends (Next, Nuxt, Astro etc.) has become smaller. We still do frontend straight in cshtml files.
r
Think we’re open to anything really as we use a lot of the tooling across various projects. Theres so much emphasis on page speed from Google it starts to become a question of which way to go will work best in the long run with tried and tested frameworks Foundation/Bootstrap still being used but then have pros and cons, and then SPAs moving certain logic from C# to JS and back and forth
k
I'd be very interested in a best-practice for modern frontend that solves * SEO (and search engines at all) * Umbraco Preview (including the "device simulator") * Umbraco backend APIs (without having to build custom API controllers for everything) * Development experience integrated with Umbraco backend development For our React/Angular + Umbraco apps, we've only found hacky ways to solve the above. And we are always using Umbraco to actually host the application, never as a behind-the-scenes separate API application. I'm guessing you'd like to host the frontend as a completely static deployment in a full-on modern-frontend implementation.
d
@Ric Carey I have been playing around with various frontend options for years including most recently Astro with Umbraco CD-API. I have not come across a project yet where CSHTML doesn't do everything I need… including 100% SEO, Usability, Performance, Accessibility and general Web Standards best practice.
r
yeah im thinking that, I always think right tool for the right job @User
@kdx-perbol interesting points, that’s some of the concerns I can think of too. As you say, hosting a static deploy and backing on to a separate Umbraco is one way of doing it, but was more thinking the close-coupled frontend in Umbraco approach and interesting to see real world drawbacks. I imagine the first thing a client does is hit preview, and then wonder why it doesn’t work haha!
d
One of the nice things about SPA's was view transitions but now the view transition API can work with MPA's I guess that only leaves performance and cost.
r
Yeah deffo. One Thing I just thought of after thinking about what’s been said is with the SPA frameworks, they work really well for an “application” rather than a “website”, because you’re creating a fixed thing that’s administered via Umbraco rather than an ever changing thing. Because you’d need to replicate Umbraco’s features if the editor expected them e.g. custom render implementation of Umbraco Forms, membership, preview, restricted pages etc whereas with cshtml they work out the box.
c
Don't forget, Google are only interested in your page speed so they can get more $/hr out of ad impressions. It's really not for the user's benefit so much 😉
b
@Craig100 page speed also is really small factor in seo, google cares more about experience of users, but if you have ad sense on your site it will boost you because that's money for them 😂
c
Exactly, about the more money for them. The sooner the page loads, the sooner you can load another one. It's money, the user experience is a byproduct.
s
@kdx-perbol if you only want to manage one host, then cshtml is the way to go. SPAs can be good, but it's a completely different setup on top of your Umbraco site, if you care about performance.
b
@skttl you can have one host with SPA as well ;P but yeah to make performent SPA/SSR there is a lot tricks and plays to do ;p
s
Not if you want to do SSR, which you want to do if you want a fast website
b
you still can 🙂
docker apps in azure ;p
or node process with custom routing in .net
s
Cool, does that work in an Umbraco project then?
b
It works with any .net project, why wouldn't it work with umbraco? 🤔
You might need play with routing rules but there is no reason why it wouldn't work
27 Views