В чём плюсы делать React-Routing через createBrowserRouter/defer/loader версии 6.4?

Я начал проходить React-Router и сначала разобрал обычный способ как сделать роутинг, как работать с сетевыми запросами и тд, выглядит примерно так:

<BrowserRouter>
        <div className="app">
            <AppHeader/>
            <main>

                <Routes>
                    
                    <Route path='/' element={<MainPage/>}>
                        <Route path='react' element={<CommonPage/>} />
                    </Route>

                    <Route path='charackters/:personId' element={<PersonPage/>} />

                    <Route path='*' element={<Error404Page/>} />

                </Routes>

            </main>
        </div>
    </BrowserRouter>

всё понятно, роутинг выглядит просто, с async-функциями тоже всё понятно - например если это запрос к API, то просто пишешь эту функцию в нужном компоненте в useEffect(), если нужна отложенность - юзаешь lazy(() => ), полученный результат записываешь в state и дальше с ним уже работаешь. Ну по крайней мере это пока всё что делал

Но недавно я разобрал новый способ создания Роутинга, который появился в версии 6.4, относительно недавно. Сами роуты теперь пишутся в другой структуре(App.jsx) и с async-функциями в Компонентах тоже теперь предлагают(разработчики ReactRouter-a) работать по другому, через loader-ы, defer, useLoaderData() и тд. Разбирал я это всё 2 дня, вроде +- разобрался. Но как бы вопрос сам же напрашивается - структура и логика очень сильно усложнились, а каких-то видимых изменений я назвать не могу.

// App.jsx
import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 
'react-router-dom';
const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Root />}>
      <Route 
        path="dashboard/:id" 
        element={<Dashboard />} 
        loader={getDeferData}
        errorElement={<ErrorPage />}
      />
    </Route>
    )
  )
const App = () => {
   return (
      <RouterProvider router={router} />
  )
}

// Dashboard.jsx
import {useLoaderData, defer} from "react-router-dom";
export const Dashboard = () => {

const {posts} = useLoaderData() // - хук useLoaderData() читает значение, возвращаемое из defer( {} )

return (
    <div>
        <Suspense fallback={ <h2>Post is loading...</h2> }>
            <Await 
                resolve={posts}
                errorElement={ <p>Error loading package location!</p> }
            >
                
            {
                (resolvedPosts) => {
                    resolvedPosts.map(post => {
                            return (
                                <Link to={`dashboard/${post.id}`}>                    
                                    <li
                                        className="dashboard__item" 
                                        key={post.id} 
                                    >
                                        {post.title}
                                    </li>
                                </Link>
                            )
                        }) 
                }
                
            }

            </Await>
        </Suspense>
    </div>
 )

}

Объясните пожалуйста, в чём плюсы создания роутинга/работы с async-функциями этим новым, сложным способом? Желательно как-то понятно объяснить, потому что нейронка мне тоже объясняла, но общими сложными фразами, где не было никакой сути, в доках тоже самое