Technologies for the front end when SEO matters
What technologies or tools do you use when you have a backend as rest API and need frontend to be SEO friendly?
Is it good to use something like NextJS or NuxtJS? are these enough mature and complete to use for a real project?
Or any other ideas?
Yeah, both Nuxt and Next are mature enough.
But you should pay close attention to performance, it's really easy to make your site non-performant. Some things that help:
Test your page on Page Insights. Especially the new web vitals metric, it will be a new rank factor starting in 2021.
Avoid UI frameworks like Vuetify and MaterialUI. They’re great don't get me wrong, but not so much for public SEO-sensitive pages as they add a lot of bloat.
Pay attention to your Vendor size. Check it using webpack-bundle-analyzer and adjust accordingly.
Lazy load images using the new Intersection API. This is huge for performance, even for server-rendered websites.
Be careful with Icon libraries. Load only the icons that you’ll use, don't load the whole FontAwesome library for example.
Lazy Hydrate or don’t Hydrate at all parts of your site. You can do it using libraries like VueLazyHydrate
Async load components. Some components are not necessary right away because they’re not immediate on-screen or because they’re secondary.
So yeah, It's always easy to make server-side rendered website. But let's be honest they suck, it's a much better experience navigating on a website that becomes a SPA after the first load.
When rendering on the server side, would using plain HTML templating with some vanilla javascript be a better and more maintainable option than adding a huge load of what these fancy frameworks bring to the table? Genuine question.
I do agree with @GiancarlloRojas. There is a reason why frameworks exist, and unless your app is super performance-critical, you will better off using frameworks. I'm not saying vanillaJS is bad all the time, but the cases where vanillaJS works well is when there is so little interaction or your app is doing super heavy stuff.
No, Vanilla Javascript is very hard to maintain if your UI needs interactivity, you would end up building a framework anyway. I still have nightmares when I think about my first job maintaining a huge PHP + VanillaJS application.
Many applications don't need that much interactivity though, in these cases it's fine, but you would still benefit from a micro-library like StimulusJS in my opinion.
For images just use the
loading="lazy"option for<img>tags. It is supported by chrome and Firefox nowadays i believethanks for the tips. some are new and I should read about them.
about UI frameworks, even la-carte in vuetify doesn't solve the problem?
I have no idea how certain frameworks render their content, but SEO-wise, server-side rendered content is ALWAYS the most straightforward solution. Something where a super simple crawler can visit your site and understand what's going on.
For SEO-heavy sites (frontpage, blog, landing pages) I would see if you can go with a static site of some sort.
This comment was deleted 3 years ago
I use nuxt.js for the frontend and python apis for backend. it's a decent framework. I've not ran into issues with this setup and SEO's pretty awesome.
good to hear that I can trust nuxt.js
Nuxt is fantastic - I’ve built a few sites on it in the past few months. And the community is very involved as well.
Partial/Lazy Hydration is key. When building out elderguide.com we tested Next/Nuxt/Gatsby and 3 others and finally resorted to building our own framework because we wanted static export that didn't take 3+ hours to generate a ~20k page site.
We open sourced our solution here: https://github.com/Elderjs/elderjs (shameless plug)
Overall @GiancarlloRojas nails it. We focused hard on partial hydration, intersection observer everywhere, and avoiding UI frameworks. We also went with Svelte because of the tiny bundle sizes.
How come you didn't go for Hugo?
We wanted a node.js based solution.
While it completely depends on the project itself, one thing that matters for both user experience and SEO, which go hand-in-hand is page speed.
The less JavaScript you have to download and parse the better. For a big app where you need more help with state management, sure you might want to reach for a framework, but most of the time people use frameworks when it's just totally unnecessary and vanilla JS would work just fine.
The browser engine takes a lot longer to parse JavaScript than it does HTML/CSS or to download an image for instance.
So lower the amount of JS you're using if possible, even going for Preact or Svelte if you still want to use a framework.
Use a build system of some sort to make sure you're optimising your images and if possible generate modern formats like webp for browsers that can support it.
Beyond that good SEO has a lot to do with consistently producing high-quality relevant content and making sure that content is well-structured and easily accessible, so I'd suggest not getting too caught up in tooling, just make it easy to manage your content and produce good meta and schema data.
That's also really just bearly touching on start of technical SEO, it's still extremely important to focus on building quality backlinks.
Yes.
Is probably use what I am familiar with, which is create a classic MVC app serving pages using express or something. I have not been motivated to learn nextjs. It seems like it’s a one company run project and I am not sure I like the idea - for a genuine web app use a SPA otherwise “render” using an MVC framework on the backend and sprinkle in some JS for validation as needed.