N
Nuxtdreamland

SPA w/ SEO or SSG + nitro?

i'm creating a SPA and i've opted to use nuxt because of the ease of development (especially for the frontend devs in my team, that automatically get an up to date server when they pull) my expectation was that the data from useSeoMeta from app.vue would be included in the build even with ssr: false, but apparently all seo meta data is disregarded in that case (https://stackoverflow.com/questions/74070241/what-is-the-difference-between-ssrfalse-vs-targetstatic-in-nuxtjs) so i've tried to use SSG and running nitro separately, but i keep running into problems.. i've been reading about it the entire afternoon and evening. it seems like such a basic usecase, but i can't find anything about it. i feel like i'm missing something obvious. any pointers appreciated
Stack Overflow
What is the difference between 'ssr:false' vs 'target:static' in Nu...
To generate a static site using NuxtJS, it seems there are 2 options to set: ssr:false and target:static inside the NuxtJS config file (nuxt.config.js) which practically do the sme thing? Why both of
M
manniL•39d ago
but apparently all seo meta data is disregarded in that case
Yup, except the defaults from your nuxt config ssr: true (default) + using nuxt generate is the easiest way to go there you can also only prerender the sites necessary
D
dreamland•39d ago
thanks that solves the SPA ssr: false the SSG case with nuxt generate is more interesting and applicable in my case thought, but i'm having some issues, i'll post a new thread here is one of the problems with nuxt generate: https://discord.com/channels/473401852243869706/1215088275409076274 how to run the nitro backend and serve the static output in parallel?
M
manniL•39d ago
nuxt build + setting prerender routes 🙂
D
dreamland•39d ago
i think there is a misunderstanding. you were talking about nuxt generate (aka SSG), and i was asking about serving the SSG static output along with running the nitro server do you mean setting prerender routes on a per route basis? i want all routes to be prerendered. nuxi build --prerender seem more appropriate in that case, but that is experimental https://nuxt.com/docs/api/commands/build i feel like i'm trying to achieve a very basic usecase, but it feels like i'm fighting nuxt to do something it's not supposed to
M
manniL•39d ago
do you mean setting prerender routes on a per route basis? i want all routes to be prerendered. nuxi build --prerender seem more appropriate in that case, but that is experimental https://nuxt.com/docs/api/commands/build
--prerender seems like a decent option. You can also configure to prerender all routes that the crawler can find at build time
Nuxt
nuxi build · Nuxt Commands
Build your Nuxt application.
M
manniL•39d ago
i feel like i'm trying to achieve a very basic usecase, but it feels like i'm fighting nuxt to do something it's not supposed to
No, this is an absolutely reasonable approach ☺️
D
dreamland•39d ago
i'll try to keep my sanity, thanks for your help!
M
manniL•39d ago
no problem at all! BTW: It is not necessary to prerender all routes if you want an SPA it is enough to provide an index.html and "forward" everything onto that through your platform (e.g. netlify and vercel do that by default with a 404 or 200.html) you only need to prerender all if you need SSG and the content in the HTMl
D
dreamland•39d ago
yea the benefit of prerendering is that pages can have their one meta tags for search engine results essentials i have a SPA part and a static part / (SPA) /somePage (frontend routed) /help/someTopic (static with custom meta tags)
M
manniL•39d ago
the benefit of prerendering is that pages can have their one meta tags for search engine results
Yes, but they are static then unless you use some ClientOnly components in there to make a part of it non-static
D
dreamland•39d ago
yes i do that i also have a custom loading indicator.. i'd like to use the default ~/app/spa-loading-template.html but unforunately that is only available when using ssr: false, which is not what i want, because.. well you know what happens, it's not SSR-ed, hence no custom meta tags on the routes
M
manniL•39d ago
well you know what happens, it's not SSR-ed, hence no custom meta tags on the routes
Yes, that's why SSR is helpful 😄 I wonder, why not going with dynamic SSR then?
D
dreamland•39d ago
i'll try to break it down by what my goal is and by what i gathered about the features that are offered by the different approaches my goal SPA part of the site 🎯 static small size initial html (to show something as soon as possible) 🎯 loading indicator (this is not really a goal, more like a necessary evil to show something as soon as possible) 🎯 api (nitro) 🎯 meta tags for "/" route static part of the site 🎯 static initial html 🎯 custom meta tags per route approaches SPA ✔️ static small size initial html ✔️ loading indicator (~/app/spa-loading-template.html) ✔️ api (nitro) ✔️ meta tags for "/" route ❌ custom meta tags per route SSG ✔️ static initial html ✔️ custom meta tags per route ❌ api (nitro) (?) dynamic SSR ❌ static initial html (to show something as soon as possible) ✔️ custom meta tags per route ✔️ api (nitro) ➖ SSR performance paranoia (currently 60k users, aiming for millions very soon) ➖ SSR feels like losing ownership over network traffic prerender SSR ✔️ static initial html with control over size through ClientOnly ➖ needs custom loading indicator ✔️ custom meta tags per route ✔️ api (nitro) as you can see the downsides of dynamic SSR are more subjective than objective for a side project dynamic SSR would be just fine, but for this project i prefer to eliminate uncertainties
R
Romi•20d ago
what did you end up choosing
D
dreamland•20d ago
well as only 1 of the options has no ❌ blockers, i chose: prerender SSR all pages with <ClientOnly> in "SPA" pages + custom loading screen
routeRules: {
"/**": { prerender: true },
}
routeRules: {
"/**": { prerender: true },
}
<!-- some SPA page -->
<template>
<!-- ready is a ref from the custom loading screen logic -->
<ClientOnly v-if="ready">
<!-- page -->
</ClientOnly>
</template>
<!-- some SPA page -->
<template>
<!-- ready is a ref from the custom loading screen logic -->
<ClientOnly v-if="ready">
<!-- page -->
</ClientOnly>
</template>
this allows custom SEO meta tags per route and control over static initial html size static small size initial html for "SPA" pages static large size initial html for static pages
R
Romi•20d ago
Thanks, so does this allow each page to have its own meta date?
D
dreamland•20d ago
this allows custom SEO meta tags per route
yes per route aka page
R
Romi•20d ago
So is your SSR set to true? having troubles trying to implemet this
D
dreamland•20d ago
yes
R
Romi•20d ago
hmm when I added
routeRules: {
"/**": { prerender: true },
}
routeRules: {
"/**": { prerender: true },
}
it broke my site lol
R
Romi•20d ago
and getting following error on my slug.vue
No description
D
dreamland•20d ago
that doesn't seem to be related, works for me
No description
R
Romi•20d ago
strange
D
dreamland•20d ago
only reason i can think of why prerender would not work if there are some useState refs that are not initialized at build time, and then when it tries to render some component it gets undefined and breaks
R
Romi•20d ago
maybe let me check I am using Storyblok api to fetch data
D
dreamland•20d ago
the solution of a lot of things it to try to make it work in a sample project, then your can compare it to your main project
Want results from more Discord servers?
Add your server
More Posts
Strange error when i start my applicationWhen i launch nuxt, i have an 503 error and i cant acces to localhost:3000. I have tried to clear brError with i18n and sitemapI get this error : "Plugin nuxt-site-config:i18n depends on i18n:plugin but they are not registereCheck inside plugin if running in dev modeI have created a plugin that sends nuxt/vue errors using some hooks to Sentry. I do however not wantIs anyone using application insights with Nuxt 3?Does anyone have applications insights working with Nuxt to track and log on the client and server? Nuxt theming options.I want to develop a Nuxt theming project similar to WordPress theming options. There will be 3 or 4 MicroFrontend vs Layer?Hello, I wonder what is the difference between MicroFrontends and the Layers in Nuxt? Does anyone knsearch page dont workit only shows the result of the first search, to show the results of other searches, the user has toserver middleware added to nuxt configHi all The docs say "Nuxt will automatically read in any file in the ~/server/middleware to create sError 500: A composable that requires access to the Nuxt instanceI have this error in my composable that I absolutely don't cromprend given that most of the code is Nuxt UI IconsCan please someone explain to me how to use Nuxt UI Icons ??? The documentation says : `Use the namawait useAsyncData in setup doesn't block navigationI want to wait until navigating to the next page until the store data has been fetched and set. I'm Intercepting RoutesHey dear NuxtCommunity! although I have experiences in React, I‘m pretty new to vue/nuxt. For a prHow too hook into a server response using Nuxt 3?I need to hook in the response of `/_ipx`. If the image is corrupted `/_ipx` will throw an error, beHydratation issue using pinia store (stackblitz reproduction)I'm having an issue with SSR rendering using pinia store. Here the issue : https://stackblitz.com/eShared types between server and vueWhere can I store zod schemas and types that will be used by both the backend and vue? (so that the Fetch method Not Allowed, but works in other clientsI need to do a GET to have a list, I need the authoritation with cookie. When I use Rest Client or THow to disable the nuxt-loading-enable-animation local storage ?my nuxt app sets this value in local storage: nuxt-loading-enable-animation = true How can I disablReactive Route Search Query ComposableDoes somebody have deeper experience with this? I am trying to implement a composable to reactivelyNuxt server API on subdomainFor native app reasons I need my Nuxt API routes to be on a subdomain of the Nuxt FE root domain. Hai18n SetLocale() problemI use nuxt i18n, when I call setLocale('en') All images reloaded on the page. Maybe someone know how