Nuxt&SSRでsetIntervalを使う時の注意点

Nuxt

ssr.vuejs.org

上記にあるように beforeCreate と created でsetInerval を使うと、SSR中に呼び出されるので、サーバでsetIntervalが実行されて、clearIntervalをしない限り永遠に続いて行く... 気づかず実装してしまって、焦ったのでメモ。

怖いので、mixins 使ってwrapperしてみた。 考えたこととしては、 - created でなく、mounted を使う - process.server 時に行わないようにする。（mountedの時点で呼ばれないはずだからいらないかも？） - beforeDestory の時あたりで、clearIntervalを行う - 本当は必要ないが、未来の自分が信用できないので、念のため時間設定でclearIntervalを設定しておく。

以下プログラム

export default {
  data() {
    return {
      intervalID: null
    };
  },
  methods: {
    setTimer: function(callback, intervalTime) {
      if (process.server) return;
      this.intervalID = setInterval(() => {
        callback();
      }, intervalTime);

      // 万が一の不具合を防ぐために、ClearIntervalを実施する。（とりあえず30分）
      setTimeout(() => {
        clearInterval(this.intervalID);
      }, 30 * 60 * 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalID);
  }
};
<script>
  import timer from '~/mixins/utils/timer.js'
  export default {
  mixins: [timer],
  mounted: {
    this.setTimer(this.function, intervalTime);
  }
}
 </script>