The future of data fetching with Next.Js 13

Next.js 13 is the latest version of the popular full-stack framework based on React. In this post, we'll take a look at the new data fetching features and how Xata can be seamlessly used with their next big version.

As announced at the Next.js Conf, Next.js 13 offers a completely new solution for file-system routing, nested layouts, incrementally streamed rendering, and component-level data fetching with React Server Components (RSC). You can find out more in the Next.js blog announcement or replay the keynote from Next.js Conf 2022.

At Xata, we are very excited about this new data fetching mechanism. It removes even more barriers between server and client code and is built on top of web standards, like the fetch API, and it works out of the box with our TypeScript SDK.

Prior to Next.js 13, data fetching on Next.js was usually done with getStaticProps and getServerSideProps, two powerful functions that allowed per page define server-side code that would be serialised and sent over the network to the user’s react code in the browser.

React 18 and Next.js 13 are offering a new way to build and run React Components either on the client or the server. Paired with Suspense for Data Fetching, now your application can safely access backend resources or fetch data without leaking sensitive data.

Moreover, taking advantage of the new nested layout mechanism allows for instant rendering of page parts that do not specifically require data. Your application can show a loading state for parts of the page that are fetching data and reduce the time to load the content.

At Xata we are building a serverless data platform that is an excellent companion for Next.js.

Since the Xata SDK is built on top of the same standards as the new data fetching mechanism from Next.js 13, you can already use them together and it will work out of the box. Let’s see an example!

const xata = getXataClient();

export default async function Blog() {
  const posts = await xata.db.posts.getAll();

  return (
    <div>
      <h1>Blog posts</h1>

      {data.map((post) => (
        <h2>{post.title}</h2>
      ))}
    </div>
  );
}

Simple, right? As you can see, by only defining the Xata SDK client outside of the server component, you can run any async query or function and the results will be available to be used in the component.

In a future update, we will expose the new cache strategy and data revalidation properties, so that when using Xata and Next.js you can take full advantage of static site generation, server-side rendering, and incremental static regeneration with the new use hook.

Stay tuned for our documentation updates that will showcase the newest way of fetching and rendering data with Next.js.

We are very proud of our partnership with Vercel, sharing a common vision on how modern and performant web applications can be built.

If you want to discuss more about the newest features in Next.js or you have already tried the new data fetching mechanism come to our discord and chat with us!