#서버컴포넌트

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

nextjs 서버컴포넌트 질문있습니다 !

안녕하세요 nextjs 14 app router 공부 중 질문이있어 이렇게 글 남깁니다.... 1. ”use client“ 클라이언트 컴포넌트가 자식으로 서버컴포넌트를 가져오면 그 아래의 모든 컴포넌트는 서버컴포넌트로 동작이 아닌 클라이언트 컴포넌트가 되는건지 궁금합니다.. 2. 그렇다면 layout단에서 use client를 사용한 provider가 있다면 children으로 받은 모든 페이지들은 클라이언트 컴포넌트가 되는건지 궁금합니다... 3. 서버컴포넌트랑 SSR이 다른 개념이라는데 너무 헷갈립니다.. 혹시 다른점이 뭔지 알 수 있을까요? 궁금한 점들을 나열하다보니 두서가 없어진거같아서 죄송합니다.. 좋은 히루 보내세요 :) !!!!

컴포넌트 외부에서 Props로 데이터 받기 vs 컴포넌트 내부에서 데이터 fetch하기

부모 자식이 모두 서버컴포넌트일 때 부모가 데이터를 fetch하고 자식에게 props로 전달해 주는것과, 자식 컴포넌트 내부에서 데이터를 fetch하는것 중 어떤것이 확장성과 재사용성에 있어 더 좋은 컴포넌트인가요? 아래 코드에서 MyLikes는 내가 찜한 아이템, MyComments는 내가 작성한 댓글을 보여주는 컴포넌트 입니다. 처음엔 컴포넌트가 너무 구체적인 정보를 다루면 재사용성과 확장성이 떨어진다고 들어 외부에서 props로 전달하는 방식으로 만들었습니다. 그런데 MyLikes, MyComments는 내가 찜 한 아이템 데이터, 내가 작성한 댓글을 보여준다는 역할이 명확환 컴포넌트들이기 때문에 이미 구체적인 컴포넌트가 되었다고 생각됩니다. 이런 경우 이미 확장성, 재사용성이 떨어지기 떄문에 어떤 방식으로 데이터를 가져오던지 상관이 없는걸까요?

react에서 Nextjs 마이그레이션

Nextjs마이그레이션 작업을 진행할려고하는데, 사실 막막한 부분이 여러가지가 있습니다. 첫번째는 CSS-in-JS인데 기존 react프로젝트의 styled-component로 제작되어 있는데, 제가 알기론 CSS-in-JS의경우 서버컴포넌트에선 현재 작동하지 않는걸로 아는데 보통 이럴경우 어떻게 진행하나요? 대체방안으로 따로 다른 CSS 라이브러리 등을 이용하는지 궁금합니다 두번째는 데이터 패치관련된 부분인데 Nextjs에서 fetchAPI 부분을 Nextjs에 맞게 캐시와 revalitate옵션을 제공해주는 형태로 제공해주는데, 기존에 프로젝트는 axios를 사용중인데 이것 또한 변경을 해야되는지 궁금하네요 현재 서버렌더링과 클라이언트 렌더링으로 나눠놓긴했는데 나누고보니 상당히 이슈가 많을걸로 예상되어 질문드립니다

React 18 에서 서버 컴포넌트 사용이 가능한가요?

새로 사이드 프로젝트로 리액트 18을 사용하면서 서버컴포넌트를 사용해보고 싶은데, 아무리 검색해봐도 서버컴포넌트에 대한 소개와 next 13에서 사용할 수 있다. 라고만 찾을 수 있을 뿐 순수 리액트 18에서 사용이 가능한지 어떻게 사용하는지 나와있지가 않네요. 혹시 아시는 분 계실까요? 사용이 가능하다면 어떤식으로 사용 할 수있는지 궁금합니다.

[Next.js 13] 서버컴포넌트와 클라컴포넌트 구분

Next.js13을 처음으로 도입하여 사이트를 개발 중인데, 궁금한 점이 생겨 질문 올립니다. 처음부터 서버컴포넌트와 클라이언트 컴포넌트를 구분하며 개발을 하나요? 아니면, 우선 대부분 클라이언트 컴포넌트로 구현하고 점차 서버 컴포넌트로 변경하나요?

Nextjs async 서버컴포넌트 질문있습니다.

// page.tsx import WeatherList from "@/components/containers/main/WeatherList"; export default function Home({ searchParams, }: { searchParams: { country: string }; }) { const country = searchParams.country ? searchParams.country : "kr"; return ( <> <WeatherList country={country} /> </> ); } // server component export default async function WeatherList({ country }: { country: string }) { const res = await fetch( `http://localhost:3000/api/cityList?country=${country}` ); const cityList = await res.json(); return ( ... ); } 'WeatherList' cannot be used as a JSX component. page.tsx 에서 WeatherList 컴포넌트부분에 위와같은 에러가 뜹니다.. @types/react 를 18.2.8 버전으로 바꿔줘도 해결이안되는데 저와 같은분 계실까요?

Nextjs 13 서버 컴포넌트 데이터 페칭 질문있습니다.

어제 공식문서를 공부를 조금 해봤는데 데이터 페칭은 왠만하면 서버컴포넌트 측에서 한다고 봤습니다! 근데 만약 데이터를 페칭하는데 필터를 거치는 데이터는 어떻게 해야할까요? 예를들면 리스트가 있는데 낮은가격순 높은가격순 등등으로 필터링을해서 다시 데이터를 리렌더링해야하는데 이럴경우 state로 하려합니다. 근데 서버컴포넌트에선 useHook같은걸 못써서 어떻게 해야할지 잘모르겠습니다. 이럴경우 그냥 클라이언트 컴포넌트로 만들고 리액트쿼리 써야하는걸까요?

Next.js 13 서버 컴포넌트 조건부 렌더링

안녕하세요. 개인프로젝트로 SEO가 중요한 웹 애플리케이션을 만들고 있어서 Next.js 13을 배워 사용중입니다. 프로젝트를 진행하다보니 막막한 구간에 들어섰습니다. 조건부 렌더링으로 사용자의 조작에 따라서 각각 다른 컴포넌트들을 렌더링하려고 페이지 루트 컴포넌트에 useState()를 사용했습니다. 그리고 그러다보니 루트 컴포넌트에 'use client'를 선언하게 되었고 루트 컴포넌트는 자연스럽게 클라이언트 컴포넌트가 되었습니다. 그런데 여기서 의문이 들었습니다. next 13 공식문서에서는 컴포넌트를 클라이언트 컴포넌트로 만들면 모든 하위 컴포넌트들이 클라이언트 컴포넌트가 되기 때문에 SEO에 취약해질수있다. 그러니 되도록이면 서버 컴포넌트를 상위에 배치시키고 클라이언트 컴포넌트는 하위 컴포넌트로 배치하는게 좋다. 이렇게 나와있는데 조건부 렌더링 기능을 넣자니 클라이언트 컴포넌트로 만들어야되서 SEO가 취약해지고, 조건부 렌더링을 빼자니 프로젝트가 너무 밋밋해지고.. 되도록이면 루트컴포넌트는 서버컴포넌트를 유지하면서 조건부 렌더링 기능을 넣고싶은데 막막하네요.. 혹시 서버컴포넌트에서 조건부 렌더링을 할수있는 방법이 있을까요? 현업에서는 이런상황일때 어떻게 하시나요?

next auth를 사용중인데 서버 컴포넌트에서 useSession을 사용하는 방법이 있을까요?

안녕하세요 next 13버전으로 프론트를 구현하고있습니다. 로그인은 next auth로 하고 있고 12버전에서 13으로 올리면서 useSession을 사용하는 부분에 에러가 발생합니다. Error: React Context is unavailable in Server Components next.js 13버전은 서버컴포넌트가 기본으로 알고 있어서 일반적인 방법으로는 useSession을 사용하지 못하는 것 같습니다. 혹시 서버 컴포넌트에서 next auth의 session값을 불러올 수 있는 방법이 있을까요?