Flickering content when trying to show non-authenticated and authenticated content on the same page

Vue is a client side framework. All HTML is generated by JS inside the browser. This means that typical Vue app is just very simple HTMl file with almost no HTML and some CSS and Javascript tags...

This is problem for SEO because most crawlers (Google, FB, Twitter) do not execute JS and just scan the HTML returned from server...

To solve this, frameworks as Nuxt was created. They solve the problem by executing Vue app on the server and rendering the HTML on the server - either at request time (Nuxt classic - new HTML is generated each time the request comes - needs Node server) or at build time (Nuxt generate - HTML is generated to a file at build time and same HTML is returned for each request)

In all cases, HTML returned by the server is different but everything else is same. It is still a Vue app, which is executed on the client and once it is started (and that takes some time - so user sees only the content send by the server in the meantime), it overrides any HTML returned from the server...

This is why you see the "flickering" and I'm afraid there is no easy solution to this problem when your site if fully statically generated.

1. Solution with using null - result is clear, no content -> no SEO. There is no way around it...
2. If your target is SEO, I guess rendering content for authenticated clients by default makes no sense as that would reveal such content to Google (or other crawler) and it's users so why to hide it behind authentication in the first place...
3. Only option left is to generate content for non authenticated users and live with the flickering for users already logged-in

I think if you know about the problem, you can minimize it by the design - for example do not mix both auth/non-auth content on the single page for example. But for your simple and "not from real life" example it has no solution

You should use beforeEach (navigation guards) - this one should do the trick. You can use it to check if the user is logged in or not there, https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

something like this:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

I think that this answer it will help you Pass data with beforeEnter to route components