use client 질문 입니다.
457
"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을 사용할 수 있는 건가요?
답변 1
0
강의에서 이렇게 알려주나요? 잘못된 사용 방법입니다.
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>
}속았어요 ㅠㅠ, 왕초보인데, gui 이었으면..
0
394
0
파이어 베이스만 사용하는데
0
349
1
페이지네이션 랜더링 질문
0
444
1
서버공부 (Java spring)
0
434
0
신규 강의가 비슷하게 나왔던데
0
431
0
안드로이드 playstore 앱 배포 관련 질문
1
350
0
Firebase Storage생성하려고 하면 프로젝트업그레이드(결제)를 하라고 하네요. 강의 시점과 차이가 발생한 기능인가요?
0
1519
1
안녕하세요 질문있습니다!
0
413
1
여기 이제 강사님 답변은 볼수없는거에요?
0
471
1
제로초님의 로그인 기능 기초 강의를 들으려면 어떤 강의를 들을면 될까요?
0
390
1
안녕하세요!
0
426
1
와.... 리스트뷰, 리사이클뷰
1
432
1