How to hide code from client side in vue/nuxt, using Server Side Rendering?-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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)
})