fix: リロード時に背景色が必ずpinkになってしまう問題の修正 & 静的レンダリングされる箇所に動的な要素を入れてしまった問題を修正

tuatmcc · Nov 9, 2024 · 06d97b8 · 06d97b8
1 parent a4f917b
commit 06d97b8
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 76 deletions.
diff --git a/app/features/profile/useMyProfile.ts b/app/features/profile/useMyProfile.ts
@@ -7,6 +7,36 @@ import type { Json } from "~/libs/database";
 import { supabase } from "~/libs/supabase";
 import { useSession } from "../../hooks/useSession";
 
+export async function myProfileFetcher([_, userId]: [string, string]) {
+	if (!userId) return null;
+
+	const { data: rawProfile } = await supabase
+		.from("profiles_with_stats")
+		.select(
+			"user_id, display_name, high_score, play_count, rank, character_setting",
+		)
+		.eq("user_id", userId)
+		.limit(1)
+		.single();
+
+	if (!rawProfile) return null;
+
+	const characterSetting = deserializeCharacterSetting(
+		rawProfile.character_setting,
+	);
+
+	const profile: Profile = {
+		id: rawProfile.user_id,
+		displayName: rawProfile.display_name,
+		playCount: rawProfile.play_count,
+		highScore: rawProfile.high_score,
+		rank: rawProfile.rank,
+		characterSetting,
+	};
+
+	return profile;
+}
+
 interface UseMyProfile {
 	myProfile: Profile | null;
 	error: unknown;
@@ -24,43 +54,11 @@ export function useMyProfile(): UseMyProfile {
 		error,
 		mutate,
 		isValidating,
-	} = useSWR(
-		["/profile/me", session?.user.id],
-		async ([_, userId]) => {
-			if (!userId) return null;
-
-			const { data: rawProfile } = await supabase
-				.from("profiles_with_stats")
-				.select(
-					"user_id, display_name, high_score, play_count, rank, character_setting",
-				)
-				.eq("user_id", userId)
-				.limit(1)
-				.single();
-
-			if (!rawProfile) return null;
-
-			const characterSetting = deserializeCharacterSetting(
-				rawProfile.character_setting,
-			);
-
-			const profile: Profile = {
-				id: rawProfile.user_id,
-				displayName: rawProfile.display_name,
-				playCount: rawProfile.play_count,
-				highScore: rawProfile.high_score,
-				rank: rawProfile.rank,
-				characterSetting,
-			};
-
-			return profile;
-		},
-		{
-			suspense: true,
-			fallbackData: null,
-			refreshInterval: 1000 * 10,
-		},
-	);
+	} = useSWR(["/profile/me", session?.user.id], myProfileFetcher, {
+		suspense: true,
+		fallbackData: null,
+		refreshInterval: 1000 * 10,
+	});
 
 	const updateDisplayName = useCallback(
 		async (displayName: string) => {

diff --git a/app/hooks/useSession.ts b/app/hooks/useSession.ts
@@ -4,22 +4,20 @@ import useSWRSubscription from "swr/subscription";
 import type { SWRSubscriptionOptions } from "swr/subscription";
 import { supabase } from "~/libs/supabase";
 
+export async function sessionFetcher() {
+	const {
+		data: { session },
+	} = await supabase.auth.getSession();
+
+	return session;
+}
+
 export function useSession(): Session | null {
 	const key = "session";
-	const { data: initialSession } = useSWRImmutable(
-		key,
-		async () => {
-			const {
-				data: { session },
-			} = await supabase.auth.getSession();
-
-			return session;
-		},
-		{
-			suspense: true,
-			fallbackData: null,
-		},
-	);
+	const { data: initialSession } = useSWRImmutable(key, sessionFetcher, {
+		suspense: true,
+		fallbackData: null,
+	});
 
 	const { data: session } = useSWRSubscription(
 		key,

diff --git a/app/root.tsx b/app/root.tsx
@@ -11,13 +11,18 @@ import {
 } from "@remix-run/react";
 import { cva } from "class-variance-authority";
 import { type ReactNode, Suspense } from "react";
+import { preload } from "swr";
 import { Analytics } from "./components/Analytics";
 import { Background } from "./components/Background";
 import { BottomNav } from "./components/BottomNav";
 import { Button } from "./components/Button";
 import { Patterns } from "./components/Patterns";
 import { ThemeProvider } from "./components/Theme";
-import { useMyProfile } from "./features/profile/useMyProfile";
+import {
+	myProfileFetcher,
+	useMyProfile,
+} from "./features/profile/useMyProfile";
+import { sessionFetcher } from "./hooks/useSession";
 import { cn } from "./libs/utils";
 
 export const appThemes = cva(
@@ -32,9 +37,6 @@ const PATH_THEME_MAP: Record<string, "pink" | "cyan" | "emerald" | "yellow"> = {
 };
 
 export function Layout({ children }: { children: React.ReactNode }) {
-	const location = useLocation();
-	const theme = PATH_THEME_MAP[location.pathname] ?? "pink";
-
 	return (
 		<html lang="ja">
 			<head>
@@ -67,14 +69,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 				<link rel="manifest" href="/manifest.webmanifest" />
 			</head>
 			<body className={appThemes()}>
-				<ThemeProvider theme={theme}>
-					<Patterns />
-					<Background />
-					{children}
-					<Suspense fallback={null}>
-						<Nav path={location.pathname} />
-					</Suspense>
-				</ThemeProvider>
+				{children}
 				<ScrollRestoration />
 				<Scripts />
 			</body>
@@ -101,8 +96,28 @@ function Nav({ path }: NavProps): ReactNode {
 	);
 }
 
+export async function clientLoader() {
+	const session = await preload("session", sessionFetcher);
+
+	await preload(["/profile/me", session?.user.id], myProfileFetcher);
+
+	return null;
+}
+
 export default function App() {
-	return <Outlet />;
+	const location = useLocation();
+	const theme = PATH_THEME_MAP[location.pathname] ?? "pink";
+
+	return (
+		<ThemeProvider theme={theme}>
+			<Patterns />
+			<Background />
+			<Outlet />
+			<Suspense fallback={null}>
+				<Nav path={location.pathname} />
+			</Suspense>
+		</ThemeProvider>
+	);
 }
 
 export function HydrateFallback(): ReactNode {

diff --git a/app/routes/_auth.tsx b/app/routes/_auth.tsx
@@ -1,17 +1,19 @@
-import { Outlet, useNavigate } from "@remix-run/react";
-import { type ReactNode, useLayoutEffect } from "react";
-import { useSession } from "~/hooks/useSession";
+import { Outlet } from "@remix-run/react";
+import { redirect } from "@remix-run/react";
+import type { ReactNode } from "react";
+import { preload } from "swr";
+import { sessionFetcher, useSession } from "~/hooks/useSession";
 
-// _auth.**.tsx のパスへのアクセスは必ずここで前処理される
-export default function Layout(): ReactNode {
-	const navigate = useNavigate();
-	const session = useSession();
+export async function clientLoader() {
+	const session = await preload("session", sessionFetcher);
+	if (!session) {
+		return redirect("/");
+	}
 
-	useLayoutEffect(() => {
-		if (!session) {
-			navigate("/");
-		}
-	}, [session, navigate]);
+	return null;
+}
 
+// _auth.**.tsx のパスへのアクセスは必ずここで前処理される
+export default function Layout(): ReactNode {
 	return <Outlet />;
 }