Astro + Turso: The Perfect Pair for Building Fast, Scalable Websites

Astro

Astro is an open-source web framework designed specifically for building content-heavy websites such as blogs, e-commerce sites, and marketing pages. It follows a unique server-first rendering model that minimizes client-side JavaScript, which makes it highly performant by default. This is achieved through its island architecture, where only specific components are hydrated and rendered on the client-side, reducing overall page load times and improving SEO performance. Additionally, Astro is framework-agnostic, allowing developers to use components from popular JavaScript frameworks like React, Vue, Svelte, and others, making it flexible and easy to integrate into existing projects.

Astro also supports both Static Site Generation (SSG) and Server-Side Rendering (SSR), giving developers control over how content is generated and delivered. This makes Astro a versatile option for projects that range from static blogs to more dynamic web applications that need real-time updates. For more details on Astro’s capabilities, you can check out their official documentation.

Turso

Turso is a distributed database platform built on SQLite, known for its lightweight footprint and efficiency. Turso extends SQLite’s capabilities by supporting distributed data storage and retrieval, which makes it ideal for managing content across multiple regions with low-latency access. This setup is particularly useful for modern web applications that need to deliver content quickly and efficiently to users around the world.

By leveraging SQLite, Turso maintains compatibility with an array of existing tools and workflows, while its edge-oriented architecture ensures fast data access and real-time updates. This enables Astro to efficiently handle dynamic content, supporting real-time data fetching and server-side rendering without sacrificing performance. For more information on Turso’s SQLite integration and its benefits, check out the Turso documentation and additional insights on distributed data handling.

Turso can handle dynamic data efficiently and support Astro’s SSR capabilities to deliver up-to-date content without compromising speed. This combination makes Astro and Turso a powerful duo for developers looking to create fast, responsive, and scalable content-driven websites.

Building the Website with Astro

Let’s start by creating a new Astro project.

Copy
npm create astro@latest

Follow the prompts to set up your project. Once the project is created, navigate into the project directory and install the dependencies.

Copy
cd your-project-name
npm install

Note that we are using the template with sample files. We will not be building front-end components in this tutorial. You should see the following directory structure (skipping files that are not relevant to this tutorial).

Copy
your-project-name/
├── node_modules/
├── public/
├── src/
│   ├── components/
│       └── Card.astro
│   ├── layouts/
│       └── Layout.astro
│   └── pages/
└──     └── index.astro

Creating a Database and Table with Turso CLI

Copy
turso auth login

Copy
turso db create my-database

Copy
turso db shell my-database

Copy
CREATE TABLE posts (
    slug TEXT PRIMARY KEY,
    title TEXT NOT NULL,
    body TEXT NOT NULL
);

Copy
SELECT * FROM posts;
INSERT INTO 
    posts (slug, title, body) 
VALUES 
    ('my-first-post', 'My First Post', 'This is the first post.'),
    ('my-second-post', 'My Second Post', 'Is the 2nd one better?'),
    ('my-third-post', 'My Third Post', 'Practice makes perfect.');

Copy
.quit

Copy
turso db show my-database --url

Copy
├── node_modules/
├── public/
├── src/
│   ├── components/
│       └── Card.astro
│   ├── layouts/
│       └── Layout.astro
│   └── pages/
│       └── index.astro
└── .env

Copy
# .env
TURSO_URL="libsql://something.turso.io"

Copy
turso db tokens create my-database

Copy
# .env
TURSO_URL="libsql://my-database-username.turso.io"
TURSO_AUTH=some.long.string

Interacting with the Database

We will now create a new file src/lib/db.ts to interact with the Turso database. But first we need to install @libsql/client to interact with the database and dotenv to load the environment variables from our .env file.

Copy
npm install @libsql/client dotenv

Copy
// src/lib/db.ts

import { createClient } from '@libsql/client';

// Load environment variables from .env file for local development
import dotenv from 'dotenv';
dotenv.config();

export interface Post {
    slug: string;
    title: string;
    body: string;
}

async function queryDatabase(client: { execute: (arg0: string) => any; }, query: string) {
    try {
        const result = await client.execute(query);
        return result;
    } catch (error) {
        console.error('Error querying the database:', error);
    }
}

async function getClient() {
    const tursoUrl = process.env.TURSO_URL;
    if (!tursoUrl) {
        throw new Error('TURSO_URL is not defined in the environment variables');
    }

    const tursoAuth = process.env.TURSO_AUTH;
    if (!tursoAuth) {
        throw new Error('TURSO_AUTH is not defined in the environment variables');
    }

    return createClient({
        url: tursoUrl,
        authToken: tursoAuth,
    });
}

function mapResultToObjects(result: any) {
    const { columns, rows } = result;
    return rows.map((row: any) => {
        const obj: any = {};
        columns.forEach((col: string) => {
            obj[col] = row[col];
        });
        return obj;
    });
}

export async function getAllPosts():Promise<Post[]> {
    const client = await getClient();
    
    const data = await queryDatabase(client, 'SELECT * FROM posts');
    
    if (data) {
        const posts: Post[] = mapResultToObjects(data);
        return posts;
    }

    console.error('No posts found');
    return [];
}

Fetching Data in Astro

Now we will fetch the posts from the Turso database and display them on our index page and create a new page to display the content of a single post.

Copy
---
// src/pages/index.astro
import Card from '../components/Card.astro';

// Fetch posts from the Turso database
import { getAllPosts } from '../lib/db';
const posts = await getAllPosts();
---

<div>
    <h1>My Blog</h1>
    <div class="grid">
        {posts.map((post:Post) => (
            <Card
                href={`/posts/${post.slug}`}
                title={post.title}
                body={post.body}
            />
        ))}
    </div>
</div>

Copy
---
// src/pages/[slug].astro
import { getAllPosts, type Post } from '../../lib/utils/db';

export async function getStaticPaths() {
    const posts = await getAllPosts();

    return posts.map((post: Post) => ({
        params: { slug: post.slug }, 
        props: post,
    }));
}

export async function get({ props }: { props: any }) {
    return {
        props,
    };
}
---
<div>
    <h1>{Astro.props.title}</h1>
    <p>{Astro.props.body}</p>
</div>