Isolated Component Data loading

[discoverlance-com]

Currently remix nested routing supports isolation of data by allowing teams for example, to handle loading of main posts.tsx page data separately from a nested route like posts/new.tsx.

This though does not really help when one wants to load data in a completely isolated component system. Example, for my posts main route:

//routes/posts.tsx

export async function loader() {
   return json({navigationData: {name: 'Homepage'}, footerData: {name: 'My Footer links'}})
}
export default function PostsRoute() {
  const {navigationData, footerData} = useLoaderData<typeof loader>()
  return ( 
    <>
       <Navigation data={naviagationData} />
       
       <Outlet />

      <Footer data={footerData} />
    </>
  )
}

In this case, data loading is not really isolated as this posts.tsx file still handles data loading for the navigation and the footer component without much regard to separation of data. The footer team needs to update this posts.tsx route loader and same with the navigation team if they wanted to make changes. If we wanted them to load their data separately, we'd have to make them a nested route for example and it will be /posts/footer that will render our footer. This of course is not the behaviour we want.

What I propose is instead we have a directory like sub-pages in the remix app directory. This directory can then hold actual remix-like pages. So example navigation.tsx and export a default function that returns jsx.
These pages will only be capable of handling data loading and actions for starters. We can then import these pages into a page in the routes directory like the posts.tsx file.
The loaders in the sub-pages will load it's data in parallel to the data loaded in the actual remix page route it's imported in. All components or pages in this directory will not and cannot be rendered as a remix page but can be added as a component to a page in the routes directory.

This will really approach a truly isolated layout of routes/components that can handle it's own data loading so if data is needed in the footer, the footer can handle it's own loader without that data needing to be included in the data loaded in the posts.tsx or the route file that imports it.

Example:

//app/sub-pages/navigation.tsx

export async function loader() {
   return json({data: {name: 'Homepage'}})
}
export default function Navigation() {
  const {data} = useLoaderData<typeof loader>()
  return ( 
    <nav>
       <h1>{data.name}</h1>
    </nav>
  )
}

//app/sub-pages/footer.tsx

export async function loader() {
   return json({data: {name: 'My Footer links'}})
}
export default function Footer() {
  const {data} = useLoaderData<typeof loader>()
  return ( 
    <footer>
       <p>{data.name}</p>
    </footer>
  )
}

//app/routes/posts.tsx
import Navigation from '~/sub-pages/navigation'
import Footer from '~/sub-pages/footer'

export default function PostsRoute() {
  return ( 
    <>
       <Navigation  />
       
       <Outlet />

      <Footer  />
    </>
  )
}