How to get server side data on _app.tsx file

Here's my Refine and Next.JS application. How can I get data on the server side with the structure seen in my code?

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export declare const appWithTranslation: (WrappedComponent: React.ComponentType<AppProps> | React.ElementType<AppProps>, configOverride?: UserConfig | null) => ((props: AppProps) => JSX.Element) & hoistNonReactStatics.NonReactStatics<React.ComponentClass<AppProps, any> | React.FunctionComponent<AppProps>, {}>;

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {

  return (
    /* default Refine structure */
  );
}

export default appWithTranslation(MyApp);

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  noLayout?: boolean;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export declare const appWithTranslation: (WrappedComponent: React.ComponentType<AppProps> | React.ElementType<AppProps>, configOverride?: UserConfig | null) => ((props: AppProps) => JSX.Element) & hoistNonReactStatics.NonReactStatics<React.ComponentClass<AppProps, any> | React.FunctionComponent<AppProps>, {}>;

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {

  return (
    /* default Refine structure */
  );
}

export default appWithTranslation(MyApp);

2 Replies

kapa.ai•3w ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get server-side data in your _app.tsx file in a Refine and Next.js application, you can follow the structure provided in the knowledge sources. Here is a step-by-step guide to achieve this: 1. Import necessary modules: Ensure you have the necessary imports from Refine and Next.js. 2. Define the MyApp component: Use the getServerSideProps function to fetch data on the server side. 3. Pass the fetched data as props: Use the fetched data in your MyApp component. Here is an example based on the provided structure and the knowledge sources:

import { Refine } from "@refinedev/core";  
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";  
import routerProvider, {  
  DocumentTitleHandler,  
  UnsavedChangesNotifier,  
} from "@refinedev/nextjs-router/pages";  
import type { NextPage } from "next";  
import { AppProps } from "next/app";  
import { Layout } from "@components/layout";  
import dataProvider from "@refinedev/simple-rest";  
import "@styles/global.css";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {  
  noLayout?: boolean;  
};  

type AppPropsWithLayout = AppProps & {  
  Component: NextPageWithLayout;  
};  

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {  
  const renderComponent = () => {  
    if (Component.noLayout) {  
      return <Component {...pageProps} />;  
    }  

    return (  
      <Layout>  
        <Component {...pageProps} />  
      </Layout>  
    );  
  };
return (  
    <>  
      <RefineKbarProvider>  
        <Refine  
          routerProvider={routerProvider}  
          dataProvider={dataProvider(API_URL)}  
          options={{  
            syncWithLocation: true,  
            warnWhenUnsavedChanges: true,  
          }}  
        >  
          {renderComponent()}  
          <RefineKbar />  
          <UnsavedChangesNotifier />  
          <DocumentTitleHandler />  
        </Refine>  
      </RefineKbarProvider>  
    </>  
  );  
}  

export async function getServerSideProps() {  
  const response = await dataProvider(API_URL).getList({  
    resource: "posts",  
    pagination: { current: 1, pageSize: 10 },  
  });  

  return {  
    props: {  
      initialData: response.data,  
      total: response.total,  
    },  
  };  
}  

export default appWithTranslation(MyApp);

import { Refine } from "@refinedev/core";  
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";  
import routerProvider, {  
  DocumentTitleHandler,  
  UnsavedChangesNotifier,  
} from "@refinedev/nextjs-router/pages";  
import type { NextPage } from "next";  
import { AppProps } from "next/app";  
import { Layout } from "@components/layout";  
import dataProvider from "@refinedev/simple-rest";  
import "@styles/global.css";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {  
  noLayout?: boolean;  
};  

type AppPropsWithLayout = AppProps & {  
  Component: NextPageWithLayout;  
};  

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {  
  const renderComponent = () => {  
    if (Component.noLayout) {  
      return <Component {...pageProps} />;  
    }  

    return (  
      <Layout>  
        <Component {...pageProps} />  
      </Layout>  
    );  
  };
return (  
    <>  
      <RefineKbarProvider>  
        <Refine  
          routerProvider={routerProvider}  
          dataProvider={dataProvider(API_URL)}  
          options={{  
            syncWithLocation: true,  
            warnWhenUnsavedChanges: true,  
          }}  
        >  
          {renderComponent()}  
          <RefineKbar />  
          <UnsavedChangesNotifier />  
          <DocumentTitleHandler />  
        </Refine>  
      </RefineKbarProvider>  
    </>  
  );  
}  

export async function getServerSideProps() {  
  const response = await dataProvider(API_URL).getList({  
    resource: "posts",  
    pagination: { current: 1, pageSize: 10 },  
  });  

  return {  
    props: {  
      initialData: response.data,  
      total: response.total,  
    },  
  };  
}  

export default appWithTranslation(MyApp);

In this example: - The getServerSideProps function fetches data from the API and passes it as props to the MyApp component. - The MyApp component uses the initialData and total props to render the application. For more details, you can refer to the Refine documentation on SSR (https://refine.dev/docs/routing/integrations/next-js/#how-to-make-ssr-work) and the Next.js data fetching documentation (https://nextjs.org/docs/app/building-your-application/data-fetching). If you need further customization or have specific requirements, please refer to the Refine documentation (https://refine.dev/docs) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below