기존 코드

"use client";

import { useEffect, useContext } from "react";
import { AuthContext } from "../../context/AuthContext";
import ProfileComp from "../../components/Profile.page.component/ProfileComp";
import { useRouter } from "next/navigation";
import useLoading from "../../hooks/useLoading";

export default function MyPage() {
  const { currentlyLoggedIn } = useContext(AuthContext);
  const router = useRouter();
  const { setIsLoading } = useLoading();

  useEffect(() => {
    if (!currentlyLoggedIn) {
      router.push("/login"); 
    } else {
      setIsLoading(false);
    }
  }, [currentlyLoggedIn, router, setIsLoading]);

  return <ProfileComp />;
}

Context API를 활용하여 현재 로그인 여부를 판단한 뒤, 그에 따라 네비게이팅 되도록 했다.

이 경우 useEffect와 useContext, useRouter 훅을 사용하기 때문에 CSR이 불가피하다.

이것을 SSR로 바꿀 수 있을까?

잠깐!

Firebase Auth의 경우, 클라이언트 사이드에서만 사용할 수 있다.

getServerSession 을 활용하여 서버 사이드에서 로그인 여부를 확인할 수 있다.

import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import ProfileComp from "@/components/ProfileComp";
import { authOptions } from "@/lib/auth"; // next-auth 설정 파일

export default async function MyPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect("/login"); // 로그인 안 되어 있으면 로그인 페이지로
  }

  return <ProfileComp />;
}

이를 통해 페이지가 로드되기 전에 로그인 여부를 빠르게 확인할 수 있고, 화면 깜빡임 (Flickering) 현상도 없앨 수 있다.

또한, redirect("/login")은 서버에서 실행되므로 클라이언트에서 useRouter().push()를 호출할 필요 없다.