hey guys , going through the official nextjs learn course and this part is bugging me a little bit

page.tsx

console.log('rendering')
  const query = searchParams?.query || ''
  const currentPage = Number(searchParams?.page) || 1

  const totalPages = await fetchInvoicesPages(query)
return <>
 <Pagination/>
 <Search placeholder='Search invoices...' />
 <Table/>  
</>

search.tsx

"use client"
inside this file we change the search params to a input box search term and do router.replace(new path)

table.tsx

it has props of page query which it recieves from page.tsx
inside this file we do a server request fetch some stuff using page query

changing the search term and replacing should re render the the client router but how come the table which is a server component gets updated , and when i console.log('render') in page.tsx it show message on terminal which implies it's rendering on server again

if it is rendering on server shouldn't the entire page be updating since it's re rendering ?