#Big Client & Server component problem

1 messages · Page 1 of 1 (latest)

night skiff
#

My colleague and I have nearly finished a large project together. We migrated our application from a Laravel/React stack using Inertia.js to a headless architecture with Next.js (App Router) and Laravel as the backend.

Yesterday, we tried to set up a testing environment and attempted to build the project. During development, everything worked fine locally — we never encountered any major issues. But now, trying to build the project feels like opening a can of endless errors.

The project structure looks like this:

app/

  • posts/
    page.tsx <--- Entire frontend logic for this route

components/
table.tsx
dropdown.tsx
...etc.

The main issue: we made everything a client component.
I spent the whole day fixing one issue after another — things like "document is not defined", but once I fix one error, the next one appears. Sometimes, even a page that had no errors before suddenly breaks again.

The two most common errors we're facing:
"document is not defined"
"useSearchParams() should be wrapped in a suspense boundary at page..."

Our question:
Is there a solid tutorial or guide that explains how to properly split pages and components between server and client components in Next.js?

At this point, we’re really desperate for anything that could help us move forward.

lunar orbitBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

marsh oarBOT
polar quartz
#

I don’t think there’s a quick and easy guide to learn all that you need to know about Next.js to be able to solve these problems.

It’s a whole new mental model, Server Components (the default) are the entry points of a page, and Client Componentes should be seen as a kind of plug-in components that you bring into your server components to be able to make use of client-side only features, browser APIs and basically interactivity, but you should try not to make everything a client component.

Your issue of “document is not defined” occurred because Next.js does SSR (Server Side Rendering) of your components, (even client components as an optimization) so when they run on the server the window object does not exist since it’s a Browser API, and document is part of the window API

#

and for the useSearchParams() problem, this is necessary in Next 15 since SearchParams and other APIs are not marked as dynamic APIs, and by wrapping the components that use these dynamic APIs Next.js can know how to optimize your App.
Wrapping a component that uses
useSearchParams() in <Suspense> lets Next.js go ahead and pre-render as much as your pages that do not depend on request time data (such as search params)

polar quartz
night skiff
#

Big Client & Server component problem

#

@polar quartz thanks.
Whats the best way to re-fetch data using a server component?
For example, the application has a table where data can be edited or deleted inside a modal.
Once a change is made, the table should refresh to reflect the updated data. (Updating just the array isnt a solution, multiple users will use the software)

It feels counterproductive to build a separate function just to re-fetch the data on a client component.

polar quartz
#

For an app like that you can make use of client components, but try not to make the whole app a client component. Instead, leave the page as a default server component to fetch initial data and pass the initial data down to a client component to handle the rest