React Server Components et Web3 : Le guide pratique

Le défi du Web3 côté serveur

Les RSC s'exécutent sur le serveur, mais les wallets sont côté client. Comment gérer cette dualité ?

Architecture recommandée

• RSC : Données publiques (prix, historique, stats)
• Client Components : Interactions wallet, transactions

Exemple concret

// app/token/[address]/page.tsx (Server Component)
async function TokenPage({ params }) {
  const tokenData = await fetchTokenData(params.address);

  return (
    

      
       {/* Client */}
    
  );
}

// components/TokenActions.tsx
"use client";
import { useAccount, useWriteContract } from "wagmi";

export function TokenActions({ address }) {
  const { isConnected } = useAccount();
  // ...
}

Avantages

SEO amélioré, temps de chargement réduit, hydration minimale.