page.tsx contains the call to the endpoint (getGenre) to return the data and also the dynamic metadata function, so it's a server component.

I have a client component which maps thru the first 12 items and prints it. In order to get more data I need to update the offset in the getGenres call (api.com/?offset=${offset})

BUT how do I call getGenres from a component within the server one?

page.tsx

import type { Metadata } from 'next';
import getGenre from '@/app/data/getGenre';

export async function generateMetadata({ params: { slug } } : Params): Promise<Metadata> {
    // some code
}

export default async function Genres({ params: { slug } } : Params) {
   const genreData: Promise<unknown> = getGenre(slug, offset);
   const entities = await genreData; 
   
return (<GENRES COMPONENT slug={slug} />)
}

component/genres.tsx (simplified)

'use client';

export function TemplateShows(props: any) {
    const { entities, slug } = props;
    
    const loadMore = () => {
      console.log('load more');   
    } 

    const genres = return ('jsx template')
    const button = return ('<button className={styles.btn_loadmore} onClick={() => loadMore()}>Load More</button>')

    return [genres, button]
}

hopefully this makes sense!