You want you leverage server components as much as possible to fetch data and then pass down to client components if needed, and if possible. There will be some scenarios where you can’t forward data from a server component to a client component via props, in these scenarios you’ll need to make a Route Handler and call it from your client component via fetch, I would recommend adding a Library like React Query or SWR if you need to do this.

— Btw the concepts are misleading here, SSR is used to refer to “Server Side Rendering” as the process where the server runs your code to generate HTML as the initial load of your page, or whatever rendering result.

When you talk about having the server fetch some data, because you need this data in a client component we’re talking just about the server not SSR

thanks for the reply! I basically want my whole page server side rendered since I'm using a CMS to get the content

some child components (determined by the content) use useState and useEffect but I still sometimes require extra data in that child component if that makes sense?

Yes, that makes perfect sense. The way is to make a Route Handler and call it from that client component if you can’t make use of server components to forward data.

so there'd be no way to get it server side rendered too? or would this still do that?

The data or the client component? You’re using the term “server side rendered”

Client components get pre-rendered on the server for the initial page load as well, which means they’re also server side rendered (SSR applies here) and once they’re on the client they hey hydrated, which means their JavaScript is sent to the client to run the effects and all that hydration implies

If you know ahead of time the data your client component will need then fetch it in server component and pass it down.

You could even kick off the promise on the server and pass the promise down to a client component to resolve. The server won’t await the function, just trigger it.

But honestly seems that what you need is to fetch data exclusively from the client, for that you can use Route Handlers

i'll try explain with a snippet of what I'm trying to do! ideally the page using this component would load with the data already populated

"use client";

import { useStoryblok } from "@/src/composables/useStoryblok";
import { useEffect } from "react";

const Menu = async() => {
    const data = await useStoryblok({ directory: "general/menu" });

    return (
        <div>
            Menu
        </div>
    )
};

export default Menu;

but async client components aren't allowed

Remove “use client” and continue to fetch data on the server component, then make a separate file with “use client” to make a client component pass the data down from your Menu (server component) to this new client component

The part “ make a separate file with “use client”… “ is optional, and only required if you need client side features. Sometimes you don’t even need them

ah okay so essentially making a server side rendered wrapper around the component?

You could say that, if you’re seeing the page as a wrapper.