NuxtJS Динамические маршруты SSR - PullRequest
Новая
       50

NuxtJS Динамические маршруты SSR

0 голосов
/ 01 октября 2019

SSR не работает с динамическими маршрутами (файл _id.vue) в NuxtJS , я использую функцию asyncData для рендеринга на стороне сервера динамических значений из базы данных, этоработает в режиме разработки, но после генерации статического проекта ничего не отображается на стороне сервера, включая HTML-теги со статическим значением.

_id.vue 

<template>
  <v-app>
            <h3 class="typo-title3">Localização</h3>
            <p
              class="address"
            >{{data.nome | capitalize}} está localizado no bairro {{data.bairro | capitalize}}, {{data.rua | capitalize}}, {{data.num}}, na cidade de {{data.cidade | capitalize}}.</p>
  </v-app>
</template>

<script>
import fsAct from "@/functions/fsAct";
import firebase from "~/assets/js/firebase";

export default {
  mixins: [fsAct],
  data() {
    return {
      id: this.$route.params.id,
      data: {
        fachada: ""
      }
    };
  },
  /* SSR */
  async asyncData({ route, params }) {
    const ref = firebase
      .firestore()
      .collection("example")
      .doc(params.id);
    let snap;
    try {
      snap = await ref.get();
    } catch (e) {
      console.error(e);
    }
    const prefix =
      "https://firebasestorage.googleapis.com/v0/b/easyhouse-am.appspot.com/o/";
    let dados = snap.data();
    dados.fachada = prefix + dados.fachada.replace("/", "%2F") + "?alt=media";
    return {
      data: dados
    };
  },
  created() {
    this.fsSelectOne("example", this.id).then(res => {
      this.data = res.data();
    });
  }
};
</script>

1 Ответ

2 голосов
/ 01 октября 2019

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

Он будет вызываться на стороне клиента при посещении страницы.

Вы должны использовать метод жизненного цикла beforeCreate, если вы строите только статический сайт.

...