How to call a db service and pass the data to a client side? Which are all ways?
Unanswered
English Angora posted this in #help-forum
English AngoraOP
TLDR; I need to get data from a db query and use it in the client side page, I know that I can do it in two ways:
1 - creating an endpoint to call the db service and and call the endpoint in the client side to get this data
2 - wrapping the client side component with a ssr component, like:
But but boss tell me to modify the existing client side component to get the data from db service, but he said that isn't to do creating an endpoint, and also not wrapping the client component with a Server component/Page (that is ssr) component.
Which are the other ways to do it? By searching I din't found a solution without using those two methods (endpoint/wrapping).
I'm Jr. Dev. btw.
1 - creating an endpoint to call the db service and and call the endpoint in the client side to get this data
2 - wrapping the client side component with a ssr component, like:
import {DashboardClientComponent} from '...abcd';
import {dbQueryFunc} from '@/services';
const DashboardServerComponent = async () => {
const dbData = await dbQueryfunc()
<DashboardClientComponent data={dbData}/>
}But but boss tell me to modify the existing client side component to get the data from db service, but he said that isn't to do creating an endpoint, and also not wrapping the client component with a Server component/Page (that is ssr) component.
Which are the other ways to do it? By searching I din't found a solution without using those two methods (endpoint/wrapping).
I'm Jr. Dev. btw.
4 Replies
@English Angora TLDR; I need to get data from a db query and use it in the client side page, I know that I can do it in two ways:
1 - creating an endpoint to call the db service and and call the endpoint in the client side to get this data
2 - wrapping the client side component with a ssr component, like:
tsx
import {DashboardClientComponent} from '...abcd';
import {dbQueryFunc} from '@/services';
const DashboardServerComponent = async () => {
const dbData = await dbQueryfunc()
<DashboardClientComponent data={dbData}/>
}
But but boss tell me to modify the existing client side component to get the data from db service, but he said that isn't to do creating an endpoint, and also not wrapping the client component with a Server component/Page (that is ssr) component.
Which are the other ways to do it? By searching I din't found a solution without using those two methods (endpoint/wrapping).
I'm Jr. Dev. btw.
maybe he want to see an abstraction of endpoints: server actions. At the end all possible methods on how to fetch data are listed here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#examples
Brown bear
Hey @English Angora, what's your db service? It could be that the db has a client side library with implicit auth that lets you do this. For example, Supabase i think allows this.
However, if you have access with something like client credentials access, you'd want to avoid making a request to your database on the client so you don't expose any API keys.
However, if you have access with something like client credentials access, you'd want to avoid making a request to your database on the client so you don't expose any API keys.
@English Angora solved?