antonio

Thank you for the thoughtful question!You're right that <code>ErrorBoundary</code> from <code>react-error-boundary</code> is a client component, and by default, React Server Components (RSC) cannot include client-only logic directly. However, it's important to understand how the two can safely interoperate.When a client component like <code>ErrorBoundary</code> is used to wrap another client component (for example, a component using <code>useSuspenseQuery</code>) inside a server component, React's rendering model ensures that this works correctly as long as the server component does not execute client-only logic itself.In the course, <code>ErrorBoundary</code> is used inside a server component, but it's wrapping a child component that uses <code>useSuspenseQuery</code>, which itself is a client component. This means:<ul><li>The server component acts as a wrapper, but delegates actual rendering and logic to the client boundary and child</li><li>React will automatically split the boundary at the client component, so only the client-side parts (<code>ErrorBoundary</code> and its children) run in the browser</li><li>This is safe and valid React behavior. It is essentially the same as rendering a client component from a server component, which is a common pattern in Next.js</li></ul>The same rules apply to <code><Suspense></code> as well. Although <code><Suspense></code> itself is a built-in React component, if it is used to wrap a client-side component that triggers data fetching (like one using <code>useSuspenseQuery</code>), the behavior is consistent. It will be rendered on the client, and it is completely valid for it to appear in a server component's tree as long as it wraps client logic.So to clarify:<blockquote>❗ What would not be allowed is calling client-only hooks or performing lifecycle logic directly inside the server component ✅ But rendering a client component (like <code>ErrorBoundary</code> or <code><Suspense></code>) from a server component is perfectly fine, as long as the logic stays on the client side</blockquote>Hope that clears it up!<hr>Translation (I used ChatGPT): 질문 감사합니다!<code>react-error-boundary</code>의 <code>ErrorBoundary</code>는 클라이언트 컴포넌트이기 때문에 기본적으로 서버 컴포넌트(RSC) 안에서 직접 클라이언트 전용 기능을 사용하는 것은 안 되는 것으로 알고 계신 점은 맞습니다. 하지만 React에서는 클라이언트 컴포넌트를 서버 컴포넌트 안에서 렌더링만 하는 것은 괜찮습니다.이번 강의에서는 <code>ErrorBoundary</code>가 서버 컴포넌트 안에 있지만, 실제로는 <code>useSuspenseQuery</code>를 사용하는 클라이언트 컴포넌트를 wrapping하는 형태입니다. 이 경우:<ul><li>서버 컴포넌트는 클라이언트 컴포넌트를 감싸는 랩퍼 역할만 합니다</li><li>React는 이 구조를 자동으로 인식하고, 클라이언트 컴포넌트부터는 클라이언트 전용 번들로 분리하여 처리합니다</li><li>즉, 서버 컴포넌트에서 클라이언트 컴포넌트를 렌더링만 하고 클라이언트 전용 훅이나 기능을 직접 사용하지 않는다면, 이는 완전히 유효한 패턴입니다</li></ul>이와 동일한 규칙은 <code><Suspense></code>에도 적용됩니다. <code><Suspense></code> 자체는 React 내장 컴포넌트이지만, 만약 클라이언트에서 실행되는 로직(예: <code>useSuspenseQuery</code>)을 포함한 컴포넌트를 감싸고 있다면, 이 역시 서버 컴포넌트 트리 안에 사용되어도 문제 없습니다. React가 자동으로 클라이언트 번들로 분리해서 처리합니다.✅ 요약하면:<ul><li>❌ 서버 컴포넌트에서 클라이언트 전용 훅이나 라이프사이클 기능을 직접 사용하는 것은 금지</li><li>✅ 하지만 <code>ErrorBoundary</code>, <code><Suspense></code> 같은 클라이언트 컴포넌트를 렌더링하는 것 자체는 문제 없습니다 (클라이언트 로직만 실행되는 한)</li></ul>도움이 되었길 바랍니다!

ErrorBoundary component 를 server component 에서 사용하는것

Thanks a lot for sharing this! 🙏 I haven’t been able to reproduce the issue on my side yet, but I really appreciate you taking the time to point it out. I’ll definitely keep an eye on it in case others run into the same problem. If I find anything concrete, I’ll update here for future learners.<blockquote>Translation (I used ChatGPT):</blockquote>공유해주셔서 정말 감사합니다! 🙏 아직 제 환경에서는 해당 문제가 재현되지 않았지만, 이렇게 알려주셔서 정말 감사드립니다. 다른 수강생분들께도 발생할 수 있는 부분이라 계속 주의 깊게 지켜보겠습니다. 확실한 내용을 확인하게 되면 이 글에 업데이트하도록 하겠습니다.

웹훅 동기화 에러

Hi! Thanks so much for picking up the course 🙏I approach the tutorial assuming you don't know too much at the start — so you’ll see that I explain things as we go, step by step. That said, there are a few slightly more advanced concepts, like prefetching in server components, which might feel tricky if you're completely new to Next.js.For that reason, I do recommend having a basic understanding of Next.js, just enough to be familiar with things like pages, components, and layouts — but you definitely don’t need to master it before starting.If you're already studying React now, you're on the right path. You’ll be fine! <hr> Translation (I used ChatGPT) 안녕하세요! 강의를 수강해 주셔서 정말 감사합니다 🙏이 강의는 처음부터 많은 걸 알고 있다고 가정하지 않고 진행되기 때문에, 단계별로 하나하나 설명해드리면서 같이 만들어갑니다. 다만, 서버 컴포넌트에서 prefetching 같은 약간은 고급 개념도 등장하기 때문에, Next.js에 대한 아주 기본적인 이해는 미리 갖추고 계시는 걸 추천드립니다.꼭 마스터할 필요는 없고, 페이지나 컴포넌트, 레이아웃 같은 Next.js의 기초만 알고 있어도 충분합니다.지금 React 공부 중이시라면 아주 잘하고 계시는 거예요. 걱정하지 마시고 따라오시면 됩니다!

이 강의를 수강하려면 React와 javascript만 알고있으면 되나요?

Hi there! First of all, thank you so much for taking the course 🙏 I'm the instructor of the tutorial, and in it, I use <code>create-next-app@15.1.6</code>.Because of that version, Tailwind CSS is initialized as v3, which automatically creates the <code>tailwind.config.ts</code> file. Starting with Tailwind v4, that file is no longer required for basic usage — so it's totally normal that you don’t see it when using a newer version like <code>15.3.3</code>.If you want to follow the tutorial as smoothly as possible, I recommend using the same version as me (15.1.6). That way, your setup will match mine exactly, and you’ll avoid unexpected differences.That said, using the latest versions is totally fine too — just be aware it might lead to small differences like the missing config file. If you do go with the newer versions (Tailwind v4, etc.), make sure you're also using the latest version of <code>shadcn/ui</code> and other related packages to avoid compatibility issues.Also, during the tutorial, I manually edit the <code>tailwind.config.ts</code> file. If you're using Tailwind v4 and don’t have that file, you can safely skip those edits — v4 handles a lot of those configurations automatically behind the scenes.Thanks again for following the course! 🙇‍♂ <hr> Translation (I used ChatGPT): 안녕하세요!먼저 제 강의를 수강해 주셔서 정말 감사합니다 🙏 저는 이 튜토리얼의 강사입니다.강의에서는 create-next-app@15.1.6 버전을 사용하고 있으며, 이 버전에서는 Tailwind CSS가 v3으로 설치되어 tailwind.config.ts 파일이 자동으로 생성됩니다.Tailwind v4부터는 기본적인 설정에 이 파일이 더 이상 필요하지 않기 때문에, 새 버전(예: 15.3.3)을 사용할 경우 해당 파일이 없는 것이 정상입니다.튜토리얼을 최대한 원활하게 따라가고 싶으시다면 제가 사용하는 동일한 버전(15.1.6)을 사용하는 것을 추천드립니다. 그러면 강의와 동일한 환경이 구성되어 혼란이 적습니다.물론, 최신 버전을 사용해도 괜찮습니다. 다만 tailwind.config.ts 파일이 없는 것처럼 약간의 차이로 인해 혼란이 생길 수 있습니다. 최신 Tailwind v4를 사용하신다면, shadcn/ui 및 다른 관련 패키지들도 최신 버전으로 함께 사용하시는 것을 권장드립니다. 그래야 호환성 문제가 줄어듭니다.또한 강의 중간에 제가 tailwind.config.ts 파일을 수정하는 장면이 나올 텐데요, 만약 Tailwind v4를 사용 중이고 해당 파일이 없다면, 그 부분은 그냥 건너뛰셔도 됩니다. Tailwind v4는 이전에 수동으로 했던 설정들을 자동으로 처리해주기 때문입니다.다시 한 번 강의를 들어주셔서 감사드리며 🙇‍♂

antonio

投稿