How to render content in shadcn combobox component in server
Answered
Pacific anchoveta posted this in #help-forum
Pacific anchovetaOP
https://ui.shadcn.com/docs/components/combobox
I want to use this but the content in the combobox is on the server and doesn't change (json files accessing with the "fs" module). How can I static render the content in the combobox?
I want to use this but the content in the combobox is on the server and doesn't change (json files accessing with the "fs" module). How can I static render the content in the combobox?
Answered by joulev
Yes, so just use a server component for the fs call, then pass the data to a client component to use Combobox
9 Replies
Pacific anchovetaOP
I don't want to create an api route as it'll take some time to request it from the server; and the combobox component has to be a client component
@Pacific anchoveta https://ui.shadcn.com/docs/components/combobox
I want to use this but the content in the combobox is on the server and doesn't change (json files accessing with the "fs" module). How can I static render the content in the combobox?
import data from "./data.json"
// render Combobox from the data
return <div>There are {data.entries.length} entries</div>Pacific anchovetaOP
Thanks for the quick response. unfortunately the data is from a library so I can't really import the .json file
And the library uses fs to access the .json file
Yes then just use fs
As for static rendering, see https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering
Pacific anchovetaOP
Thing is, the combobox component is required to be a client component, and fs module does not exist in the client
Yes, so just use a server component for the fs call, then pass the data to a client component to use Combobox
Answer
Pacific anchovetaOP
Oh right, that should works, thank you so much for the help