Should the main page.jsx be CSR or SSR?
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
I am new to Nextjs and am unable to wrap my head around the basics or maybe my thought process isn't correct.
So basically I want to create a route where users can
1. See the list of movies (which is server-fetched),
2. Search new movies (which are rendered in the client)
3. Add one of the searched movie to the DB (using server-side actions) and
4. Make some state changes in the main component to conditionally render a few components.
As I understood if I make
And if I make
I want to fetch and add the movies to my DB using server APIs (I don't want to expose API keys to the client)
How do I go about this?
So basically I want to create a route where users can
1. See the list of movies (which is server-fetched),
2. Search new movies (which are rendered in the client)
3. Add one of the searched movie to the DB (using server-side actions) and
4. Make some state changes in the main component to conditionally render a few components.
As I understood if I make
Dashboard/page.jsx as a client component, it will not support children that use server-only APIs. And if I make
Dashboard/page.jsx as a server component, it does not support react hooks like useState and useEffects. (I want the children component to be able to manipulate the state of main component, which is page.jsx)I want to fetch and add the movies to my DB using server APIs (I don't want to expose API keys to the client)
How do I go about this?
6 Replies
@Cuvier’s Dwarf Caiman I am new to Nextjs and am unable to wrap my head around the basics or maybe my thought process isn't correct.
So basically I want to create a route where users can
1. See the list of movies (which is server-fetched),
2. Search new movies (which are rendered in the client)
3. Add one of the searched movie to the DB (using server-side actions) and
4. Make some state changes in the main component to conditionally render a few components.
As I understood if I make `Dashboard/page.jsx` as a client component, it will not support children that use server-only APIs.
And if I make `Dashboard/page.jsx` as a server component, it does not support react hooks like useState and useEffects. (I want the children component to be able to manipulate the state of main component, which is `page.jsx`)
I want to fetch and add the movies to my DB using server APIs (I don't want to expose API keys to the client)
How do I go about this?
it is better to let the page component as server component and render a client component because the metadata api is only available on server component
in your case, you could fetch the data with page server component then pass it down to a client component (1,2,4). Also, use server action for (3)
in your case, you could fetch the data with page server component then pass it down to a client component (1,2,4). Also, use server action for (3)
Cuvier’s Dwarf CaimanOP
Hey @Ray
That means I can't use react hooks in the page component right?
I was thinking of the same approach but wasn't sure if it was correct or not.
Thanks a lot.
That means I can't use react hooks in the page component right?
I was thinking of the same approach but wasn't sure if it was correct or not.
Thanks a lot.
@Cuvier’s Dwarf Caiman Hey <@743561772069421169>
That means I can't use react hooks in the page component right?
I was thinking of the same approach but wasn't sure if it was correct or not.
Thanks a lot.
export const metadata = {
title: "Page title"
}
export default async function Page() {
const data = await fetchData();
return <Client data={data} /> // <-- use hook here
}like this
Cuvier’s Dwarf CaimanOP
Awesome.
This is exactly what I was looking for.
Thanks a lot.
This is exactly what I was looking for.
Thanks a lot.
Knopper gall
To follow on, it's good practice to develop in a server-first ideology, the reason for this is for caching. Of course, there are some scenarios where it's impractical,
For your example, you could server render the app without the content, then client suspense the actual content (or with initial content, if you prefer), so the page loads really quickly (without the 'react-flicker') but then the dynamic content is streamed. This allows Next to cache the static stuff, like the structure of your DOM, and for the client to populate the data.
I hope this makes sense
For your example, you could server render the app without the content, then client suspense the actual content (or with initial content, if you prefer), so the page loads really quickly (without the 'react-flicker') but then the dynamic content is streamed. This allows Next to cache the static stuff, like the structure of your DOM, and for the client to populate the data.
I hope this makes sense
Cuvier’s Dwarf CaimanOP
@Knopper gall yes...it makes sense. Trying to achieve the same.
Thank you.
Thank you.