Best Practices for Using Server Actions as Fetcher in SWR

[AlexandreCrevel-Ose]

Hello everyone,
I'm currently working on a Next.js 14 POC. I've got a django backend and I don't want to expose it to the client.
My idea is to use server actions to handle every API calls.
I've got a custom function to fetch data from server side components.
For client components, I want to use SWR with a custom fetcher function defined on top level of my app (with a SWRProvider).

Here is a simplified version of my code :

'use server';
import { auth } from '@/auth';

export const fetcher = async (url: string) => {
  try {
    const session = await auth();
    const headers = {
      'X-USER-EMAIL': session?.user?.email ?? '',
      'X-API-KEY': process.env.API_KEY ?? '',
      'Content-Type': 'application/json',
    }
    const options: RequestInit = {
      method: 'GET',
      next: { revalidate: 100, tags: ['data'] },
      headers,
    };

    const response = await fetch(`${process.env.DJANGO_API_URL}${url}`, options);

    if (!response.ok) {
      const errorBody = await response.text();
      const errorMessage = `Error fetching data: ${url} Status: ${response.status}. ${response.statusText}. Response body: ${errorBody}`;
      throw new Error(errorMessage);
    }
    return await response.json();
  } catch (error) {
    console.error('API Request Error:', error);
    throw new Error(`Unexpected error: ${error}`);
  }
};

My SWR Configuration :

'use client';
import { fetcher } from '@/app/actions/fetcher';
import type React from 'react';
import type { ReactNode } from 'react';
import { SWRConfig } from 'swr';

type SWRProviderProps = {
  children: ReactNode;
};

export const SWRProvider: React.FC<SWRProviderProps> = ({ children }) => {
  return <SWRConfig value={{ fetcher }}>{children}</SWRConfig>;
};

Discussion Points

Do you see errors, bad practices, any comment on this code?
Performance: Are there any performance concerns with this approach, particularly regarding latency and server load?
Caching and Revalidation: How should I best handle caching and revalidation both on the server-side and client-side components (using SWR)?
Error Handling: Is my current error handling strategy effective, or are there better patterns to follow?
Best Practices: Are there any best practices or recommendations for using server actions as a fetcher in SWR that I should be aware of?

I appreciate any insights or advice from the community. Thank you!