如何使用服务器端渲染在 vue/nuxt 中从客户端隐藏代码？

Question

I am trying to do some processing on the server side, which I do not want to be viewable on the client side.

I have successfully tried using either fetch or asyncData to populate the state, but I do not want the process followed to be available on the browser.

For example:

<template>
  // ...
</template>

<script>
import ...

export default {
  layout: 'layout1',

  name: 'Name',

  components: { ... },

  data: () => ({ ... }),

  computed: { ... },

  async asyncData({ store }) {

    const news = await axios.get(
      'https://newsurl.xml'
    ).then(feed =>
         // parse the feed and do some very secret stuff with it
         // including sha256 with a salt encryption
    )
    store.commit('news/ASSIGN_NEWS', news)
  }
}
</script>

I want the code in asyncData (or in fetch ) not to be visible on the client side.

Any suggestion will be appreciated.

Answer 1

You can use onServerPrefetch hook.

onServerPrefetch(async () => {
  const news = await axios.get(
  'https://newsurl.xml'
).then(feed =>
     // parse the feed and do some very secret stuff with it
     // including sha256 with a salt encryption
)
  this.$store.commit('news/ASSIGN_NEWS', news)
})

Answer 2

There are several questions like this one already, one of which I've answered here and here .

The TLDR being that if you want to make something on server only, you probably don't even want it part of a .vue file from the beginning. Using a backend proxy could also be useful (as stated above), especially if you could benefit from caching or reduce bandwidth overall.