با استفاده از Route و مقدار دهی path برای ساخت مسیر های اپلیکیشنتون
<BrowserRouter> <Route path="/ask" component={AskPage} /> </BrowserRouter>
با اولین بارگذاری سایت، تمام صفحه های نام برده شده از این طریق، دانلود میشن و با ورود بهشون دیگه درخواستی برای گرفتن محتوای اون صفحه ارسال نمیشه.
در اپلیکیشن ها یا کامپوننت های کوچک این مورد مشکلی به وجود نمیاره ولی فرض کنید اگر اپلیکیشن ما بزرگ باشه و داخل هر صحفه چند WebApi صدا زده بشه؛ برای بارگیری اولیه سایت چقدر زمان گرفته میشه! کمااینکه مخاطب ممکنه به هیچکدوم از صفحات بارگیری شده نیازی نداشته باشه!!
در ادامه بهترین روش برطرف کردن این ایراد رو بررسی میکینم...
1. ابتدا کامپوننت AskPage رو به صورت دیفالت اکسپورت میکنیم:
2. در App.js بجای ایمپورت معمولی، کامپوننت AskPage رو با استفاده از فانکشن lazy ایمپورت میکینم:
توجه داشته باشید که این عبارت باید در انتهای بقیه ایمپورت ها قرار بگیره. در غیر این صورت ESLint بهمون گیر میده!
بعد اعمال تغیرات بالا ریکت تلاش میکنه AskPage رو طبق معمول در اولین بارگذاری صحفه بارگیری کنه ولی چون React.lazy این اجازه رو نمیده خطای زیر برگشت داده میشه:
3. با توجه به ارور بالا Route مربوط به کامپوننت AskPage رو تغیر میدیم
با استفاده از کامپوننت React.Suspense از بارگیری کامپوننت به محض اجرای سایت جلوگیری میکنیم.
اتریبیوت fallback به ما اجازه میده در هنگام لود یک کامپوننت رو نمایش بدیم که در این مثال متن Loading... نمایش داده میشه.
در آخر هم کامپوننت AskPage فراخوانی میکنیم.
با اجرای پروژه فقط یک لینک که مارو به ادرس /ask هدایت میکنه قابل روئیت هست:
و وقتی روی لینک کلیک میکنیم...
لودینگ به نمایش در میاد و سپس ...
یک درخواست از نوع GET محتویات کامپوننت AskPage رو میگیره و صفحه بروزرسانی میشه
حالا بیاین یک نگاه به هدر و پریویو درخواست بندازیم
در آخر مجددا یاد آوری میکنم؛ این مثال فقط جنبه ی نمایشی داره و همچین کاری برای لود اطلاعات کامپوننت کوچکی مثل AskPage بیهوده هست و چه بهتر که بلافاصله بعد از بارگذاری صفحه اطلاعاتش دانلود بشه!
منبع: کتاب Asp.net Core 3 and React از انتشارات فوق العاده Packt
