Fetching Data with Axios in Next.js 15: A Complete Guide

In Next.js 15, fetching data can be done in both Server Components and Client Components, with distinct differences in behavior, performance, and SEO impact. Using Axios for data fetching is a popular choice due to its simplicity and flexibility. In this guide, we’ll explore how to use Axios in both Server and Client Components, the differences between them, and best practices.

Key Differences Between Server and Client Components

Using Axios in Server Components

Example: Fetching Data in a Server Component

Server Components fetch data during the server rendering process. This ensures that the data is part of the HTML sent to the browser, which improves SEO.

// app/server-component-example/page.tsx
import axios from 'axios';

type Post = {
  id: number;
  title: string;
  body: string;
};

async function fetchPosts(): Promise<Post[]> {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return response.data;
}

export default async function ServerComponentExample() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1>Server-Fetched Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Key Points

1. SEO: Data fetched on the server is embedded in the initial HTML, making it visible to search engines and improving SEO.
2. Source Code Visibility: Data will be visible in the browser's view-source.
3. Best Use Case: Static or SEO-critical data that does not require frequent updates or interactivity.

Using Axios in Client Components

Example: Fetching Data in a Client Component

Client Components fetch data after the page loads in the browser. This is not SEO-friendly but allows for dynamic and interactive updates.

'use client';

import axios from 'axios';
import { useEffect, useState } from 'react';

type Post = {
  id: number;
  title: string;
  body: string;
};

export default function ClientComponentExample() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchPosts() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setPosts(response.data);
      } catch (error) {
        console.error('Error fetching posts:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchPosts();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Client-Fetched Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Key Points

1. SEO: Data is not part of the initial HTML, so it won’t improve SEO.
2. Source Code Visibility: Data will not be visible in the view-source.
3. Reactivity: Ideal for dynamic content that changes frequently or depends on user interactions.

When to Use Server vs. Client Fetching

Best Practices for Using Axios in Next.js 15

1. Always Handle Errors Gracefully

Wrap your Axios calls in try-catch blocks to handle errors effectively.

2. Optimize for SEO

Use Server Components for data that impacts SEO. Client Components should be used for data that doesn’t require indexing by search engines.

3. Reduce Redundant Fetching

Avoid duplicating Axios calls across components. Instead, consider using data-fetching libraries like React Query or SWR for caching and synchronization.

4. Security Considerations

Avoid exposing sensitive information in your Axios calls when fetching on the client side, as this data can be inspected in the browser.

SEO Impact of Fetching Data

• Server Components: Improve SEO by embedding data in the HTML sent to the client. This makes content accessible to search engine crawlers.
• Client Components: Do not improve SEO, as data is fetched dynamically and not included in the initial HTML.

Conclusion

Fetching data with Axios in Next.js 15 is straightforward and flexible, thanks to the clear separation between Server and Client Components. By understanding the differences and best practices, you can create performant and SEO-friendly applications while delivering dynamic and interactive experiences.

Use Server Components for static and SEO-critical data, and Client Components for dynamic or user-specific data. Always handle errors gracefully and be mindful of your application's performance and security.

I hope you found this helpful! Let’s connect on LinkedIn or GitHub 🚀