How to resolve the increased cost of web server caused by server action ?

[relax-code-relax-life]

Summary

I am using the App router + server action of Next v14. I have a page, running in mobile browser, that render a product list and support infinite scroll load.
There are 3 main files.

• app/product/page.tsx

'use server'
import { getList } from './action';
import List from './_client/List';
export default async function Page() {
  const initialData = await getList({ pageNumber: 0 });
  return <List initialData={initialData}>
}

• app/product/action.ts

'use server'
import { cookies } from 'next/headers';
export const getList = ( param: {pageNumber:number} ) => { 
    const token = cookies.get('token').value;
    return (await fetch('https://a.com/backend/api?pageNumber'+param.pageNumber, { headers: {token} })).json();
}

• app/product/_client/List.tsx

'use client'
import InfiniteScroll from 'infinite-scroll'
import { getList } from './action'
export default const List = ( props: { initialData: any[] } )=>{
   const [ items, setItems ] = useState( props.initialData );
   const [ pn, setPn ] = useState(1);
   const handleLoadMore = async ()=>{
      const newItems = await getList({ pageNumber: pn });
      setPn( pn + 1 );
      setItems( [...items, ...newItems] )
   }   

   return (
      <InfiniteScroll>
           { items.map( (item)=> {
                // ...
           } ) }
      </InfiniteScroll
   )
}

Now, it is make sense that the first request to backend by SSR is from my web server.
But, the subsequent request triggered by scroll-load will first go from the user mobile to my web server, and then from my web server to backend, which is unreasonable.
Because this increases the pressure on my web server, the subsequent requests should be directly requested to the backend.
But if I write another client fetch function, I will do not reuse the getList function of action. And I will have wrote two functions for the same logic, I think it's also unreasonable.
So, is there a good solution that can handle this situation, where the first SSR rendering uses server fetch, but then uses client fetch ?

Additional information

No response

Example

No response

[hamlim]

You could abstract getList a bit and make it not a server action, but instead a function that you call on both the server and the client:

// getList.ts
// "shared" module - can be imported from both a client and a server component

export async function getList({ token }) {
  return (await fetch(/* ..... */)).json()
}

In the server component:

import {getList} from './get-list'

export async default function() {
  const token = cookies().get('token').value
  const list = await getList({token});
  // render
}

and in a client component:

"use client";
import {getList} from './get-list'

export default function({initialList}) {
  // .... same as before ...
  // access cookies via `document.cookie` or a wrapping API, pass to `getList`
}

[relax-code-relax-life]

Thanks for your answer. It's a good way, but in my case, there has another issue.
Actually, I'm not just taking one cookie, I'm taking several cookies together, and I want to wrap this logic in getList(). Users who use getList() doesn't need the logic to relate the cookie values in it, just pass a pageNumber.
In server, I get cookie need import next/headers. So, it will throw an error: "You're importing a component that needs next/headers. That only works in a Server Component".
I have tried import next/headers dynamically by import(). But it doesn't work.