DX dreams in Server Components

Introduction

Vercel, the cloud platform for frontend developers—and the creators and maintainers of Next. js, recently released Next.js 13. Obviously there was a big amount of new features, but the one that stood out for me was the introduction of Server Components. I have been following the development of this feature for a while now and I am really excited to see it finally come to life.

In this post I want you to be a visionary...Imagine that the year is 2024, and that Server components are stable and widely used. Currently, this is not the case, but I think it is a good exercise to think about how we would use this feature in a real world scenario.

Let's see the state of Server Components and use them with what I consider to be one of the best Databases when it comes to Developer Experience - Xata.

Overview of Xata and Server Components

Xata is a Database as a Service(DBaaS) that allows you to create a database in seconds and start using it right away. It is a great tool for developers who want to focus on building their product and not on setting up a database. It is also a splendid tool for people who want to learn how to use a database without having to install anything.

Xata's Feature Offerings

Xata aims to build a database service that is extremely easy to use (think of Airtable and its rich data types), yet providing the usual guarantees offered by traditional databases (consistency, transactions, constraints).

Some of Xata's key features are:

Instant Deployment: You can create a database ready for instant use in a matter of seconds.
Free Text Search: The search engine is very user friendly and is awesome for creating a search bar.
SDK: Xata has SDKs for many languages, including Javascript and Typescript. Particularly useful is their TypeScript type generation, which allows you to have type safety when using the database.
Branches: You can create branches to test new features without affecting your production database and Schema, which is really useful when you are working with a team.

Xata also have a built-in analytics and search engine, so you no longer have to copy the data from the DB to the search engine.

As for Server Components, they are a new feature that is currently in beta. They allow you to create components that run on the server and are rendered on the client. This means that you can create components that fetch data on the server and stream it to the client. The improvement in performance is massive and this is currently the best most cutting edge way to create a dynamic React application.

Let's go ahead and put Xata to use...

Creating Your Project

Let's create a new Next.js project with Server Components enabled:

npx create-next-app@latest --experimental-app

You will be prompted with a few options. Name your app xata-next and select Typescript as the language. You can leave the rest as default.

Creating Your Database

You will be using Xata to create our database. You can create a free account here.
After account setup, create a new database by clicking on the + button on dashboard page. The steps look like this:

Name your database. I will call mine server-components.
Select the region where you want your database to be hosted. I just kept the default.
Once on the database page, select the Start with sample data option. This will create a database with some sample data that you can use to test your application.

All in all, this took me under 15 seconds! Now that we have our database, we can start using it.

Connecting Your Database

Your database is now created and ready for use. Xata has SDKs for many languages, including Javascript and Typescript.

You will be using the Typescript SDK for this project.

Install Typescript SDK by running the following command from your project's root directory

cd xata-next # Go to your project's root directory

npm i --location=global @xata.io/cli # Install the Xata CLI

xata auth login # Login to your Xata account choose a new API key and complete the form in the browser

xata init # Initialize your project

You will be prompted a few questions, here are the settings I recommend:
- Select a database or create a new one: Select the database you created in the previous step.
- Do you want to use code generation in your project: Generate TypeScript code
- Choose the output file for the code generator: lib/xata.ts
- Choose a default development branch (fallback branch).: main
Now, to play around with the random data created in the previous step, you can run the following command:

xata codegen

This will populate the lib/xata.ts file with the types and functions that you can use to interact with your database. You can now start using your database in your project.

Querying Your Database

Create a simple component under app/page.tsx that fetches data from your database and renders it on the page:

import { getXataClient } from '../lib/xata'
import styles from './page.module.css'

export default async function Home() {
  const client = getXataClient()
  const post = await client.db.Posts.getFirst()
  return (
    <div className={styles.container}>
      <h1>{post?.title}</h1>
      <p>{post?.slug}</p>
      <p> {post?.text}</p>
    </div>
  )
}

The above is a very simple component that fetches the first post from your database and renders it on the page. You are using the getXataClient function to get a client that you can use to interact with your database.

This function is generated by the Xata CLI and is located in lib/xata.ts

Another interesting feature is that you are not using any hooks!

This is because Server Components can be async functions. This means that you can use the await keyword to wait for the data to be fetched from the database.

This, along with Xata code generation allows you to have type-safety when interacting with your database and to use the database without having to write any hooks.

It really does feel like coding in the future now doesn't it!

Conclusion

In this post you have seen how you can use Server Components with Xata.

You have experienced how you can create a database in seconds and start using it right away.

You have also seen how you can use the Xata CLI to generate types and functions that allow you to interact with your database.

A combination of Server Components and Xata is really powerful and allows you to create dynamic React applications with ease.

I hope you enjoyed this post and that you will try Server Components and Xata for yourself!

Connect with me on Twitter or on Youtube for chatting or asking questions!