you must wrap your application in an <SSRProvider> 오류 (SSRProvider)

npm run dev로

Next.js프로젝트 진행중 위와같은 알림이 떴다.

 

관련하여 검색을해보니

 

부트스트랩을 가져와 사용중인데, SSR관련해서 컴포넌트를 감싸줘서 사용해야 하는 이슈가 있었다.

 

React는 CSR이니 상관없는데 Next.js는 신경써줘야 하는것 같다. 당장 작동은 되지만 추후 어떤 문제가

 

있을지 모르기 때문에 방법대로 해결 하기로 결정

https://react-bootstrap.github.io/getting-started/server-side-rendering/

React-Bootstrap

Server-side Rendering

React-Bootstrap automatically generates an id for some components (such as DropdownToggle) if they are not provided. This is done for accessibility purposes.

In server-side rendered applications, a SSRProvider must wrap the application in order to ensure that the auto-generated ids are consistent between the server and client.

import SSRProvider from 'react-bootstrap/SSRProvider';

<SSRProvider>
  <App />
</SSRProvider>

이와같이 설정해주면 된다.

 

Next.js에서는 __app.tsx or __app.js에 설정을 해주었다.

 

__app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from "../components/Layout";
import 'bootstrap/dist/css/bootstrap.min.css';
import SSRProvider from 'react-bootstrap/SSRProvider';



function MyApp({ Component, pageProps }: AppProps) {
  return <>
  <SSRProvider>
  <Layout>
  <Component {...pageProps} />
  </Layout>
  </SSRProvider>
  

  </>
}

export default MyApp

이와같이 return문 안에서 감싸줘서  사용했다.

 

이와같이 일단 사라지긴했는데 계속 주시해서 지켜봐야할것 같다.

 

검색해도 나오지않아서 후... 

 

https://github.com/GeekyAnts/NativeBase/issues/4273

How to fix the SSRProvider Warning in React Native? · Issue #4273 · GeekyAnts/NativeBase

여기 댓글들을 보며 해결해보자

 

I had this same issue. I am using React Native and Nativebase.IO

Terminal Error: "When server rendering, you must wrap your application in an to ensure consistent ids are generated between the client and server."

Solution:

Add SSR Package
npm i @react-aria/ssr or yarn add @react-aria/ssr

Import SSR
import {SSRProvider} from '@react-aria/ssr'; 

Wrap your main app or current provider with SSRProvider. The example below: React Native + Nativebase.IO

 <SSRProvider> <NativeBaseProvider> <App /> </NativeBaseProvider> </SSRProvider>

Terminate, rebuild, and/or reload the app. (Clear NPM cache if needed.)
Hope this helps some.

(Update - 1 21 2022: Make sure the SSRProvider wraps all other providers and components)

Sources:
https://react-spectrum.adobe.com/react-aria/ssr.html
https://react-spectrum.adobe.com/react-aria/SSRProvider.html
https://www.razorwebs.com/how-to-fix-ssrprovider-warning-on-react-native-nextjs-native-base/

개인적으론 이 답변이 도움이 되었다. 리액트 부트스트랩중에 오류가나면 리액트 부트스트랩 오류페이지 대로

해결하면 되지만 또 저런오류가나면 이와같이 해결하면 될것 같다.