Enabling Google to crawl my Nuxt app for superior SEO
This is where the power of Nuxt comes in. Between a static HTML and a single-page application, Nuxt allows the "best of both worlds" because it pre-renders all pages to include the necessary HTML. Nuxt pre-renders each page server-side at the time of generation by querying the Prismic API to get my website's most up-to-date information, storing those records in the browser, and ultimately displaying the data in a variety of view states to the user depending on what route they're accessing. That generation is happening on Netlify anytime I edit my website's content on Prismic or commit changes to the app's GitHub repository, so the generated content is always the latest. Once the page loads, any further navigation by the user results in the Vue app taking control of the browser, as opposed to navigating from static file to static file. The result is a much faster and seamless experience, as the app's state can change much quicker and with less resources than a new page load. And all of this happens seamlessly.
With Nuxt generating every possible route for my app, next I had to ensure the right metadata appeared on each type of page. I did this using vue-meta, which is included in Nuxt. I was able to define top-level metadata properties on the actual app, and pages downstream (children components) also have those properties defined on them. The app uses the most specific metadata it can find for each route and component, so you can define something app-wide and then overwrite it only where necessary by defining the property on a child. Using this concept, I sprinkled properties in the <head> element for each part of my website. There was even more metadata available to pack into my individual blog posts, so more fields were applied to those.
As a result, my web app is not only blazing fast (and acing every Google Lighthouse audit currently), but it's packed with contextual metadata and abiding by best SEO practices. And best of all, Google understands my site as well as any reader. Welcome to the future!