In order to overcome the challenge of using client-side components in server-side pages, I made the decision to create a client-side wrapper to encapsulate these components within server-side pages. This way, I can manage all API calls and data fetching on the server and then pass it down to the components.
Do you think this is a good practice? Feel free to review the code snippet below:
ClientSideWrapper:
"use client";
interface ClientWrapperProps {
children: React.ReactNode;
}
export const ClientWrapper = ({ children }: ClientWrapperProps) => {
return <>{children}</>;
};
page.tsx
export default async function ResourcesPage({
params,
}: {
params: { slug: string };
}) {
// Code for handling resources, tags, filtering, and structuring data
...
// Rendering UI elements based on processed data
...
}