SSR and SPA

[PiotrMigdal]

Hi,
I have built an SPA application with quasar. I am going to create a landing page and a few other subpages under separate layout as SSR. The pages won't require authentication. I need it for better SEO.

What is the best approach for it? Ideally I should create a separate project but my goal is to keep it simple for now and I was wondering if I can just add SSR under the same website domain. Is it possible and would this cause problems when I export to android? Obviously android version needs only SPA so all SSR routes and code need to be excluded.

Ive done so far preparation https://quasar.dev/quasar-cli-vite/developing-ssr/preparation. Surprisingly, when I compile SSR it gives me SPA application so I can imagine it doesn't render only code from src-ssr directory.

I am thinking to somehow split it in router like below. Please let me know if my thinking is right or there is other, better way.

import landingRoutes from './routes-landing'
import appRoutes from './routes-app'
import authRoutes from './routes-auth'

export default function () {
  const routes = [
    ...authRoutes,
    ...appRoutes
  ]

  if (process.env.MODE === 'ssr') {
    routes.push(...landingRoutes)
  }

  return routes
}

Thanks.

[tomekos11]

Hi,
my solution (idk if it's the best approach) is to add meta in vue routes which require SSR

example:

{
      path: 'new',
      component: PostsNew,
      // only authenticated users can create posts
      meta: { ssr: true },
    },

and later in template i used v-if

<ssr-content v-if="$route.meta.ssr" />
<spa-content v-else />