Loading dynamic text without flicker


I am trying to create a page which has something like this:

          Create something
          <span class="underline--magical">{{ my_superlative }}</span>

Then I’ve tried using the fetch hook or a lifecycle hook to populate the variable on page load - for example:

    const superlatives = [
    this.my_superlative = superlatives[Math.floor(Math.random() * superlatives.length)]

On a Nuxt site. I am using Universal mode.

The problem is that there is always a situation where the my_superlative variable loads twice (Server then client I assume) and therefore it might suddenly switch from ‘Stunning’ to ‘Magical’ on load OR because the variable is populated client- side only, there is a flicker whilst it loads I can’t find a consistent way to make it only load once and NOT flicker (i.e. somehow always force it to be hydrated server side) OR stop the flicker if doing it client- side.

Could anyone kindly provide me with an idea of how I could do this? I’ve spent far too many hours fiddling with it :smile:


Can anyone

In general with SSR you don’t want to do things that are “non-deterministic”. Random functions are, by definition, non-deterministic. The easiest way to think about this, is if you run the exact code 2 times in a row, one on the server and one on the front end, they should produce the exact same content. This causes other problem like hydration bailing…but let’s leave that for another time.

Now if you really want a random number on the front end without causing these problems, ask yourself — do I really need server rendered content here?

If not just wrap your ouput in <client-only> (this is a nuxt thing), and you should be good to go!

Thanks for this - I have seen the hydration bailing error indeed :unamused:
I had done the client-only thing but I get the flicker problem. Are you suggesting I wrap the entire string in ? This will solve the problem I suspect, but means the whole headline will flicker. Also would this negatively impact on-page SEO?