💡Ідея паралельних роутів дуже проста:
Це, всього на-всього, можливість відобразити декілька компонентів на одній сторінці, але так, наче це повноцінні сторінки.
👉А вже з цього випливає, що до цих компонентів застосовуються звичні нам правила сторінок в Next.JS:
=> Вони серверні за замовчунням - відповідно ми можемо зробити асинхронний запит прямо в середині компоненту та не створювати в ньому стейт
=> Підтримують loading.tsx - вам достатньо додати цей файл з дефолтним експортом, і цей компонент буде відображений під час виконання асинхронного запиту. (не треба оброблювати стан
loading)=> Підтримують
error.tsx - додаємо файл з дефолтним експортом і не мучаємося з обробкою помилок=> Прив'язані до URL, відповідно керувати їх появою та зникненням можна просто змінюючи URL (наприклад по кліку на Link). При цьому інші під сторінки залишаються на місті, не стрибають та не рендеряться наново.
=> А ще це чудо техніки підтримує паралельне та навіть умовне завантаження!
😍І все це у формі звичних нам React компонентів. Такий підхід може зменшити обсяг вашої роботи та ще й спростити код, оскільки нам не доведеться писати всю цю магію самостійно. Скажіть просто і круто?
😅Нажаль лише в теорії. На практиці не все так просто і чудово як пише документація. Є баги, є проблеми, є взагалі чортіщо (рестарт серверу може допомогти). З цим і будемо розбиратися в наступному пості, тож не перемикайтесь!
@reactbeginners