use client 질문 입니다.

aptginwm

작성일 24.09.24 12:54 조회수 120

"use client"
import type { Metadata } from "next";
import "./globals.css";
import { RecoilRoot } from "recoil";
import ReactQueryProvider from "./config/ReactQueryProvider";

// export const metadata: Metadata = {
//   title: "Create Next App",
//   description: "Generated by create next app",
// };

export default function RootLayout({children,}: Readonly<{children: React.ReactNode}>) {
  return (
  <ReactQueryProvider>
    <RecoilRoot>
        <html>
          <body>
            <p>From Layout</p>
            {children}
          </body>
        </html>
    </RecoilRoot>
  </ReactQueryProvider>
  );
}

강의를 듣고나서 궁금한점이 생겼어요

recoil 하고 tanstack query 라이브러리 사용 하면서

provider만들어서 html을 감싸고 있는데 이러면 ssr이

안되는 것 아닌가요?

이러면 seo 치명적인 문제가 발생하는것 같은데

이런 경우에 어떻게 provider를 선언해서 ssr을 사용할 수 있는 건가요?

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

Git Repository 생성 및 초기 설정 진행

강의실 바로가기

파루미

2024.09.30

강의에서 이렇게 알려주나요? 잘못된 사용 방법입니다.

RootLayout은 Metadata를 필수적으로 남겨둬야 하고 SEO는 next.js를 쓰는 이유의 전부입니다.

만약 RootLayout에서 use client를 선언해버리면 모든 하위 컴포넌트는 클라이언트 컴포넌트로 분류됩니다. 이러면 안대용

'use client'로 만들어진 Provider로 root의 children을 감싸도 SSR로 작동하는 부분에서의 문제가 발생하지 않습니다. 다만 Recoil의 경우 클라이언트 컴포넌트에서만 사용 가능하기 때문에 클라이언트 컴포넌트를 <recoilroot>{children}</recoilroot> 처럼 만들고 rootlayout에서 임포트해서 사용하면 됩니다.

클라이언트 컴포넌트 안에서 서버 컴포넌트를 넣는것은 작동하지 않지만 클라이언트 컴포넌트 안에서 {children}을 넣는 것은 정상 작동합니다.

import type { Metadata } from "next";
import "./globals.css";
import { RecoilRoot } from "recoil";
import ReactQueryProvider from "./config/ReactQueryProvider";
import RecoilRootProvider from '경로'

export const metadata: Metadata = {
   title: "Create Next App",
  description: "Generated by create next app",
 };

export default function RootLayout({children,}: Readonly<{children: React.ReactNode}>) {
  return (
  <ReactQueryProvider>
    <RecoilRootProvider>
        <html>
          <body>
            <p>From Layout</p>
            {children}
          </body>
        </html>
    </RecoilRootProvider> // 이 부분을 다음과 같이 수정하세요
  </ReactQueryProvider>
  );
}

// recoilRootProvider.tsx
'use client'

import { RecoilRoot } from 'recoil'
export default function RecoilRootProvider({
  children,
}: {
  children: React.ReactNode
}) {
  return <RecoilRoot>{children}</RecoilRoot>
}

use client 질문 입니다.

aptginwm

답글

비슷한 유형의 고민있어요