fullcalendar
Next.jsでfullcalendarをつかうと、
Warning: Prop `id` did not match. Server: "fc-dom-16" Client: "fc-dom-2"
上記のようなWarningが出ます。
直訳すると、クライアントとサーバーのidがあっていないようですね。
Next.jsはSSR前提で動いているので、こういったことが起こる可能性があります。
こんな時は、Dynamic Importが役に立ちます。
import Calendar from "./Calendar";
↓
const Calendar = dynamic(() => import("./Calendar"), {
ssr: false,
});
Calendarコンポーネントのimportを上記のように書き換えます。
Dynamic Importの書き方に{ssr: false}というオプションを渡してあげるだけで、「このファイルはSSRしない」とNextが判断するので、エラー回避することができます。
SSRエラーの例
もっとわかりやすくすると、サーバー側で、ブラウザの機能は使えません。
import React from "react";
const Test = () => {
window.location.reload();
return <div>Test</div>;
};
export default Test;
例えばこのようなコンポーネントを使おうとすると、
Server Error
ReferenceError: window is not defined
windowオブジェクトはクライアント側のjavaScriptが提供しているものです。
カレンダーと同じようにimportの方法を変えてやります。
import Test from "./Test";
↓
const Test = dynamic(() => import("./Test"), {
ssr: false,
});
これでクライアントサイドレンダリングになり、無事windowオブジェクトは使用できます。