How to keep a randomly generated string in SSR and client side?

I'm facing an issue with server side rendering in general as I tried this example on Nuxt (Vue.js), Next (React) Sapper and Routify (Svelte). It is not really linked to any of these libraries because the case happens every time.

From an array of strings, I pick a random one and display it in a div. In this case with Vue but that is just basic Javascript:

<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {
      words: ['word 1', 'word 2', 'word 3', 'word 4'],
    }
  },
  computed: {
    randomWord: function () {
      return this.getRandom(this.words, 1)
    }
  },
  methods: {
    getRandom (arr, n) {
      let result = new Array(n)
      let len = arr.length
      let taken = new Array(len)
      if (n > len) {
        throw new RangeError("getRandom: more elements taken than available")
      }
      while (n--) {
        const x = Math.floor(Math.random() * len)
        result[n] = arr[x in taken ? taken[x] : x]
        taken[x] = --len in taken ? taken[len] : len
      }
      return result
    }
  }
}
</script>

What happens is that, obviously, the server side generates a word, then the client side generates another one and replaces shortly the content of the SSR content with the client one.

How to display a random string from an array both on SSR and client side? Is it virtually impossible or am I missing something?

As you can see here: