Edited at

Nuxt.jsでSSR時に手軽にサーバ時刻を得る

More than 1 year has passed since last update.

投稿時間や出退勤時間、或いはcreated_atでもmodified_atでも何でも良いのだが、渡ってくるデータには絶対時刻があり、しかし表示上はTwitterの時間表示のように、「n日前」「n分前」等の相対時刻を扱いたいときが偶にある。

このとき、比較用の現在時刻を得るのに


  1. ローカル時刻を使う

  2. APIが現在時刻を返すようにする

  3. サーバ時刻を取得するAPIを作成する

あたりが考えられるが、ローカル時刻はもちろんクライアント機器の時刻に依存してしまうためクリティカルな用途では使えず、2⃣が出来れば良いのだがAPIの改造が許されていない場合もある(アグリゲーションレイヤーを使う手はあるが)。となる3⃣が良さそうだがもっと簡単な方法がある。

折角SSRを使っているならstateまたはdataDate.now()で値を入れてしまえばいいのだ。

運用上、更新できないようにstateにしてmutationを設定しないのが良いだろう。


差が一分未満かどうかで判定するサンプル


store側

const store = new Vuex.Store({

state: {
current_time: Date.now()
}
})


コンポーネント側


import { mapState } from 'vuex'
export default {
data(){
created_at:0
},
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { created_at: data.created_at}
},
computed: {
...mapState(['current_time']),
created_at_lavel(){
const diff = this.current_time - this.created_at;
// 例として差が一分未満かどうかで判定する
return (diff < 60*1000)?'たった今':'1分以上前'
}
}
}


※APIに現在時刻も含めてもらうのが正攻法