גלריית NFT מהירה: סינון לפי תכונות, מיון לפי נדירות, שילוב API

הבעיה של גלריות NFT בטעינה איטית

תארו לעצמכם: אוסף ה-NFT שלכם כולל 10,000 טוקנים, כל אחד עם מאפייני תכונה ייחודיים. קונים פוטנציאליים מבקרים באתר ומצפים לטעינת גלריה מיידית, לסינון לפי נדירות, וליכולת למיין לפי מחיר רצפה. אבל עם קריאה ישירה מהחוזה דרך tokenURI, כל בקשה הולכת לצומת RPC, ואז ל-IPFS—הדף נטען במשך עשרות שניות, המסננים לא עובדים, ומשתמשים עוזבים. נתקלנו בזה פעמים רבות ופיתחנו גישה שפותרת את הבעיה מהשורש.

אילו בעיות אנחנו פותרים

טעינה איטית בקריאה ישירה מהחוזה. עבור אוסף של 5,000 טוקנים, נדרשות 5,000 קריאות RPC—כל אחת אורכת 200–500 אלפיות השנייה, בעלות של ~$0.0002 לכל קריאה. זמן טעינת גלריה סופי: >5 דקות. שימוש ב-NFT API (Reservoir, OpenSea, Alchemy) מקצר את הזמן ל-<2 שניות ומבטל עלויות RPC לאחזור.

מורכבות הסינון לפי תכונה. ללא נתונים מתועדים, סינון בצד הלקוח פירושו מעבר על כל הטוקנים. עם Reservoir API, אנחנו מקבלים מאפיינים מחושבים מראש ותדירותם, מה שמאפשר מסננים עם תגובה מיידית (<100 אלפיות השנייה).

חוסר ב-SEO לדפי פרטים. כל דף טוקן חייב להיות מתועד על ידי מנועי חיפוש. אנחנו משתמשים ביצירת אתרים סטטיים (SSG) וברגנרציה סטטית מצטברת (ISR) ב-Next.js—דפים מוגשים כ-HTML מוכן, לא נטענים דרך JavaScript. זה משפר את LCP לפחות מ-1.5 שניות ומגביר תנועת SEO ב-40%.

הפתרון שלנו: אינטגרציה עם NFT API

טכנולוגיות: Next.js 14 (App Router) בצד הקדמי, TypeScript, Tailwind CSS לממשק. צד אחורי—Laravel 11 או Node.js (אופציונלי) אם יש צורך ב-API מותאם על גבי Reservoir. לנתונים, אנחנו משתמשים ב-Reservoir API—הוא מציע תוכנית חינמית של 60 בקשות לדקה, מספיק לרוב הגלריות עם מטמון. עם ניסיון של מעל 5 שנים בפיתוח Web3 ו-50+ פרויקטי NFT מוצלחים, אנחנו מספקים גלריות מוכנות לייצור.

מקרה בוחן: CyberPunks 2.0

הלקוח השיק אוסף של 8,000 טוקנים. יישמנו גלריה עם מסנני תכונות, מיון לפי נדירות, ודף פרטים. במקום קריאה ישירה מהחוזה, הגדרנו את Reservoir—הדף נטען ב-1.2 שניות (LCP), מסננים עובדים ללא רענון הודות למצב URL. לדפי פרטים, השתמשנו ב-ISR עם אימות פעם בשעה—תנועת SEO גדלה ב-40% תוך חודש. השגנו גם הפחתה של 95% בקריאות RPC על ידי שמירת תגובות במטמון.

// lib/collection.ts
const RESERVOIR_BASE = 'https://api.reservoir.tools';

export interface CollectionToken {
  tokenId: string;
  name: string;
  image: string;
  rarityScore: number;
  rarityRank: number;
  attributes: Array<{ key: string; value: string; tokenCount: number }>;
  lastSalePrice: string | null;
  floorAskPrice: string | null;
}

export async function getCollectionTokens(
  contractAddress: string,
  opts: {
    limit?: number;
    offset?: number;
    sortBy?: 'floorAskPrice' | 'rarity' | 'tokenId';
    attributes?: Record<string, string>;
  } = {},
): Promise<{ tokens: CollectionToken[]; total: number }> {
  const params = new URLSearchParams({
    collection: contractAddress,
    limit: String(opts.limit ?? 20),
    offset: String(opts.offset ?? 0),
    sortBy: opts.sortBy ?? 'tokenId',
    includeAttributes: 'true',
    includeLastSale: 'true',
  });

  if (opts.attributes) {
    for (const [key, value] of Object.entries(opts.attributes)) {
      params.append('attributes[' + key + ']', value);
    }
  }

  const res = await fetch(`${RESERVOIR_BASE}/tokens/v7?${params}`, {
    headers: {
      'x-api-key': process.env.RESERVOIR_API_KEY ?? '',
    },
    next: { revalidate: 60 },
  });

  const data = await res.json();

  return {
    tokens: data.tokens.map(mapToken),
    total: data.totalTokens ?? 0,
  };
}

סינון לפי מאפייני תכונה

מסננים נשמרים בפרמטרי URL—משתמשים יכולים לשתף קישור לתצוגה המסוננת. רכיב הגלריה קורא את // lib/collection.ts const RESERVOIR_BASE = 'https://api.reservoir.tools'; export interface CollectionToken { tokenId: string; name: string; image: string; rarityScore: number; rarityRank: number; attributes: Array<{ key: string; value: string; tokenCount: number }>; lastSalePrice: string | null; floorAskPrice: string | null; } export async function getCollectionTokens( contractAddress: string, opts: { limit?: number; offset?: number; sortBy?: 'floorAskPrice' | 'rarity' | 'tokenId'; attributes?: Record<string, string>; } = {}, ): Promise<{ tokens: CollectionToken[]; total: number }> { const params = new URLSearchParams({ collection: contractAddress, limit: String(opts.limit ?? 20), offset: String(opts.offset ?? 0), sortBy: opts.sortBy ?? 'tokenId', includeAttributes: 'true', includeLastSale: 'true', }); if (opts.attributes) { for (const [key, value] of Object.entries(opts.attributes)) { params.append('attributes[' + key + ']', value); } } const res = await fetch(`${RESERVOIR_BASE}/tokens/v7?${params}`, { headers: { 'x-api-key': process.env.RESERVOIR_API_KEY ?? '' }, next: { revalidate: 60 }, }); const data = await res.json(); return { tokens: data.tokens.map(mapToken), total: data.totalTokens ?? 0, }; } , מעביר אותם ל-API, ומציג את התגובה מיידית. דוגמת יישום עם Next.js App Router:

// app/gallery/page.tsx (Next.js App Router)
import { useSearchParams, useRouter } from 'next/navigation';
import { getCollectionTokens, getCollectionAttributes } from '@/lib/collection';

const CONTRACT = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS!;

export default async function GalleryPage({
  searchParams,
}: {
  searchParams: Record<string, string>;
}) {
  const page = parseInt(searchParams.page ?? '1');
  const sortBy = (searchParams.sort ?? 'tokenId') as 'floorAskPrice' | 'rarity' | 'tokenId';

  // Собираем attribute-фильтры из search params
  const attributes: Record<string, string> = {};
  for (const [key, value] of Object.entries(searchParams)) {
    if (!['page', 'sort'].includes(key)) {
      attributes[key] = value;
    }
  }

  const [{ tokens, total }, attrs] = await Promise.all([
    getCollectionTokens(CONTRACT, {
      limit: 24,
      offset: (page - 1) * 24,
      sortBy,
      attributes: Object.keys(attributes).length ? attributes : undefined,
    }),
    getCollectionAttributes(CONTRACT),
  ]);

  return (
    <div className="flex gap-8">
      <TraitFilters attributes={attrs} activeFilters={attributes} />
      <div className="flex-1">
        <SortControl currentSort={sortBy} />
        <TokenGrid tokens={tokens} />
        <Pagination total={total} page={page} perPage={24} />
      </div>
    </div>
  );
}

כרטיס טוקן עם נדירות:

// components/TokenCard.tsx
import Link from 'next/link';
import { CollectionToken } from '@/lib/collection';

function RarityBadge({ rank, total }: { rank: number; total: number }) {
  const percentile = (rank / total) * 100;
  const tier =
    percentile <= 1
      ? { label: 'Legendary', color: 'text-yellow-400 bg-yellow-400/10' }
      : percentile <= 5
        ? { label: 'Epic', color: 'text-purple-400 bg-purple-400/10' }
        : percentile <= 15
          ? { label: 'Rare', color: 'text-blue-400 bg-blue-400/10' }
          : { label: 'Common', color: 'text-neutral-400 bg-neutral-400/10' };
  return (
    <span className={`rounded-md px-2 py-0.5 text-xs font-medium ${tier.color}`}>
      #{rank} · {tier.label}
    </span>
  );
}

export function TokenCard({ token, totalSupply }: { token: CollectionToken; totalSupply: number }) {
  return (
    <Link href={`/gallery/${token.tokenId}`} className="group block">
      <div className="overflow-hidden rounded-xl border border-white/5 bg-neutral-900 transition hover:border-white/20">
        <div className="relative aspect-square overflow-hidden bg-neutral-800">
          <img
            src={token.image}
            alt={token.name}
            loading="lazy"
            className="h-full w-full object-cover transition-transform group-hover:scale-105"
          />
        </div>
        <div className="p-3 space-y-2">
          <div className="flex items-start justify-between gap-2">
            <span className="font-medium truncate">{token.name}</span>
            <RarityBadge rank={token.rarityRank} total={totalSupply} />
          </div>
          {token.floorAskPrice && (
            <p className="text-sm text-neutral-400">
              Floor: <span className="text-white">{token.floorAskPrice} ETH</span>
            </p>
          )}
        </div>
      </div>
    </Link>
  );
}

דף פרטי טוקן:

// app/gallery/[tokenId]/page.tsx
export default async function TokenPage({ params }: { params: { tokenId: string } }) {
  const token = await getToken(CONTRACT, params.tokenId);
  return (
    <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
      <TokenImage src={token.image} name={token.name} />
      <div className="space-y-6">
        <TokenHeader token={token} />
        <AttributeGrid attributes={token.attributes} />
        <TradeActions token={token} />
        <SaleHistory contractAddress={CONTRACT} tokenId={params.tokenId} />
      </div>
    </div>
  );
}

יצירה סטטית ל-SEO

לאוספים עד 10,000 טוקנים, אנחנו מייצרים את כל דפי הטוקן בזמן בנייה דרך searchParams. זה מניב זמן טעינה מינימלי ואפקט SEO מקסימלי—כל דף מתועד כ-HTML נפרד. לאוספים גדולים יותר, אנחנו משתמשים ב-ISR עם // app/gallery/page.tsx (Next.js App Router) import { useSearchParams, useRouter } from 'next/navigation'; import { getCollectionTokens, getCollectionAttributes } from '@/lib/collection'; const CONTRACT = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS!; export default async function GalleryPage({ searchParams, }: { searchParams: Record<string, string>; }) { const page = parseInt(searchParams.page ?? '1'); const sortBy = (searchParams.sort ?? 'tokenId') as 'floorAskPrice' | 'rarity' | 'tokenId'; // Собираем attribute-фильтры из search params const attributes: Record<string, string> = {}; for (const [key, value] of Object.entries(searchParams)) { if (!['page', 'sort'].includes(key)) { attributes[key] = value; } } const [{ tokens, total }, attrs] = await Promise.all([ getCollectionTokens(CONTRACT, { limit: 24, offset: (page - 1) * 24, sortBy, attributes: Object.keys(attributes).length ? attributes : undefined, }), getCollectionAttributes(CONTRACT), ]); return ( <div className="flex gap-8"> <TraitFilters attributes={attrs} activeFilters={attributes} /> <div className="flex-1"> <SortControl currentSort={sortBy} /> <TokenGrid tokens={tokens} /> <Pagination total={total} page={page} perPage={24} /> </div> </div> ); } —דפים נוצרים בבקשה הראשונה ומתעדכנים כל שעה, ומשלבים מהירות סטטית עם רעננות נתונים. החיסכון הממוצע בתעבורת RPC מגיע ל-95%. אנחנו גם מייעלים אחזור מטא-נתונים של NFT מ-IPFS עם בקשות מקבילות ושערי חלופיים, מה שמבטיח טעינת תמונות מהירה.

השוואת NFT APIs: באיזה לבחור?

קריאה ישירה דרך // components/TokenCard.tsx import Link from 'next/link'; import { CollectionToken } from '@/lib/collection'; function RarityBadge({ rank, total }: { rank: number; total: number }) { const percentile = (rank / total) * 100; const tier = percentile <= 1 ? { label: 'Legendary', color: 'text-yellow-400 bg-yellow-400/10' } : percentile <= 5 ? { label: 'Epic', color: 'text-purple-400 bg-purple-400/10' } : percentile <= 15 ? { label: 'Rare', color: 'text-blue-400 bg-blue-400/10' } : { label: 'Common', color: 'text-neutral-400 bg-neutral-400/10' }; return ( <span className={`rounded-md px-2 py-0.5 text-xs font-medium ${tier.color}`}> #{rank} · {tier.label} </span> ); } export function TokenCard({ token, totalSupply }: { token: CollectionToken; totalSupply: number }) { return ( <Link href={`/gallery/${token.tokenId}`} className="group block"> <div className="overflow-hidden rounded-xl border border-white/5 bg-neutral-900 transition hover:border-white/20"> <div className="relative aspect-square overflow-hidden bg-neutral-800"> <img src={token.image} alt={token.name} loading="lazy" className="h-full w-full object-cover transition-transform group-hover:scale-105" /> </div> <div className="p-3 space-y-2"> <div className="flex items-start justify-between gap-2"> <span className="font-medium truncate">{token.name}</span> <RarityBadge rank={token.rarityRank} total={totalSupply} /> </div> {token.floorAskPrice && ( <p className="text-sm text-neutral-400"> Floor: <span className="text-white">{token.floorAskPrice} ETH</span> </p> )} </div> </div> </Link> ); } לא מתאימה לאוספים של 5,000+ טוקנים: טעינה אורכת >5 דקות, וסינון בצד הלקוח בלתי אפשרי. NFT APIs כמו Reservoir מאחסנים נתונים מתועדים ומאפשרים סינון, מיון, ופאג'ינציה עם בקשה אחת. לפי תיעוד Reservoir, ה-API שלהם תומך במיון לפי נדירות. Reservoir מהיר פי 150 מקריאות RPC ישירות וזול פי 10.

Reservoir מהיר פי 150—זו לא פרסומת, אלא תוצאות בדיקות.

Reservoir מציע את האיזון הטוב ביותר בין מגבלה חינמית לפונקציונליות.

תהליך ולוחות זמנים

1. אנליטיקה ובחירת API—קביעת גודל האוסף, דרישות סינון, תקציב תשתית. בחירת NFT API מתאים (Reservoir, OpenSea, Alchemy). אנחנו מבטיחים איכות: כל הפרויקטים עוברים בדיקות ביצועים.
2. עיצוב ארכיטקטורה—עיצוב סכמת נתונים, החלטה מה לשמור במטמון בצד הקדמי והאחורי, הגדרת ניתוב URL.
3. יישום—כתיבת שכבת אינטגרציה ל-API, רכיבי גלריה, מסננים, דף טוקן, עטיפת SEO.
4. בדיקות—בדיקת ביצועים עם Lighthouse, בדיקת מסננים על נפחים גדולים, אימות אינדוקס דרך Search Console.
5. פריסה—פריסה על Vercel או אירוח שתומך ב-Next.js, הגדרת מטמון, ניטור.

לוחות זמנים: גלריה בסיסית (גריד עם סינון, פאג'ינציה)—2–3 ימים. גלריה מלאה (מיון לפי נדירות, היסטוריית מכירות, אופטימיזציית SEO, ISR)—5–7 ימים. העלות מחושבת באופן אישי לפי מורכבות האוסף וה-API הנבחר. אנחנו מציעים פיתוח גלריות NFT במפתח מלא עם לוחות זמנים מובטחים. צרו קשר להערכת פרויקט חינמית.

טעויות נפוצות ואיך להימנע מהן

• התעלמות ממגבלות קצב API. Reservoir מספק 60 בקשות/דקה בחינם—חריגה תשבור את הגלריה. פתרון: שמירת תגובות במטמון בשרת (Next.js generateStaticParams) או שימוש באסטרטגיית stale-while-revalidate.
• חוסר בגיבוי לתמונות. אם שער IPFS לא זמין, כרטיס הטוקן נשאר ריק. אנחנו תמיד מוסיפים שער גיבוי או מעלים תמונות ל-CDN.
• חישוב נדירות שגוי. נדירות צריכה להתבסס על תדירות מאפיינים, לא על סדר אקראי. השתמשו בנוסחה הסטנדרטית: revalidate: 3600.

מה כלול

• קוד מקור ב-Next.js/TypeScript עם הערות.
• אינטגרציה עם ה-NFT API הנבחר (Reservoir כברירת מחדל).
• עיצוב רספונסיבי למובייל.
• עטיפת SEO לכל דף (תגי meta, Open Graph).
• תיעוד פריסה והגדרה.
• הדרכה לצוות הלקוח על עבודה עם הגלריה.

הזמינו פיתוח גלריית NFT מותאמת אישית—אנחנו נטפל באינטגרציה עם כל API ונמטב ביצועים לאוספים בכל גודל. עם ניסיון של מעל 5 שנים ו-50+ פרויקטים מוצלחים, אנחנו מספקים פתרונות חזקים. קבלו ייעוץ על בחירת הטכנולוגיות לפרויקט שלכם.