client side with server side fetch

Answered

Perdonium posted this in #help-forum

2023-10-03T17:28:00.000Z

Hey everyone ðŸ™‚ I'm currently trying to understand client side/server side components. Can a server side page contains client side component? In that case, is it possible to pre-fetch the data used for the client side component on the server side? for example a json list

Answered by Arinji

hii, ok so a server component can have a client component in it

View full answer

23 Replies

Arinji

2023-10-03T17:28:52.000Z

hii, ok so a server component can have a client component in it

Answer

Arinji

2023-10-03T17:29:49.000Z

for data fetching, you basically have a server page to fetch data, then you pass it as props to all the components in it

An example

import { getSpotifyData } from "@/lib/functions/getSpotifyData";
import { Wrapper } from "./wrapper";

export default async function Spotify() {
  const spotifyData = await getSpotifyData();

  let spotifyTrack =
    spotifyData.trackId!.length > 0
      ? spotifyData.trackId
      : "18XlJEroUwFo0tLZxscgXE";

  return (
    <div className="flex h-fit min-h-[calc(100svh-90px)] w-full flex-col items-center justify-start">
      <div className="mt-10 flex h-full w-[90%] flex-col items-center justify-center gap-4 md:w-[90%] md:max-w-[1167px]">
        <Wrapper serverID={spotifyTrack!} serverMode={spotifyData.mode!} />
      </div>
    </div>
  );
}