Page with client-only logic - should I use Server Component?
Unanswered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
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!
- 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!
9 Replies
@Chinese Alligator 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
Chinese AlligatorOP
@Arinji 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 ?
@Chinese Alligator <@890486507872342027> 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 ?
See, make your page. And then fetch data in there.
Now have a client component inside a whole different folder.
Understood till here?
Now have a client component inside a whole different folder.
Understood till here?
Chinese AlligatorOP
But in that case fetched data are still SSR-ed on server, and when client-only applied, flickering and content shift occurs..
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.
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.
Asian black bear
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).
Chinese AlligatorOP
@LuiGee
But in that case if banner should not be shown -> I will get content shift up due to that skeleton
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
@Asian black bear 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).
Chinese AlligatorOP
It seems that even with skeleton I can get content shift.
So my question is more common - in the NextJS docs I don't see such limitation for server components, but in my case I face it. Are there some recommendations in the docs when to use and not to use server components?
So my question is more common - in the NextJS docs I don't see such limitation for server components, but in my case I face it. Are there some recommendations in the docs when to use and not to use server components?