۱. instrumentation-client.js — نظارت قبل از تعامل
این فایل در مرحلهای خاص از چرخه اجرای اپلیکیشن اجرا میشود:
- بعد از بارگذاری HTML
- قبل از hydration توسط React
- قبل از تعامل کاربر
نمونه کد:
// instrumentation-client.ts
performance.mark('app-init')
console.log('Analytics initialized')
window.addEventListener('error', (event) => {
reportError(event.error)
})ردیابی ناوبری:
export function onRouterTransitionStart(url, navigationType) {
console.log(`Navigation started: ${navigationType} to ${url}`)
performance.mark(`nav-start-${Date.now()}`)
}بهینهسازی عملکرد:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry instanceof PerformanceNavigationTiming) {
console.log('Time to Interactive:', entry.loadEventEnd - startTime)
}
}
})
observer.observe({ entryTypes: ['navigation'] })بارگذاری polyfillها:
import './lib/polyfills'
if (!window.ResizeObserver) {
import('./lib/polyfills/resize-observer').then((mod) => {
window.ResizeObserver = mod.default
})
}۲. مسیرهای قابلجایگذاری — نمایش محتوا بدون تغییر زمینه
با استفاده از مسیرهای قابلجایگذاری، میتوان محتواهایی مانند مودالها را از مسیرهای دیگر درون layout فعلی نمایش داد.
مثال:
نمایش عکس در مودال از مسیر /photo/123 درون صفحه /feed بدون تغییر URL اصلی.
قواعد نامگذاری:
(.): سطح فعلی(..): یک سطح بالاتر(..)(..): دو سطح بالاتر(...): از ریشه app
ساختار پوشه:
برای جایگذاری مسیر photo درون feed، پوشهای با نام (..)photo بسازید.
۳. کاربردهای عملی مسیرهای قابلجایگذاری
- مودال عکس در گالری
- مودال ورود در navbar
- سبد خرید در کنار صفحه
مزایا:
- URL قابل اشتراکگذاری برای مودال
- حفظ زمینه هنگام refresh
- بستن مودال با ناوبری عقب
- باز کردن مجدد مودال با ناوبری جلو
جمعبندی
فایل instrumentation-client.js به شما امکان میدهد تا قبل از تعامل کاربر، ابزارهای نظارتی و تحلیلی را راهاندازی کنید. مسیرهای قابلجایگذاری نیز تجربه ناوبری پویا و مودالهای قابل اشتراکگذاری را فراهم میکنند. ترکیب این دو قابلیت، اپلیکیشن شما را هم هوشمندتر و هم کاربرپسندتر میکند.