Page with client-only logic - should I use Server Component?

[empty gate]

I have a page that displays a list of items, loaded with client-side fetch. There is also client-only logic:

• a top banner can be shown above the items (based on localStorage value)
• a feature flag is loaded from the third party service and can change the ui of the items

When I've migrated that page to Server Component and started to fetch items on the server, the behavior became worse.
Initially items are rendered on the server, but then client-only logic is applied. And it causes content shift and flickering:

• top banner shifts all items down
• after feature flag load items are flickering

What would be your suggestion for such case? Should I keep loading items with client-side fetch, or migrate to server component and use some technique to tackle these problems?
Thanks in advance!

[pallid thistle]

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)

[rancid plume]

@empty gate in this case, you can have a server page to simply fetch the data and pass it to a client component. That's the entire job of the server component. Then inside the client component you handle rendering with all your edge cases

This leads to fetching as a server component and rendering as a client component

[empty gate]

@rancid plume how can I fetch the data on server without rendering? Do you mean - import client component dynamically with no srr: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr ?

[rancid plume]

See, make your page. And then fetch data in there.

Now have a client component inside a whole different folder.

Understood till here?

[empty gate]

But in that case fetched data are still SSR-ed on server, and when client-only applied, flickering and content shift occurs..

[slate sapphire]

You can make skeleton for your banner before you check localStorage items. Then sudden layout shift won't happen if your skeleton takes space as much as the real banner. Same for feature flags, if it has loading state.

So, you can make page a server component that fetches default items, and make a top banner and items that feature flag is applied as a client component.

[modern rampart]

As mentioned in the previous answer, if you don't have a skeleton, you'll always have layout shift because the localStorage is only accessed on the Browser (client-side).

[empty gate]

@slate sapphire

You can make skeleton for your banner before you check localStorage items.

But in that case if banner should not be shown -> I will get content shift up due to that skeleton