أداة فحص الروابط الخلفية للويب في Next.js، مع إبقاء المفتاح على الخادم
CORS مفتوح، لذا يمكن للمتصفح الاتصال بـ API مباشرة. القيام بذلك بمفتاح مدفوع هو الخطأ. توضح هذه الصفحة طبقة الخادم الرقيقة التي تحل هذه المشكلة.
خرافة مقابل الواقع
| الخرافة | الواقع |
|---|---|
| "CORS المفتوح يعني أنني يمكنني إرسال المفتاح مع حزمة React الخاصة بي." | CORS المفتوح يعني أن الاتصال يعمل. لا يزال بإمكان أي شخص قراءة المفتاح من علامة تبويب الشبكة وإنفاق رصيدك. |
| "يجب أن يتم عرض جدول الروابط على العميل لأنه لوحة تحكم." | الاستعلام من الخادم وإرسال HTML. يرى المستخدم الصفوف في الرسم الأولي ولا يغادر مفتاحك الصندوق أبدًا. |
| "الإجراءات المجانية تحتاج أيضًا إلى حماية." | domain، overview، stats و suggest لا تحتاج إلى مفتاح، لذا يمكن للمتصفح الاتصال بها مباشرة. |
| "يجب أن أقوم بإعادة الاستعلام في كل عرض صفحة." | إعادة بناء الفهرس يحدث تقريبًا شهريًا. التخزين المؤقت لمدة 24 ساعة لا يفقد أي شيء. |
| "يجب أن يعيد البروكسي توجيه أي شيء يرسله العميل." | قائمة الإجراءات المسموح بها. تم تقديم action=search يكلف 3 أرصدة. |
معالج المسار
App Router، الملف app/api/links/route.ts. لا يصل متغير البيئة إلى حزمة العميل لأنه لا يحتوي على بادئة NEXT_PUBLIC_.
import { NextRequest, NextResponse } from "next/server";
const ALLOWED = new Set(["refdomains", "anchors", "toppages"]);
export async function GET(req: NextRequest) {
const p = req.nextUrl.searchParams;
const action = p.get("action") ?? "";
const q = (p.get("q") ?? "").toLowerCase();
if (!ALLOWED.has(action) || !/^[a-z0-9.-]+$/.test(q)) {
return NextResponse.json({ ok: false, error: "bad request" }, { status: 400 });
}
const url = `https://seomasters.dev/api.php?action=${action}&q=${q}&per=100`;
const upstream = await fetch(url, {
headers: { Authorization: `Bearer ${process.env.SEO_API_KEY}` },
next: { revalidate: 86400 },
});
if (upstream.status === 402) {
return NextResponse.json({ ok: false, error: "data temporarily unavailable" }, { status: 503 });
}
return new NextResponse(upstream.body, { status: upstream.status, headers: { "content-type": "application/json" } });
}لماذا يبدو المعالج هكذا
قائمة الإجراءات المسموح بها
لا ينبغي أن يتمكن خطأ في واجهة المستخدم من استدعاء إجراء search بتكلفة 3 أرصدة عن طريق الخطأ.
التعبير المنتظم على q
يصل فقط اسم المضيف العاري. لا مخطط، لا مسار، لا سلسلة استعلام يتم تهريبها إلى الأمام.
revalidate: 86400
استعلام واحد للأمام لكل نطاق يوميًا. مع البيانات الشهرية، الأطول أيضًا جيد.
402 تم تعيينه إلى 503
لا يحتاج زوارك إلى معرفة أن رصيدك فارغ. أنت تحتاج إلى معرفة ذلك، لذا سجله.
العرض: ما يراه الزاحف والعميل على حد سواء
إذا كانت لوحة التحكم خلف تسجيل الدخول، فإن العرض على الخادم أو العميل هو خيار تجربة المستخدم. إذا كان أي منها عامًا، مثل صفحة بحث مجانية تريد فهرستها، قم بعرض الجدول الأول على الخادم.
الصفحة التي تصل كغلاف فارغ وتمتلئ بعد الترويض هي خطر على الفهرسة وعلى الهواتف البطيئة على حد سواء. يمكن لـ Google تنفيذ JavaScript، لكنها تدرج هذه الخطوة ولا تصل إليها دائمًا بسرعة.
احتفظ بمراجعة المجانية على الخادم
ضع استدعاء overview الرخيص والمجاني في مكون الخادم ودع الزائر يحفز السحوبات المدفوعة والأعمق من زر. هذا الانقسام يحافظ أيضًا على إنفاق الرصيد الخاص بك قابلاً للتنبؤ.
الاستدعاءات المجانية لا تكلف شيئًا، لذا فإن المراجعة المعروضة على الخادم لا تضيف إنفاق أرصدة. فقط السحوبات المدفوعة تحتاج إلى زر وجلسة.
فكر في الحالة الفارغة أولاً. الزائر الذي يهبط على جدول فارغ سيفترض أن الأداة معطلة، والرسم الثاني السريع لا يلغي الانطباع الأول.
اختر الإجراءات المجانية للشاشة الأولى والمدفوعة للتفاصيل. الزائر الذي يفتح صفحة ويرى ملخصًا مجانيًا ليس لديه سبب للضغط على زر مدفوع عن طريق الخطأ.
اربط الشرح، وليس فقط الرقم
ربط الأرقام هو الجزء السهل. شرحها أصعب، لذا اربط معادلة DR من التلميح واذكر أن الفهرس يتم تحديثه شهريًا.
الزائر الذي يرى درجة بدون معادلته سيخمنها، لذا ينتمي الرابط بجانب الرقم على الشاشة.
أجزاء الخادم والعميل في لوحة تحكم واحدة
تحتاج معظم لوحات التحكم إلى كلا النوعين من التعليمات البرمجية. يحدد الملكية الانقسام. المفتاح، البيانات وقواعد الوصول لكل منها منزل واحد. صفحة فحص الروابط الخلفية للويب العامة تحتاج إلى نفس الانقسام مثل تلك خلف تسجيل الدخول.
استعلام على الخادم، ترتيب على العميل
جدول الروابط الخلفية هو مكون عميل معقول عندما يرتب الناس، يفلترون ويتصفحون الصفحات. يجب أن تأتي الصفوف من مكون الخادم الذي اتصل بمسارك بالفعل، لذا لا يحمل المتصفح المفتاح أو عنوان الأمام.
ترتيب عشرة صفوف فوري على العميل. ترتيب خمسة آلاف صف في طلب جديد في كل مرة يكون بطيئًا، لذا احتفظ بالمجموعة الكاملة في المكون الذي حمّلته بالفعل.
اجعلها بسيطة. الجدول الذي يرتب فورًا يفوز على واحد يعيد الاستعلام في كل نقرة.
احتفظ بحد العميل منخفضًا
ادفع الحد إلى أسفل الشجرة قدر الإمكان. الويدجت المستورد ديناميكيًا والذي يعمل فقط على العميل يتم عرضه في المتصفح، بينما يبقى المكون الذي استعلم عن الصفوف على الخادم. مرر الصفوف كخصائص، واحتفظ بالاستعلام فوق الحد.
إذا نقلت الاستعلام إلى أسفل الحد، فإن المتصفح يقوم بالاستعلام بنفسه. هذا هو الخطأ الذي تحذره منه قسم تسريب المفتاح، لذا تحقق من علامة تبويب الشبكة بعد كل تغيير لهذا الحد.
أين بالضبط يسقط الخط؟ ارسمه على الورق أولاً، مع صندوق واحد للاستعلام وصندوق واحد لكل عنصر تحكم تفاعلي، وعد الأسهم التي تعبره.
فحوصات الغلاف والجلسة تبقى على الخادم
تقرر التخطيط وفحوصات الجلسة ما يمكن للزائر رؤيته على الإطلاق، لذا تنتمي إلى الخادم. الجداول التفاعلية والنماذج والرسوم البيانية يمكن أن تترويض لاحقًا دون تغيير هذا القرار.
الحاجز على جانب العميل يمكن أن يخفي زرًا، لكنه لا يمنع الطلب. معالج المسار وتخطيط الخادم هما حيث يتم فرض الوصول فعليًا.
ثم أرسل نفس الطلب بدون ملف تعريف الارتباط وتأكد من أن الخادم يرفضه، وليس فقط الصفحة.
تنطبق القاعدة نفسها على البروكسي نفسه. فحص الجلسة الذي يحدث فقط في المتصفح لا يمكنه حماية المسار، لذا يتحقق المسار من الجلسة أيضًا قبل إنفاق رصيد.
التخزين المؤقت لكل نطاق، وليس لكل زائر
يبني المسار عنوان الأمام الخاص به من النطاق، لذا يتبع مفتاح التخزين المؤقت النطاق أيضًا. زائر واحد يبحث عن موقع يسخن الصفحة للزائر التالي الذي يسأل عن نفس الموقع.
هذه هي نقطة إعادة التحقق اليومي في المعالج. زائران على نفس النطاق يكلفان استعلامًا واحدًا للأمام، وألف زائر على ألف نطاق تكلف ألف استعلام، لذا فإن التخزين المؤقت هو الميزانية.
انتبه للحالة المعاكسة أيضًا. الصفحة التي تغير سلسلة الاستعلام الخاصة بها بطابع زمني تلغي التخزين المؤقت تمامًا، وتظهر الفاتورة ذلك قبل السجلات.
أعد التحقق في جدول زمني يتطابق مع الفهرس. نافذة يومية تناسب البيانات الشهرية، وقصر فقط يضيف استعلامات دون حقائق جديدة.
التعزيز، بالترتيب الذي سنقوم به
المعالج هو الجزء السهل. التعزيز هو حيث يتسرب المفتاح أو يستنزف الرصيد، لذا اعمل من خلال هذه بالترتيب.
امسح علامة تبويب الشبكة الخاصة بك
افتح أدوات مطوري Chrome على لوحة التحكم الخاصة بك واقرأ علامة تبويب الشبكة. انظر عن كثب. إذا أظهر طلب هناك sk_live_ في أي مكان، قم بتدوير المفتاح اليوم. يستغرق هذا الفحص دقيقة ويجد التسريب الأكثر شيوعًا.
ابحث في أجسام الاستجابات بالإضافة إلى رؤوس الطلبات. المفتاح المنعكس في رسالة خطأ هو لا يزال تسريبًا.
حدد عدد المكالمات لكل مستخدم
بعد ذلك، أضف حدًا لكل مستخدم. ضعه أمام المسار. المعالج أعلاه ينفق رصيدك لأي شخص يمكنه الوصول إليه، لذا اربطه بجلسة وحدد المكالمات في الساعة. اختر الحد من حسابات الميزانية على صفحة الرصيد.
ابدأ بكرامة وشد لاحقًا. الحد الذي يحجب المستخدمين الحقيقيين في اليوم الأول يعلمهم العثور على أداة أخرى.
سمِّ من يملأ
يستحق أيضًا سطرًا في دليل التشغيل: من يتم تنبيهه عندما ينخفض الرصيد دون مستوى معين، ومن يملؤه. سمِّ الشخص.
اكتب خطوة التعبئة كقائمة مراجعة مع رابط صفحة الحساب والوقت المتوقع. دليل التشغيل الذي يوجد فقط في رأس شخص واحد يفشل في المرة الأولى التي يكون فيها ذلك الشخص في إجازة. الخطوة نفسها تستغرق دقائق، لذا فإن الكتابة هي المهمة الأكبر.
سجل الرصيد قبل أن ينفد
ثم سجل _credits من كل استجابة للأمام في مقاييسك الخاصة. رسم بياني للرصيد المتبقي، يتم أخذ عينة منه يوميًا، يحذرك قبل أسبوع من HTTP 402.
اختر مستوى التنبيه من استخدامك الأسبوعي الخاص. الرقم المختار من قالب نادرًا ما يتطابق مع مكالماتك الحقيقية.
احتفظ بالقيمة الأخيرة التي رأيتها في الذاكرة بالإضافة إلى السجل، حتى يتمكن المسار من رفض السحوبات المدفوعة بمجرد انخفاض الرقم تحت مستوى التنبيه. هذا الفحص سطر واحد، ويوقف انفجارًا من حركة المرور من إنفاق الباقي.
احتفظ بقائمة الإجراءات المسموح بها في مكان واحد
عادة أخرى تدفع ثمارها. احتفظ بقائمة الإجراءات المسموح بها في ثابت مشترك، يتم استيراده من قبل المعالج والاختبارات، حتى لا يصل إجراء جديد إلى الإنتاج دون أن يعدل شخص ما قائمة مرئية ويلاحظها المراجع.
ملف واحد، استيراد واحد. لا ينبغي أن يضطر أحد للبحث عن القائمة في ثلاثة مكونات لمعرفة ما سيقبله البروكسي.
اختبر وقت التشغيل الذي تنشر إليه
أخيرًا، شغل المعالج تحت Node 20 أو وقت التشغيل الطرفي الذي تختاره واختبر كلاهما. تدفق جسم الأمام، كما يفعله الكود، يعمل في كل منهما، لكن معالجة الرؤوس تختلف وتستحق اختبارًا.
أضف اختبارًا واحدًا يستدعي المسار بإجراء سيء وواحد بإجراء صالح، ويؤكد على أكواد الحالة. هذان الاختباران يمسحان معظم الانحدارات في قائمة الإجراءات المسموح بها ومعالجة الرؤوس.
ربط البروكسي بالترتيب
- 1
أضف المفتاح على الخادم
احفظ المفتاح في بيئة الخادم الخاصة بك باسم بدون بادئة عامة، ثم أعد تشغيل خادم التطوير ليتم تحميله.
- 2
اكتب قائمة الإجراءات المسموح بها أولاً
اذكر الإجراءات التي تستدعي شاشاتك حقًا. أي شيء آخر يحصل على 400 من مسارك الخاص، قبل أن يصل إلى API الأمام.
- 3
استعلم عن مسارك من مكون الخادم
عرض الصفوف حيث تصل البيانات. المتصفح ينادي فقط نطاقك الخاص، لذا يبقى عنوان الأمام خارج الصفحة.
- 4
راقب الرصيد
سجل
_creditsعلى كل استجابة للأمام واضبط مستوى تنبيه يمكنك التصرف فيه، قبل أن يصل 402 إلى الزائر كـ 503.
