编写支持SSR的通用组件指南

原文来自：https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon?

utmcampaign=Vue.js%20News&utmmedium=email&utm_source=Revue%20newsletter

翻译作者 | 贺倩倩

介绍

作为Vue开发者。你可能听说过server端渲染（SSR）。即使你没有使用像Nuxt.js或SSR-plugin这种框架，你也要知道怎样编写在server端和client都支持的通用组件。

假设你想找到基于SSR的方法或与人共享你的组件，这些知识肯定会让你更轻松！假设作为一个库/插件作者。我觉得这些知识是必须掌握的。猜猜看，它甚至都不难！

常见的陷阱

在编写通用组件时。开发者应该考虑三个非经常见的警告。

1.window, document, and friends - platform-specific APIs

在server端处理组件时，不会发生动态更新。这就是为什么在server上仅仅运行两个生命周期钩子：beforeCreate和created。这也意味着，这两个钩子将被调用两次，一次在server上。一次在client。

可是在server端。没有window，document。也没有其它特定于浏览器的API，如fetch。假设你试图在这两个钩子中调用它们，server上会抛出一个错误，组件就不能在server端渲染了。这仅仅是server端环境下“普通”组件或第三方库的最常见问题。

经验法则：不要在created或beforeCreate中调用特定于浏览器的API。假设必须这样做，那么至少要运行可用性检查：

export default {
created() {
if(typeof window !== 'undefined'){
window.scroll(/*...*/)
}
}
}

但在大多数情况下。在beforeMount或mount中调用它们是全然没问题的。假设必须在server和client上使用API，比方要发送AJAX请求，请确保两方都能够使用（比如使用isomorphic-fetch或axios）。此外，你有时须要在组件中用到this.$el（$el是组件本身的DOM元素）。

在绑定事件侦听器或进行查询选择时，这能够派上用场。

2.Lifecycle hooks and side effects

说到生命周期钩子。你应该考虑还有一件事：副作用。

函数或表达式在改动本地环境之外的某些状态时具有副作用。比方API调用，I/O操作，设置计时器。加入侦听器等。

为了避免内存泄漏，你不希望在创建和beforeCreate挂钩中产生副作用，由于当这些钩子也从server端调用时，你无法关闭那里的连接。

相反，这些对象将永远存在并加起来，导致内存泄漏。

经验法则：不要在created或beforeCreate中使用带副作用的代码。

3.No data reactivity(数据隔离性)

这通常不是什么大问题。但你须要知道。server端和client的值之间数据互不影响。假设你在server端操作data。则根本不会在client看到这些变更。

指令（Directives）

自己定义Vue指令经经常使用于操纵DOM（比如。在滚动时显示元素或使元素固定到特定位置）。

我们知道这在server端不起作用。

那有什么解决的方法呢？

嗯，最简单的方法是：不要使用Directives，使用component。我使用VueNextLevelScroll或vue-if-bot等组件做到了这一点。由于它更easy使它们普遍可用，而且它们也能够进行代码切割！使用components抽离。你不会失去不论什么东西。

假设你确实想使用指令，则能够在server端加入同样效果的一个指令。在Nuxt中，能够通过在nuxt.config.js中的this.options.render.bundleRenderer对象中设置指令对象来实现。一个好的（但非常复杂的）样例是官方的v-model ssr指令。

注意：请注意以kebab-case（如：make-red而不是makeRed）传递你的指令。

否则，他们将无法被识别！这是vue-server-renderer中的错误（有关具体信息，请看官方文档）。

总结

使用特定平台的API时要特别小心，尤其是window和document。

请记住，created和beforeCreate是在server端和client都会运行的。

确保写的时候没有副作用，没有window。server端数据变更不会表如今客服端。

使用指令并不总是最好的抽离方法。

可是假设你确实使用它们，请提供server端指令假设你想进一步阅读。我建议你阅读官方的vue-ssr-docs！