Next.js에서 세션에 따라 클라이언트 컴포넌트를 조건부로 렌더링하는 방법

Next.js에서 세션에 따라 클라이언트 컴포넌트를 조건부로 렌더링하는 방법

안녕하세요!

 

오늘은 Next.js 애플리케이션에서 클라이언트 컴포넌트를 세션에 따라 조건부로 렌더링하는 방법에 대해 알아볼까요?

 

특히 서버 렌더링의 SEO 이점을 잃지 않으면서 세션 기반 렌더링을 구현하는 방법을 살펴보도록 하죠.

문제의 배경

현재 여러분의 Next.js 애플리케이션은 app 디렉토리 내에서 대부분의 컴포넌트가 서버 렌더링되고, 일부 리프 컴포넌트만 클라이언트 렌더링된다는 점이 중요한데요.

 

여기서 "리프 컴포넌트"는 쉽게 말해 "가장 끝에 있는 컴포넌트"를 뜻하는데요.

 

즉, 다른 컴포넌트 안에 포함되어 있는 하위 컴포넌트 중에서 더 이상 다른 컴포넌트를 포함하지 않는 컴포넌트입니다.

 

예를 들어, 어떤 웹 페이지가 여러 개의 컴포넌트로 구성되어 있을 때, 그 중에서 다른 컴포넌트를 포함하지 않는 가장 작은 단위의 컴포넌트를 "리프 컴포넌트"라고 할 수 있죠.

 

즉, "다른 컴포넌트를 포함하지 않는 하위 컴포넌트들만 클라이언트에서 렌더링된다는 것"입니다.

 

여러분은 NextAuth를 사용하여 세션을 관리하고 있다고 하셨죠.

 

이제 세션이 있을 때만 클라이언트 컴포넌트를 렌더링하고 싶어하는 상황입니다.

 

여기서 문제가 발생하는데요.

 

import { useSession } from 'next-auth/react'를 사용하려고 하니 다음과 같은 오류 메시지가 나타납니다:

Error: [next-auth]: useSession must be wrapped in a <SessionProvider />

 

이 오류는 useSession 훅을 사용하기 위해서는 반드시 SessionProvider로 감싸야 한다는 의미입니다.

 

하지만 이렇게 하면 ‘use client’를 사용해야 하는지 걱정이 되는 상황인데요.

주요 질문

여러분이 제기한 두 가지 주요 질문은 다음과 같습니다:

• 'use client'를 사용하면 모든 서버 컴포넌트가 클라이언트에서 렌더링되나요?
• 서버 렌더링의 SEO 이점을 잃게 되나요?

이 질문에 대한 해답을 살펴보죠.

세션 기반 클라이언트 컴포넌트 렌더링 방법

getServerSession 사용하기: Next.js에서는 getServerSession 메서드를 사용하여 서버 측에서 세션 상태를 확인할 수 있습니다.

 

이를 통해 클라이언트 컴포넌트를 조건부로 렌더링할 수 있습니다.

import { getServerSession } from "next-auth/next";

export async function getServerSideProps(context) {
  const session = await getServerSession(context.req, context.res);
  return {
    props: { session },
  };
}

 

위 코드는 서버에서 세션 정보를 가져오고, 클라이언트 컴포넌트를 렌더링할 때 이 정보를 사용할 수 있도록 합니다.

 

클라이언트 컴포넌트 렌더링: 이제 세션이 있을 때만 클라이언트 컴포넌트를 렌더링하면 됩니다.

import { useSession } from "next-auth/react";

const MyComponent = () => {
  const { data: session } = useSession();

  if (!session) {
    return <p>Please log in</p>;
  }

  return <div>Welcome, {session.user.name}!</div>;
};

 

SessionProvider 사용하기: SessionProvider를 사용하여 전체 애플리케이션에서 세션을 관리할 수도 있습니다.

 

하지만 이 경우, 'use client'를 사용하는 것이 아닌 적절한 컴포넌트에서만 사용하는 것이 중요합니다.

import { SessionProvider } from "next-auth/react";

const MyApp = ({ Component, pageProps }) => {
  return (
    <SessionProvider session={pageProps.session}>
    <Component {...pageProps} />
</SessionProvider>
);
};

결론

결론적으로, Next.js 애플리케이션에서 세션에 따라 클라이언트 컴포넌트를 조건부로 렌더링하는 방법은 충분히 가능하며, getServerSession을 활용하면 더 간단하게 구현할 수 있습니다

 

'use client'를 사용하는 것이 아니라, 원하는 곳에서 세션을 확인하고 적절한 컴포넌트를 렌더링하는 방법을 선택하는 것이 중요합니다.

 

이렇게 하면 SEO 이점을 유지하면서도 사용자 경험을 개선할 수 있죠.