Заметки про React(@ru_react_notes). Ленивая загрузка роутов в React Routes В React Router 6.4 была представлена концепция “Data Router”

Ленивая загрузка роутов в React Routes В React Router 6.4 была представлена концепция “Data Router”, основное внимание которого уделяется разделению получения данных и рендеринга для исключения “водопадов” загрузки данных. В React Router 6.9 появилась возможность ленивой загрузки роутов с компонентом и функцией получения данных. Пример:

// app.jsx
import Layout, { getUser } from `./layout`;
import Home from `./home`;

const routes = [{
  path: '/',
  loader: () => getUser(),
  element: <Layout />,
  children: [{
    index: true,
    element: <Home />,
  }, {
    path: 'projects',
    lazy: () => import("./projects"), // 💤 Lazy load!
    children: [{
      path: ':projectId',
      lazy: () => import("./project"), // 💤 Lazy load!
    }],
  }],
}]

// projects.jsx
export function loader = () => { ... }; 
export function Component() { ... } 

// project.jsx
export function loader = () => { ... }; 
export function Component() { ... }

Обратите внимание на наименование экспортируемых переменных: loader и Component. React Router может загружать lazy роуты параллельно. При переходе по URL /projects/123 будут параллельно загружены роуты и выполнены loader функции, после чего будет отрендерен компонент. https://remix.run/blog/lazy-loading-routes