vue.js - Vue预渲染闪烁

Question

我现在有以下解决方案:

<template>
    <section id="prod-main">
        <prod-preview v-for="prod in products" :id="prod.id" :key="prod.id"/>
    </section>
</template>

export default {
...
    computed: {
        products: function () {
            return this.$store.getters['products/getPreview']
        }
    }
...
}

Vuex 商店将在延迟一段时间后从我的后端收到信息。所以第一次调用时它会是空的。现在我想使用 vue spa 预渲染，在这里我看到闪烁。
据我了解，它的工作原理如下:
1.浏览器加载带有产品的HTML
2. 执行js，将产品替换为空，因为商店是空的。
3. 延迟一段时间后再次显示后端信息。

我该如何解决这个问题？我应该保留预渲染以进行索引，并且无法对后端回复进行硬编码。

Answer 1

您可以使用设置captureAfterTime在保存页面的 html 之前等待异步调用完成。

其他可用设置:

    // NOTE: Unless you are relying on asynchronously rendered content,
    // such as after an Ajax request, none of these options should be
    // necessary. All synchronous scripts are already executed before
    // capturing the page content.

    // Wait until a specific event is fired on the document.
    captureAfterDocumentEvent: 'custom-post-render-event',
    // This is how you would trigger this example event:
    // document.dispatchEvent(new Event('custom-post-render-event'))

    // Wait until a specific element is detected with
    // document.querySelector.
    captureAfterElementExists: '#content',

    // Wait until a number of milliseconds has passed after scripts
    // have been executed. It's important to note that this may
    // produce unreliable results when relying on network
    // communication or other operations with highly variable timing.
    captureAfterTime: 5000,

---

另一个问题可能与预渲染的 HTMl 如何水合有关，我已经在 github 上提出了一个问题，但他们仍然没有解决它(并且不愿意？) https://github.com/chrisvfritz/prerender-spa-plugin/issues/131

解决办法是添加data-server-rendered="true"到预渲染 html 中的 vuejs 父节点，如下所示:
<div id="root" data-server-rendered="true">...

您可以使用选项postProcessHtml这样做。