编写支持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。 假设必须这样作，那么至少要运行可用性检查：

1. export default {

2.  created() {

3.    if(typeof window !== 'undefined'){

4.        window.scroll(/*...*/)

5.    }

6.  }

7. }

但在大多数状况下。在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！