Next JS

Turbocharging Your Next.js App with Version 15's Data Caching Superpowers

Vasanth Jagadeesan

— 3 min read

Imagine this: you're building a blazing-fast blog with Next.js. Your users expect lightning-fast page loads, but fetching data from your PostgreSQL database for every request feels like trying to outrun a cheetah. This is where Next.js 15's data fetching revolution swoops in to save the day.

The Need for Speed: The Problem with Repeated Data Fetching

Every time a user loads your blog's homepage, your app fetches the latest posts from the database. While this guarantees fresh content, it also means repeating the same database query over and over. This redundancy slows down your app and burdens your database.

Enter data caching: a powerful technique that stores frequently accessed data in a temporary storage, making subsequent requests lightning fast.

Next.js 15 to the Rescue: Effortless Data Caching

Next.js 15 introduces built-in data caching mechanisms that make optimizing your app a breeze. We'll explore this by building a simple blog post list using:

  • Next.js 15: For our powerful frontend framework.
  • PostgreSQL: A robust relational database to store our blog posts.
  • Prisma ORM: A fantastic tool to simplify database interactions.
  • Neon Serverless Postgres: A cloud-based PostgreSQL provider with a generous free tier – perfect for trying out this tutorial.

Setting Up Our Project

  1. Get Started with Neon:
    • Head over to https://neon.tech and create a free account.
    • Follow their intuitive dashboard to set up a new PostgreSQL project.
    • Grab your connection string - we'll need it soon!
  2. Configure Prisma:
    • Create a prisma folder at your project's root.
  3. Connect Prisma to Neon:

Generate Prisma Client:

npx prisma generate

Create a .env.local file in your project's root and add your Neon database connection string:

DATABASE_URL="your_neon_connection_string_here"

Inside the prisma folder, create a schema.prisma file:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        String   @id @default(uuid())
  title     String
  content   String
  createdAt DateTime @default(now())
}

Install Dependencies:

npm install prisma @prisma/client pg @types/pg

Bootstrap Your Next.js Project:

npx create-next-app@latest my-blog --typescript 
cd my-blog

Creating Our API Route

Set up the API Route:Create a file called [id].ts inside pages/api/posts:

import { NextApiRequest, NextApiResponse } from 'next';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'GET') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  try {
    const posts = await prisma.post.findMany();
    res.status(200).json(posts);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Something went wrong' });
  }
}

Displaying Posts on the Homepage

Fetch Data with fetch and revalidate:

import { useState, useEffect } from 'react';

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await fetch('/api/posts');
      const data = await response.json();
      setPosts(data);
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Unleashing the Power of Data Caching with getServerSideProps

    • Add revalidate to enable caching (set the time in seconds):
    • This function fetches data on the server before sending the rendered HTML to the client:

Implement getServerSideProps:

import { GetServerSideProps } from 'next';

// ... (previous code)

export const getServerSideProps: GetServerSideProps = async () => {
    const response = await fetch('http://localhost:3000/api/posts'); // Replace with your actual URL if different
    const posts = await response.json();

    return {
        props: {
            posts,
        },
    };
};

Modify Your API Route:

// ... (previous code)
export const revalidate = 60; // Cache for 60 seconds

export default async function handler(
    // ... your code
) { 
  // ... your code
}

Conclusion: A Faster, More Efficient Next.js Experience

By implementing data caching in our Next.js application, we've unlocked a new level of performance. Users will enjoy faster page loads, and our backend will thank us for reducing unnecessary database strain.

Next.js 15 makes integrating data caching incredibly simple, and when combined with the power of PostgreSQL, Prisma, and Neon, building high-performance applications becomes an enjoyable experience. So go forth, build fast, and watch your Next.js applications soar!

Read more