how to always fetch data on server side based on client side interaction?

Question

I am using nextjs 14 in my project. I have 5 files to understand the working and ways to always fetch all the data on the server side only as per the doc of nextJS. My motive is to change the response based on the buttons clicked where response in rendered on server component. As mentioned in doc

When a new request is made to the server, all Server Components are rendered first, including those nested inside Client Components. The rendered result (RSC Payload) will contain references to the locations of Client Components. Then, on the client, React uses the RSC Payload to reconcile Server and Client Components into a single tree.

So i am trying to render the res value based on the button i clicked. i.e-> if i click search --> "MAKE THE SEARCH" must be printed and if query btn is clicked ---> "MAKE THE QUERY " must be printed and by default "Noting ...." msg will be printed over there.

Files are like -->

1. actions.js

"use server";
async function getData(agr) {
  const res = new Promise((res, rej) => {
    setTimeout(() => {
      res(agr);
    }, 50000);
  });
  return res;
}

export { getData };

2.ClientSideComponent.js

"use client";
import React, { Suspense, useState } from "react";
const ClientSide = ({ children }) => {
  console.log("The console from client side ");
  const [title, setTitle] = useState("");
  const handleClick = (arg) => {
    setTitle(arg);
  };

  return (
    <div>
      <button
        className="bg-blue"
        onClick={() => handleClick("MAKE THE SEARCH")}
      >
        SEARCH
      </button>

      <br />

      <button className="bg-red" onClick={() => handleClick("MAKE THE QUERY")}>
        QUERY
      </button>
      {children}
    </div>
  );
};

export default ClientSide;

3.layout.js

import React from "react";

const Dashboardlayout = ({ children }) => {
  return <div>{children}</div>;
};

export default Dashboardlayout;

4.page.js

import React from "react";
import ClientSide from "./Clientside";
import ServerSide from "./Serverside";

const Dashboardpage = () => {
  return (
    <div>
      
      <ClientSide>
        <ServerSide />
      </ClientSide>
    </div>
  );
};

export default Dashboardpage;

5.ServerSideComponent.js

"use server";
import { getData } from "./actions";
export { getData };
const ServerSide = async ({ title }) => {
  console.log("The console from server side ");
  const res = await getData(title);
  return <div>{res ? res : "Nothing to show yet "}</div>;
};

export default ServerSide;

Please correct me if i am wrong anywhere, but just for the Curiosity and to make my application more optimized, i am asking.