Understanding App Structure w/ RSC
Unanswered
Chilean jack mackerel posted this in #help-forum
Chilean jack mackerelOP
I'm new to NextJs, coming from vanilla React and other frameworks as well as server-focused development.
I'm struggling to get my head around the regular mixing of server- and client-side code. Has anyone else struggled with this? It feels a lot like going way back to the ASP Web Forms days where you sort of pretend that the server/client divide doesn't exist most of the time -- it led to a lot of when it suddenly mattered very much which side your code was operating on!
Does anyone have good advice on either structuring my project to better organize and track which code is server- vs client-side, or at least advice on how to mentally adapt to this "mixed" paradigm?
Apologies, I know this is a pretty vague question.
I'm struggling to get my head around the regular mixing of server- and client-side code. Has anyone else struggled with this? It feels a lot like going way back to the ASP Web Forms days where you sort of pretend that the server/client divide doesn't exist most of the time -- it led to a lot of when it suddenly mattered very much which side your code was operating on!
Does anyone have good advice on either structuring my project to better organize and track which code is server- vs client-side, or at least advice on how to mentally adapt to this "mixed" paradigm?
Apologies, I know this is a pretty vague question.
11 Replies
@Chilean jack mackerel some good advice is this guide: https://nextjs.org/docs/app/building-your-application/routing/colocation
To organize your project depending on different parts of your application. If you are using vscode, you can add an extention to show client vs server components
To organize your project depending on different parts of your application. If you are using vscode, you can add an extention to show client vs server components
@Chilean jack mackerel solved?
@Chilean jack mackerel ?
You're not alone, for instance I've recently written an article (https://medium.com/@eric.burel/how-to-get-rid-of-window-is-not-defined-and-hydration-mismatch-errors-in-next-js-567cc51b4a17) and a course (https://course.nextjspatterns.com/manage-client-only-code-in-next-js-with-react-browser-components) around managing client-only, that crashes server imports/renders in Next.js
I feel like this is actually literally the core point of Next
so it's normal that it takes time to get a good feeling of it. When you'll understand this client/server boundary correctly, you'll have mastered 90% of the value Next.js brings to developer and the reason why it's popular among beginners and professional
First, you'll want to take a look at the documentation, as mentionned above
then, follow the Next.js Learn tutorial
in particular, it teaches the "server-first approach" of Next.js App Router
in terms of philosophy, you are supposed (in most scenarios) to first start with server components, server actions, so server-only code, and then to involve client-only code very progressively and naturally
the Learn tutorial correctly shows this