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

Question

(Nuxt project) I am stuck finding a solution related to show non-authenticated and authenticated content on the same page.

I have two possible solutions in my mind but they have some caveats.

The first one, decides on the mounted method if the user can see the authenticated content but I couldn't solve the flickering content issue, this is the demo for that approach: https://60f08a8293123d00e57c14e8--happy-minsky-1268c6.netlify.app/ Click the login button and reload the page, you will see the flickering content

My second approach, it is using the null to avoid both, the non-authenticated and authenticated content until the app reaches the mounted method, the problem with this solution is it is not search engine friendly because there is no static content generation, please compare this two links:

Generated from this solution: https://gist.github.com/ltroya-as/fbbdce2b3dc30063e9c4ec7e93e3aba1#file-index-generated-file-html-L522

Expected: https://gist.github.com/ltroya-as/d37e3d0a89efebbfd66c2daf7700f50d#file-expected-generated-file-html-L523

Is there a way to make the second solution more search engine friendly? I am worried that the second solution affects search engine results.

Repository with instructions: https://github.com/ltroya-as/nuxt-rehydratation-example

--- Update

My project is configured in full static mode

Answer 1

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