Questions on server components
Answered
Polar bear posted this in #help-forum
Polar bearOP
Hello guys. I'm half way through the Next.js course https://nextjs.org/learn . In the course it says
So I've got some questions.
- What does it mean by
- Aren't the API calls the same whether the site is SSR or not when fetching data? (client -> server -> database).
- Is there a chance of exposing my database secrets to the client if not fetching in Server Components? Let's say, a simple CRUD MERN app where all database queries are made by the server and 100% client components.
I'm quite new to web development so I might be missing or misunderstanding something.
If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client.So I've got some questions.
- What does it mean by
skip the API layer ?- Aren't the API calls the same whether the site is SSR or not when fetching data? (client -> server -> database).
- Is there a chance of exposing my database secrets to the client if not fetching in Server Components? Let's say, a simple CRUD MERN app where all database queries are made by the server and 100% client components.
I'm quite new to web development so I might be missing or misunderstanding something.
Answered by Toyger
it must still send at least a request to the serveryeah but its a bit more than that
if you don't have ssr then it
Client request page->get js from server->Rendering->Component Mount->Fetch page data from server -> server request database->final render page with data
if you go with ssr
Client request page->server make request for data from database->return final page with data-> react hook interactivity into rendered page
about client components, it's not what you think, client components doesn't mean that they will work only on client. but if you'll expose secrets for accessing database there, then anyone can do absolutely anything they want with your database, even tottaly remove it.
4 Replies
Toyger
skip api layer mean that instead fetching data on client from your backend when page loaded in browser and then rendering it, for example on component mount, you can fetch all needed data directly on server and render to user page already with all data provided.
nope with ssr you have direct access to database, with something like prisma for example, you don't need to call additional backend to get data.
about exposing keys, depends on how you'll implement everything, you still can use route handlers and server actions to make secure server-side fetch, but if you'll try to do it on client then yeah you can expose keys, but some db libraries just will not even pass build and will show you error.
nope with ssr you have direct access to database, with something like prisma for example, you don't need to call additional backend to get data.
about exposing keys, depends on how you'll implement everything, you still can use route handlers and server actions to make secure server-side fetch, but if you'll try to do it on client then yeah you can expose keys, but some db libraries just will not even pass build and will show you error.
@Toyger skip api layer mean that instead fetching data on client from your backend when page loaded in browser and then rendering it, for example on component mount, you can fetch all needed data directly on server and render to user page already with all data provided.
nope with ssr you have direct access to database, with something like prisma for example, you don't need to call additional backend to get data.
about exposing keys, depends on how you'll implement everything, you still can use route handlers and server actions to make secure server-side fetch, but if you'll try to do it on client then yeah you can expose keys, but some db libraries just will not even pass build and will show you error.
Polar bearOP
Thanks for answering. But I still don't get it. When a client needs data to be shown in the browser, no matter CSR or SSR, it must still send at least a request to the server. And the server still has to retrieve data from the database itself. So neither "skip the API layer" nor "query your database directly" seems to make sense to me. Also, I don't think "risking exposing your database secrets to the client" is a disadvantage of using client components since nobody would design an app where clients directly fetch data from database. If anything is exposed it would be API keys at most. Am I making sense?
Toyger
it must still send at least a request to the serveryeah but its a bit more than that
if you don't have ssr then it
Client request page->get js from server->Rendering->Component Mount->Fetch page data from server -> server request database->final render page with data
if you go with ssr
Client request page->server make request for data from database->return final page with data-> react hook interactivity into rendered page
about client components, it's not what you think, client components doesn't mean that they will work only on client. but if you'll expose secrets for accessing database there, then anyone can do absolutely anything they want with your database, even tottaly remove it.
Answer
Polar bearOP
Client request page->get js from server->Rendering->Component Mount->Fetch page data from server -> server request database->final render page with dataI see the additional layer now. Totally forgot that fetching data happens after the page is loaded. This might be what it means. Thanks a lot for clarifying🙠ðŸ™