vue 警报(可能修复)生产环境中的SSR不匹配

nlejzf6q 于 4个月前发布在其他

关注(0)|答案(8)|浏览(58)

这个问题解决了什么问题？

目前没有方法可以在生产环境中接收关于SSR与VDom不匹配的警报(可能重新渲染)。
这非常重要，因为不同的浏览器会以意想不到的方式处理这种情况。例如，我刚刚解决了一个特定于Windows 10和IE11的问题，其中渲染的vdom树与ssr渲染的html不匹配，导致白屏。Chrome和其他浏览器能够恢复。当从已经渲染的vue导航到此页面时，不匹配的渲染效果良好。只是在初始渲染时出现特定页面时才会出现问题。
讨论在论坛中进行。
https://forum.vuejs.org/t/ssr-render-mismatch-error-emit-in-production/20083

提议的API看起来如何？

我认为大部分代码目前都在这里。
vue/src/core/vdom/patch.js
第662行 adff008
| | }elseif(process.env.NODE_ENV!=='production'){ |
我认为在初始ssr渲染过程中，我们需要更细粒度的标志来选择在此行为上触发警报。目前只有一个NODE_ENV。
初步(可能过于详细)的想法是：
WARN_ON_SSR_MISMATCH
RECOVER_ON_SSR_MISMATCH
然后如果这些为真，我们可以改变行为。
我知道这对性能至关重要，所以非常愿意接受建议。我愿意在PR中自己实现这个功能。

vue

来源：https://github.com/vuejs/vue/issues/6874

8条答案

按热度按时间

voase2hg1#

请提供一个在IE11中恢复失败(白屏)的复制品。

赞(0）回复(0）举报 4个月前

yebdmbv42#

@yyx990803 能够将这个问题简化为我们在 Safari 8.1 中遇到的另一个问题。

赞(0）回复(0）举报 4个月前

4jb9z9bj3#

@yyx990803 ,似乎这是一个在safari的排序函数和/或类型强制转换中的bug。

// node/chrome/etc returns what you would expect from looking at this
> [null, true, true].sort((a,b) => a < b)
[ true, true, null ]

// safari, does not
> [null, true, true].sort(function(a,b){ return a < b })
[null, true, true]

切换到使用-1,0,1比较器函数可以正确渲染。

赞(0）回复(0）举报 4个月前

fruv7luv4#

仍然希望看到是否有方法可以在生产环境中检测到这种情况。这将非常有帮助，我认为如果存在无效的标记，我宁愿在生产环境中保留开发行为以重新渲染，以防止白屏。

赞(0）回复(0）举报 4个月前

7ajki6be5#

这将非常棒，因为我们有时也会遇到白屏/节点追加错误(仅在生产环境中),所以能够看到为什么在生产环境中出现问题将会非常好。

赞(0）回复(0）举报 4个月前

icomxhvb6#

@yyx990803 bumping on this to get thoughts on this subject or how to approach. Also am happy to make a PR to allow this check to happen while in production. When this has happened to us, it is a hard failure which results in a white screen and no content rendered
Today it was on mobile safari 11 on ios8. When i wrap the span in a no-ssr component (which only renders during mount cycle) everything renders fine.
According to the HTML li spec, it allows flow content inside of it, which are all of the contained nodes https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content

<li
    data-test-location-list-item
  >
    <small class="editlinks" v-if="profileEditable">
      <router-link
        :to="{ name: 'profiles-locations-edit', params: { profileUUID: this.profileUUID, locationUUID: this.id} }"
      >
        <i class="icon-pencil"></i>
      </router-link>
    </small>
    <strong v-if='primary'>Office</strong>
    <vg-no-ssr>
      <span class="br contacts">
        <a
        v-if="hasGoogleMapLink"
        target="_blank"
        :href="googleMapLink">
          {{ address_1 }}<br>
          {{ address_2 }}<br v-if='address_2'>
          {{ city_state_zip_country }}<br>
          <template v-if='phone_number'>
            <span class='clabel'>Phone</span>
            {{ phone_number }}
            <span v-if='phone_number_extension'>x</span>
            {{ phone_number_extension }}
            <br>
          </template>
          <span class='clabel' v-if='fax_number'>Fax</span>
          {{ fax_number }}
        </a>
      </span>
    </vg-no-ssr>
  </li>

赞(0）回复(0）举报 4个月前

pkbketx97#

@yyx990803 提升，对此有什么想法吗？如果推荐的方法在你看来是可行的，并且符合SSR和Vue的发展方向，那么我很乐意为此提交PR。
最终目标：当生产中出现"白屏"事件时，为客户端提供一种方式来指示他们希望进行完整的重渲染，而不是硬白屏。

赞(0）回复(0）举报 4个月前

t98cgbkg8#

关于在生产环境中配置这种行为也很好奇。如果有节点不匹配，理想情况下是允许客户端尽可能重建DOM(就我所知，这是当前开发模式的行为),而不是抛出一个硬异常并中止渲染。

赞(0）回复(0）举报 4个月前