Data-fetching with React Server Components: is this a correct implementation?

Question

I'm using Next.JS in an application where I have a Navbar component that is needed on all pages of the application, and the Navbar renders data (specifically product-categories) that must be fetched from my database.

I want this component to be server-side rendered, but since Next.JS only supports page-level SSR and not component-level SSR, it seems that I must use getServerSideProps on all pages that I want to display this Navbar and write the same API request in each one, resulting in a ton of repeated logic and API calls across several pages.

While researching how to solve this, I came across React Server Components and wonder if that would be a valid solution for this scenario, but since I'm new to the concept, I'm not sure if I understand it correctly, hence why I'm writing this question.

I'm thinking of doing the following and want to get some feedback as to whether I am on the right track.

My Navbar component would be something like as follows:

const Navbar = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const data = await fetch("/api/someEndpoint");
    setData(data);
  };

  return (
    <div>
      {data.someProperty}
      {data.someOtherProperty}
    </div>
  );
};
export default Navbar;

Then I can create a global Layout component so that the Navbar is included in all pages, which is where React.Suspense would be used (if I understand it correctly):

const Layout = ({ children }) => {
  return (
    <>
       <React.Suspense fallback={<FallbackComponent />}>
         <Navbar />
       <React.Suspense />
       {children}
    </>
  );
};
export default Layout;

Then in _app.tsx, I would include my Layout component so that the Navbar is present everywhere:

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
  );
}

So here is my question: is this a correct implementation and valid use-case of React.Suspense? Is component-level data fetching one of the proposed benefits of React Server Components?

Answer 1

Now with the Next.JS 13 version, you can create an app directory that uses react server components by default.

But you should keep in mind that most of the React hooks like useState and useEffect won't work on server components, also previous Next.js APIs such as getServerSideProps, getStaticProps, and getInitialProps are not supported in the new app directory.

So instead, you can use the new fetch() API that was built on top of the native fetch() Web API. Check the docs for more details.