conditional に rendering される component を nossr に

Author: nakaterm

web/app/friends/page.tsx

@@ -1,8 +1,14 @@
 "use client";
-
 import { useState } from "react";
-import Matchings from "~/components/match/matching";
-import Requests from "~/components/match/requests";
+
+// https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+import dynamic from "next/dynamic";
+const NoSSRMatchings = dynamic(() => import("~/components/match/matching"), {
+  ssr: false,
+});
+const NoSSRRequests = dynamic(() => import("~/components/match/requests"), {
+  ssr: false,
+});
 
 export default function Friends() {
   const [activeTab, setActiveTab] = useState("matching");
@@ -39,7 +45,7 @@ export default function Friends() {
 
       {/* コンテンツ部分 */}
       <div className="mt-4 text-center text-gray-700 text-lg">
-        {activeTab === "matching" ? <Matchings /> : <Requests />}
+        {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>
   );

web/components/match/matching.tsx

@@ -14,15 +14,11 @@ export default function Matchings() {
 
   return (
     <div className="p-4">
-      <p className="mr-10 ml-10 text-lg">
-        {data && data.length === 0 && (
-          <>
-            誰ともマッチングしていません。
-            <br />
-            リクエストを送りましょう！
-          </>
-        )}
-      </p>
+      {data && data.length === 0 && (
+        <p className="mr-10 ml-10 text-lg">
+          誰ともマッチングしていません。 リクエストを送りましょう！
+        </p>
+      )}
       {current === "loading" ? (
         <FullScreenCircularProgress />
       ) : error ? (