問題
この二つ、どこが違うでしょう？考えてみてください！
以降、(答えが分かった|諦めた)人のみ進んで下さい。
いいんですね？
後悔しませんね？
答えは、
日付の表示形式が違うでした！
Beforeの画像は、MM/DD/YYYYという形式でしたが、
Afterの画像では、日本でよく使われるYYYY/MM/DD形式になっていました。
では、またクイズです。これらはどのように変更されたのでしょうか？
正解は、日付部分だけをクライアントコンポーネントにしました。
なんで？
理由は、もともと日付の表示方法は、
サーバー側でArticleのdateというDateオブジェクトを
.toLocaleDateStringで文字列化して表示していました。
しかし、サーバーが日本語向けに設定されていないようなので、
MM/DD/YYYY形式になり、端末の標準と異なる表示になっていました。
それに気づき、PublishedDateコンポーネントを作成。
"useClient"してクライアント側でDateオブジェクトを
.toLocaleDateStringで文字列化するようにしました。
サーバーサイドレンダリングってこういうところに弱いんですね〜
クライアントサイドのコンポーネントを埋め込むのが最強！
最後まで読んでいただきありがとうございます！