Рекомендации по извлечению на стороне сервера Nuxt и внутренним ссылкам

Question

Я хотел бы всегда получать данные на стороне сервера (чтобы их нельзя было прочитать с вкладки сети)

Когда страница обновляется (или загружается в первый раз), возвращается true и на вкладке сети ничего не видно.

        async asyncData({ params, $axios }) {
    console.log(process.server)
    const { id } = params;
    const url = `api/post/${params.id}`
    const post = await $axios.$get(url);
    return { post };
  }

Однако, когда я попытался перейти по внутренней ссылке, используя router-link или всегда заканчивайте выборкой на стороне клиента. process.server возвращается false а запрос / ответ можно увидеть на вкладке сети.

Единственное решение, которое я придумал, использовать вместо внутренних ссылок, благодаря тому, что эта страница загружается, и мы можем получать данные на стороне сервера.

Документы Nuxt говорят, что всегда используйте nuxt-link вместо внутренних ссылок, но <a>можно использовать для внешних ссылок. Поэтому мне было интересно, каковы недостатки, если мы используем внутренние ссылки (просто для того, чтобы обновить страницу и убедиться, что загрузка выполняется на стороне сервера)

Или есть лучший способ всегда получать серверную часть при навигации?

Answer 1

Вот как я с этим справляюсь и использую nuxt-linkповсюду.

Использоватьfetchкрючок, то он вызывается на обоих.

      async fetch() {
  this.getItems()
},

Кроме того, если вы хотите, вы можете напрямую вызывать серверный код через this.$root.context.ssrContext, что было бы похоже на то, что вы делаете, если используете nuxtServerInit в магазинах.

      async fetch() {
  if (process.server) {
    let items = []
    if (this.isset(this.$root, 'context.ssrContext.req.thingsModel')) {
      items = this.$root.context.ssrContext.req.cache.get('things', [])
      if (!items.length) {
        items = await this.$root.context.ssrContext.req.thingsModel.get(
          this.limit
        )
        items = this.$copy(items)
        this.$root.context.ssrContext.req.cache.put('things', items, 60000 * 60)
      }
    }

    this.items = items
  } else {
    this.getItems() // would be an ajax call to populate items
  }
},