为什么`$router.replace` 会跳过服务器端渲染？答案

【问题标题】：Why does `$router.replace` skipt the server-side-redering?为什么`$router.replace` 会跳过服务器端渲染？
【发布时间】：2020-12-29 07:46:48
【问题描述】：

我有一个带有类似按钮的页面（例如/index）

<button @click="addItemAndRedirect"> {{ $store.state.items.length }} </button>

方法

  methods: {
    addItemAndRedirect () {
      this.$store.dispatch('addItem', {}).then((path) => {
        this.$router.replace({ path: path })
      })
    }

目标页面看起来像

export default {
  asyncData (context) {
    console.warn('asyncData')
  },
  fetch () {
    console.warn('fetch')
  },
  fetchOnServer: true,

当我直接调用页面目标页面时，我在服务器控制台收到以下控制台日志消息：

警告异步数据

警告获取

但是在单击按钮后，将某些内容添加到商店并重定向到目标页面，控制台日志消息将显示在浏览器控制台中。如何从 nuxt 获得在服务器端预渲染的重定向？

【问题讨论】：

没有得到问题。两种情况下都有日志吗？
是的。但是当直接从浏览器调用第二页时，日志在服务器控制台上（我期望的）。当第一页重定向到第二页时，日志仅在客户端控制台上，但我想在服务器端运行 fetch/asyncdata
这就是它的工作原理。在您的初始加载时，您有一个页面的服务器端呈现，从那时起，您将在客户端上运行一个应用程序，因此不再有服务器： fetch 和 ayncData 在服务器上调用一次，然后在导航时调用（nuxtjs.org/api/pages-fetch/#when-to-use-fetch 例如） .这是预期的行为。你能再描述一下，你想要的行为是什么样的吗？为什么它在服务器或客户端上执行很重要？

标签： vue.js nuxt.js server-side-rendering

【解决方案1】：

SSR 仅发生在 initial 请求中。通过$route.push、$router.replace 或NuxtLink 进行的每一次进一步导航都只会发生在客户端和“类似SPA”的情况下。这将 SSR 的 SEO 优势 + 出色的初始性能与 SPA 的功能相结合，以避免再次加载整个内容并改为添加零碎的内容。

TL;DR：预期行为。

我在这里演讲时的另一个解释：https://vimeo.com/338836843#t=1000s

你可以做些什么来强制ssr（虽然你通常不应该）：

使用window.location 或$router.go(0) 刷新当前页面
使用<a>标签

但请注意，这将消除一些性能优势。

【讨论】：