Next.js API Routes बनाम Route Handlers: प्रत्येक का उपयोग कब करें

Next.js वेब एप्लिकेशन बनाने के लिए एक लोकप्रिय फ्रेमवर्क है। डेवलपर्स के लिए इसके फ़ीचर्स का प्रभावी ढंग से उपयोग कैसे करें, यह समझना महत्वपूर्ण है। ध्यान केंद्रित करने वाला एक मुख्य क्षेत्र API routes और route handlers के बीच का अंतर है। दोनों ही डेवलपर्स को सर्वर-साइड एंडपॉइंट्स बनाने की अनुमति देते हैं, लेकिन वे ऐसा अलग-अलग तरीकों से करते हैं। आइए इन अंतरों को समझें और यह तय करने में आपकी मदद करें कि किसका उपयोग कब करना है।

Next.js API Routes क्या हैं?

Next.js API routes, Pages Router का हिस्सा हैं। आप इन्हें pages/api डायरेक्टरी में पा सकते हैं। इस डायरेक्टरी की प्रत्येक फ़ाइल एक API एंडपॉइंट से मेल खाती है।

ये routes NextApiRequest और NextApiResponse, का उपयोग करते हैं, जो Node.js के IncomingMessage और ServerResponse. के ऊपर पतले रैपर हैं। इसका मतलब है कि API routes के लिए रनटाइम हमेशा Node.js होता है।

API routes की एक मुख्य विशेषता यह है कि वे स्टैटिक कैशिंग का समर्थन नहीं करते हैं। प्रत्येक रिक्वेस्ट सर्वरलेस फ़ंक्शन को ट्रिगर करती है, जिसका अर्थ है कि यदि आप कैशिंग व्यवहार को नियंत्रित करना चाहते हैं तो आपको कैशे हेडर मैन्युअल रूप से सेट करने होंगे।

Route Handlers क्या हैं?

App Router के साथ पेश किए गए Route handlers, app डायरेक्टरी में स्थित हैं। इन्हें route.js या route.ts. नाम की फ़ाइलों में परिभाषित किया गया है। API routes के विपरीत, route handlers Web Fetch API का उपयोग करते हैं, जिसका अर्थ है कि वे मानक Request और Response ऑब्जेक्ट्स के साथ रिक्वेस्ट्स को संभालते हैं।

Route handlers विभिन्न रनटाइम पर चल सकते हैं, जिनमें Node.js और Edge functions शामिल हैं। यह लचीलापन बेहतर प्रदर्शन की अनुमति देता है, विशेष रूप से कम-लेटेंसी एंडपॉइंट्स के लिए। इसके अतिरिक्त, route handlers GET रिक्वेस्ट्स के लिए स्टैटिक कैशिंग का समर्थन करते हैं, जिसे revalidate और runtime.

मुख्य अंतर

यहाँ दोनों की एक त्वरित तुलना दी गई है:

फ़ीचर	API Routes	Route Handlers
फ़ाइल स्थान	pages/api/slug.ts	app/api/slug/route.ts
रिक्वेस्ट का प्रकार	NextApiRequest	Request (Web Fetch)
रिस्पॉन्स का प्रकार	NextApiResponse	Response (Web Fetch)
रनटाइम वातावरण	केवल Node.js	Node.js और Edge functions
कैशिंग व्यवहार	कोई स्टैटिक कैशिंग नहीं; मैन्युअल हेडर	के लिए स्टैटिक कैशिंग का समर्थन करता है GET

प्रत्येक का उपयोग कब करें

API Routes का उपयोग तब करें जब:

• आपको सर्वर-साइड एंडपॉइंट्स की आवश्यकता हो जो हमेशा Node.js पर चलते हैं।
• आपको स्टैटिक कैशिंग की आवश्यकता नहीं है।
• आप ऐसी रिक्वेस्ट्स को संभालना चाहते हैं जिन्हें कैश्ड नहीं किया जाना चाहिए, जैसे कि आंतरिक टूल्स।

Route Handlers का उपयोग तब करें जब:

• आप App Router के साथ एक नया Next.js प्रोजेक्ट शुरू कर रहे हैं।
• तेज़ रिस्पॉन्स के लिए आपको edge runtime की आवश्यकता है।
• आप API रिस्पॉन्स के लिए स्टैटिक कैशिंग का लाभ उठाना चाहते हैं।
• आप स्ट्रीमिंग एंडपॉइंट्स बना रहे हैं या फॉर्म एक्शन हैंडलर को उनके पेजों के साथ सह-स्थित कर रहे हैं।

उदाहरण कोड

यहाँ एक त्वरित उदाहरण दिया गया है कि आप दोनों तरीकों का उपयोग करके पोस्ट्स की सूची लौटाने वाला एंडपॉइंट कैसे लागू कर सकते हैं:

API Route का उदाहरण

// pages/api/posts.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { client } from '@/sanity/client';

type Post = { _id: string; title: string; slug: string };

export default async function handler(req: NextApiRequest, res: NextApiResponse<Post[]>) {
    if (req.method !== 'GET') {
        res.status(405).end();
        return;
    }

    const posts = await client.fetch<Post[]>(`*[_type == "post"]{ _id, title, "slug": slug.current }`);
    res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate=300');
    res.status(200).json(posts);
}

Route Handler का उदाहरण

// app/api/posts/route.ts
import { NextResponse } from 'next/server';
import { client } from '@/sanity/client';

export const revalidate = 60; // ISR: revalidate every 60 seconds

type Post = { _id: string; title: string; slug: string };

export async function GET() {
    const posts = await client.fetch<Post[]>(`*[_type == "post"]{ _id, title, "slug": slug.current }`, {}, { next: { revalidate: 60 }});
    return NextResponse.json(posts);
}

निष्कर्ष

Next.js API routes और route handlers के बीच चयन करना आपकी प्रोजेक्ट की आवश्यकताओं पर निर्भर करता है। उनके अंतर को समझने से आपको परफॉरमेंस को अनुकूलित करने और कैशिंग को प्रभावी ढंग से प्रबंधित करने में मदद मिलती है।

लाभ

• API Routes: उपयोग करने में सरल, कम ट्रैफ़िक वाले आंतरिक टूल्स के लिए उपयुक्त, कैशिंग के साथ कोई अप्रत्याशित समस्या नहीं।
• Route Handlers: Edge functions के लिए समर्थन, बेहतर कैशिंग नियंत्रण, और सामान्य कार्यों के लिए छोटा कोड।

कमियां

• API Routes: कैशिंग समर्थन की कमी से परफॉरमेंस संबंधी समस्याएं हो सकती हैं, विशेष रूप से लोड के तहत।
• Route Handlers: अधिक जटिल मेंटल मॉडल और मौजूदा डेवलपर्स के लिए नए पैटर्न सीखने की आवश्यकता हो सकती है।

सावधानी

यह लेख शैक्षणिक उद्देश्यों के लिए है। अपने प्रोजेक्ट्स में प्लेसहोल्डर मानों को वास्तविक मानों से बदलना सुनिश्चित करें। उन पर निर्भर रहने से पहले हमेशा मूल स्रोत से दावों की पुष्टि करें।

अक्सर पूछे जाने वाले प्रश्न

• Next.js API routes क्या हैं? — वे सर्वर-साइड एंडपॉइंट्स हैं जो pages/api डायरेक्टरी में स्थित हैं, जो Node.js का उपयोग करते हैं।
• Next.js में route handlers क्या हैं? — वे सर्वर-साइड एंडपॉइंट्स हैं जो app डायरेक्टरी में स्थित हैं, जो Web Fetch API का उपयोग करते हैं।
• मुझे API routes का उपयोग कब करना चाहिए? — बिना कैशिंग आवश्यकताओं वाले सरल, केवल Node.js सर्वर-साइड कार्यक्षमता के लिए इनका उपयोग करें।
• मुझे route handlers का उपयोग कब करना चाहिए? — Edge functions और कैशिंग क्षमताओं की आवश्यकता वाले नए प्रोजेक्ट्स के लिए इनका उपयोग करें।
• क्या मैं एक ही प्रोजेक्ट में API routes और route handlers दोनों का उपयोग कर सकता हूँ? — हां, वे माइग्रेशन के दौरान एक साथ सह-अस्तित्व में रह सकते हैं।
• दोनों के बीच कैशिंग तंत्र कैसे भिन्न हैं? — API routes में मैन्युअल कैशे हेडर की आवश्यकता होती है, जबकि route handlers स्वचालित रूप से स्टैटिक कैशिंग का समर्थन करते हैं।

टैग

#nextjs #approuter #webdevelopment #caching #performance #programming #javascript #webdev