探讨 Vue SSR 应用中如何处理客户端特有的 API (如 window, document)，避免服务器端报错。

各位观众老爷，晚上好！今天咱就来聊聊 Vue SSR (Server-Side Rendering，服务端渲染) 中，如何优雅地搞定那些只在浏览器里才有的 API，比如 window 和 document 这种“娇气包”，避免它们在服务器端闹脾气。

开场白：SSR 的爱恨情仇

SSR 这玩意儿，好处多多：SEO 优化，首屏加载快，用户体验嗖嗖地提升。但它也不是省油的灯，一不小心就给你整出点幺蛾子。最大的问题就是，服务器端是 Node.js 环境，没有浏览器那些花里胡哨的东西，像 window、document 这种宝贝疙瘩，根本就不存在。直接在服务器端代码里使用，分分钟报错给你看。

问题：服务器端缺少“浏览器”

在客户端，我们可以愉快地使用 window.location.href 跳转页面，用 document.getElementById() 获取 DOM 元素。但在服务器端，这些都是空气。服务器端跑的是 Node.js，它不知道 window 是啥，也不知道 DOM 长啥样。所以，直接在 SSR 代码里写 window.innerWidth，服务器肯定会跟你急眼。

解决方案：条件判断和延迟加载

最简单粗暴，也是最常用的方法，就是用 typeof 来判断当前环境是不是浏览器。只有在浏览器环境下，才执行那些依赖 window 或 document 的代码。

if (typeof window !== 'undefined') {
  // 只有在浏览器环境下才执行的代码
  console.log('当前屏幕宽度：', window.innerWidth);
}

这种方法简单直接，但如果你的组件里有很多地方都用到 window 或 document，那代码里就会充斥着大量的 if 判断，显得很臃肿。

更好的做法是，将那些依赖客户端 API 的代码，进行延迟加载。也就是说，在组件渲染完成后，再执行这些代码。Vue 提供了一些生命周期钩子，可以帮助我们实现这一点。

• mounted 钩子： 这是最常用的钩子，它会在组件挂载到 DOM 后执行。这意味着，在 mounted 钩子里，window 和 document 都是可用的。

export default {
  mounted() {
    // 在这里可以使用 window 和 document
    console.log('组件挂载完成，可以使用 window.innerWidth');
    console.log('document.body:', document.body);
  }
};

• beforeMount 钩子 + Vue.nextTick： 有时候，你可能需要在组件挂载前，访问 window 或 document。这时候，可以使用 beforeMount 钩子，结合 Vue.nextTick 来实现。Vue.nextTick 会将回调函数推迟到 DOM 更新循环结束后执行。

import Vue from 'vue';

export default {
  beforeMount() {
    Vue.nextTick(() => {
      // 在这里可以使用 window 和 document
      console.log('beforeMount + nextTick，可以使用 window.innerWidth');
    });
  }
};

策略一览：

策略	描述	适用场景	优点	缺点	代码示例
typeof 判断	使用 typeof window !== 'undefined' 或 typeof document !== 'undefined' 判断环境。	组件中少量使用客户端 API，且逻辑简单。	简单直接，易于理解。	代码冗余，可读性差，难以维护。	if (typeof window !== 'undefined') { console.log('当前屏幕宽度：', window.innerWidth); }
mounted 钩子	在 mounted 钩子中使用客户端 API。	组件需要在挂载后才能使用客户端 API。	代码清晰，易于维护。	组件渲染后才执行，可能会造成一定的延迟。	export default { mounted() { console.log('document.body:', document.body); } };
beforeMount + nextTick	在 beforeMount 钩子中使用 Vue.nextTick 延迟执行客户端 API。	需要在组件挂载前，但 DOM 更新后使用客户端 API。	可以在组件挂载前执行，但仍然保证 DOM 更新完成。	代码稍显复杂。	import Vue from 'vue'; export default { beforeMount() { Vue.nextTick(() => { console.log('window.innerWidth'); }); } };

进阶：使用 vue-no-ssr 组件

如果你的组件里有很多地方都依赖客户端 API，而且你不想写大量的 if 判断，那么可以使用 vue-no-ssr 组件。vue-no-ssr 组件可以让你将整个组件包裹起来，使其只在客户端渲染。

首先，安装 vue-no-ssr：

npm install vue-no-ssr

然后，在你的组件中使用它：

<template>
  <div>
    <no-ssr>
      <MyComponent />
    </no-ssr>
  </div>
</template>

<script>
import NoSSR from 'vue-no-ssr';
import MyComponent from './MyComponent.vue';

export default {
  components: {
    NoSSR,
    MyComponent
  }
};
</script>

MyComponent 组件里的代码，就可以随意使用 window 和 document 了，不用担心服务器端报错。

更进一步：模拟 window 和 document (不推荐)

理论上，你可以在服务器端模拟 window 和 document 对象。但这通常是不推荐的，因为：

• 复杂性： 模拟 window 和 document 对象非常复杂，需要考虑各种细节，稍有不慎就会出错。
• 性能： 模拟 window 和 document 对象会消耗大量的服务器资源，影响性能。
• 维护性： 模拟 window 和 document 对象会增加代码的维护成本。

除非你有非常特殊的需求，否则不要轻易尝试这种方法。

一个完整的例子

假设我们有一个组件，需要在页面加载完成后，获取当前屏幕的宽度，并显示在页面上。

<template>
  <div>
    <p>当前屏幕宽度：{{ screenWidth }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: null
    };
  },
  mounted() {
    this.screenWidth = window.innerWidth;
  }
};
</script>

如果在服务器端直接渲染这个组件，肯定会报错，因为 window 对象不存在。我们可以使用 mounted 钩子来解决这个问题。

<template>
  <div>
    <p>当前屏幕宽度：{{ screenWidth }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: null
    };
  },
  mounted() {
    if (typeof window !== 'undefined') {
      this.screenWidth = window.innerWidth;
    }
  }
};
</script>

或者，使用 vue-no-ssr 组件：

<template>
  <div>
    <no-ssr>
      <p>当前屏幕宽度：{{ screenWidth }}</p>
    </no-ssr>
  </div>
</template>

<script>
import NoSSR from 'vue-no-ssr';

export default {
  components: {
    NoSSR
  },
  data() {
    return {
      screenWidth: null
    };
  },
  mounted() {
    this.screenWidth = window.innerWidth;
  }
};
</script>

最佳实践

• 尽量避免在服务器端使用客户端 API。 如果可以，尽量将逻辑移到客户端执行。
• 使用 typeof 判断环境，或者使用 vue-no-ssr 组件。
• 使用 mounted 钩子延迟加载依赖客户端 API 的代码。
• 不要轻易尝试模拟 window 和 document 对象。
• 仔细测试你的 SSR 应用，确保没有报错。

表格总结：各种策略优缺点

策略	优点	缺点	适用场景
typeof 判断	简单直接，易于理解。	代码冗余，可读性差，难以维护。	组件中少量使用客户端 API，且逻辑简单。
mounted 钩子	代码清晰，易于维护。	组件渲染后才执行，可能会造成一定的延迟。	组件需要在挂载后才能使用客户端 API。
vue-no-ssr 组件	简化代码，提高可读性。	整个组件只在客户端渲染，可能会影响 SEO 优化。	组件大量使用客户端 API，且不需要在服务器端渲染。
模拟 window/document	理论上可以解决所有问题。	非常复杂，性能差，难以维护。	不推荐使用，除非有非常特殊的需求。

实战案例：第三方库的使用

很多第三方库都依赖客户端 API，比如一些 UI 框架、动画库等。在使用这些库的时候，需要特别注意。

• 按需加载： 尽量按需加载第三方库，避免加载不必要的代码。
• 使用 SSR 友好的版本： 有些第三方库提供了 SSR 友好的版本，可以避免在服务器端报错。
• 使用 vue-no-ssr 组件： 如果第三方库无法在服务器端运行，可以使用 vue-no-ssr 组件将其包裹起来。

常见问题解答 (Q&A)

• Q: 为什么在服务器端没有 window 和 document？

  • A: 因为服务器端是 Node.js 环境，不是浏览器环境。Node.js 没有浏览器提供的 API。

• Q: 使用 vue-no-ssr 组件会影响 SEO 吗？

  • A: 会的。因为被 vue-no-ssr 组件包裹的组件，只在客户端渲染，服务器端不会渲染这些内容。搜索引擎可能无法抓取到这些内容。

• Q: 如何判断当前环境是服务器端还是客户端？

  • A: 可以使用 typeof window === 'undefined' 或 process.server (在 Nuxt.js 中) 来判断。

• Q: 模拟 window 和 document 对象有哪些坑？

  • A: 坑很多。比如，需要模拟各种属性和方法，需要处理各种事件，需要考虑各种兼容性问题。

总结：优雅地与客户端 API 共舞

在 Vue SSR 应用中处理客户端 API，需要谨慎对待。通过条件判断、延迟加载、使用 vue-no-ssr 组件等方法，我们可以优雅地解决这个问题，避免服务器端报错，提高应用的性能和用户体验。记住，尽量让服务器端专注于数据处理和页面结构，将那些依赖客户端 API 的代码，交给浏览器去执行。

好了，今天的讲座就到这里。希望对大家有所帮助！ 咱们下次再见！ (如果还有下次的话…)