kk-web

続 サーバーサイドレンダリングについて、改めて勉強し直してみる

2019-11-12

少しだけわかりみが進んだので備忘録がてら。

Nextjs などの環境下で、以下のコードが実行された場合、ブラウザに何が表示されるのか、今まで理解できていなかった。

import React from "react";

const Pages: React.FC = (props) => (
  <div>{typeof window === "undefined" ? "ssr" : "csr"}</div>
);

export default Pages;

結論から書くと、一瞬 ssr と表示された後に、csr と表示が変わる。

恥ずかしながら、自分はてっきり ssr と表示され続けるとばかり思っていた。

ただし、上記のコードを書くと、コンソールに以下の warning が表示される。

Warning: Text content did not match. Server: "ssr" Client: "csr"

サーバサイドとクライアントサイドでレンダリングされた結果が違うよ!と怒られてしまう。

また、以下のコードでも、似たような warning が表示される。

import React from "react";
import moment from "moment";

const Moment: React.FC = (props) => <div>{moment().format()}</div>;

export default Moment;

こっちのほうが内容的にはむしろわかりやすくて、この記事に似たようなケースの対処法が書いてあった。

これはサーバーとクライアントとで、コードを実行している現地時間を返しているためらしい。

わかるような、わからんような。

ひとまず、以下のように書けば warning が解消された。

import React from "react";
import moment from "moment";

const Moment: React.FC = (props) => <div>{moment().locale("ja").format()}</div>;

export default Moment;

ssr、まだまだわからないことが多いです。

© 2018 kk-web