Virtualized Lists in Server Components in Next.js 14: Potential Solutions and Alternatives
Answered
MatheusDeveloper posted this in #help-forum
ello Next.js community!
I'm looking to implement a virtualized list within a server component in Next.js 14. I'd like to know if there is a direct way to achieve this task, considering the DOM access limitations that server components have.
If this is not possible, what would be the best alternative to achieve the goal of rendering virtualized lists in a server component context?
I appreciate the community's help and suggestions in advance!
Additional Details:
I have already explored some virtualization libraries like React Virtualized, Downshift, and React Window, but I am unsure about the feasibility of using them in conjunction with server components.
I consider performance optimization to be an important factor, but I am also looking for a practical and implementable solution.
I am open to different approaches and suggestions as long as they are compatible with Next.js 14.
I'm looking to implement a virtualized list within a server component in Next.js 14. I'd like to know if there is a direct way to achieve this task, considering the DOM access limitations that server components have.
If this is not possible, what would be the best alternative to achieve the goal of rendering virtualized lists in a server component context?
I appreciate the community's help and suggestions in advance!
Additional Details:
I have already explored some virtualization libraries like React Virtualized, Downshift, and React Window, but I am unsure about the feasibility of using them in conjunction with server components.
I consider performance optimization to be an important factor, but I am also looking for a practical and implementable solution.
I am open to different approaches and suggestions as long as they are compatible with Next.js 14.
Answered by joulev
virtualised items need to be client components since they need to be remounted at will.
if you need data from server components, fetch it all in a parent server component and pass it to the client component where all the list rendering and virtualisation take place.
if you need data from server components, fetch it all in a parent server component and pass it to the client component where all the list rendering and virtualisation take place.
8 Replies
@MatheusDeveloper ello Next.js community!
I'm looking to implement a virtualized list within a server component in Next.js 14. I'd like to know if there is a direct way to achieve this task, considering the DOM access limitations that server components have.
If this is not possible, what would be the best alternative to achieve the goal of rendering virtualized lists in a server component context?
I appreciate the community's help and suggestions in advance!
Additional Details:
I have already explored some virtualization libraries like React Virtualized, Downshift, and React Window, but I am unsure about the feasibility of using them in conjunction with server components.
I consider performance optimization to be an important factor, but I am also looking for a practical and implementable solution.
I am open to different approaches and suggestions as long as they are compatible with Next.js 14.
virtualisation requires access to DOM events and client-side rerenders, so it's impossible to do it in server components.
in client components you already have great libraries that make virtualisation simple.
in client components you already have great libraries that make virtualisation simple.
Being necessary to use a server component to list, and not being possible to do a virtualization, would you have any other tip to work with large listings?
large listings requires virtualisation. you have to use a client component here.
Does it make sense to use the component server for the first rendering and as soon as the user scrolls the screen I switch to a component client to display the other items?
why do you have to use server components here?
It is the challenge of a vacancy that asks to use server components for the listing and a differential would be to use some tool for virtualization
virtualised items need to be client components since they need to be remounted at will.
if you need data from server components, fetch it all in a parent server component and pass it to the client component where all the list rendering and virtualisation take place.
if you need data from server components, fetch it all in a parent server component and pass it to the client component where all the list rendering and virtualisation take place.
Answer
It makes sense, thank you very much