Multi-App using each remix-app as an NPM packages

[ajmeraaxesh]

Hi React-Router Community,

I am looking to build a multi-app (A shell app) containing login-logout functionality and a dashboard screen.

This dashboard screen would look (similar to car-play) but  want to export all the routes of each app directly into the shell app.

I am not sure what approach to take and if there are any examples. 

https://github.com/remix-run/react-router/tree/main/examples/multi-app

Instead of like a mono-repo, Is it possible create each app as its NPM package and then import the routes with my own custom-prefix

So my shell app routes.ts would look something like

import contactRoutes from '@contact-app/routes'
import phoneRoutes from '@phone-app/routes'
export default [ index(
"routes/_index.tsx"), 
...prefix("contact", [...contactRoutes], 
...prefix("phone", [...phoneRoutes]] satisfies RouteConfig;

Now when I have something like

<Link to="contact-app/home">Contact</Link>

The contact app can get rendered inside the shell app.

If there are any architecture or any possible way to amek this happen. Any videos or examples would be really appreciated

[CoderDeltaLAN]

Context

• Remix loader with defer()
• Unsure when to use await vs streaming with defer
• Data either blocks full render or throws

Why

• await → loader waits, page only renders once data resolves
• defer() → lets you stream parts of the loader response: critical data first, slow data later
• Misuse: await inside defer defeats streaming; or forgetting Suspense on the client causes errors

Fix (minimum viable)

Example: blocking everything

import { json } from "@remix-run/node"

export async function loader() {
  const posts = await getPosts()       // page waits here
  return json({ posts })
}

Example: streaming non-critical data

import { defer } from "@remix-run/node"

export async function loader() {
  const posts = getPosts()             // promise, not awaited
  const settings = await getSettings() // small, needed immediately
  return defer({ settings, posts })    // posts will stream later
}

Client usage with Suspense

import { useLoaderData, Await } from "@remix-run/react"

export default function Page() {
  const { settings, posts } = useLoaderData<typeof loader>()
  return (
    <div>
      <h1>{settings.title}</h1>
      <React.Suspense fallback={<p>Loading posts…</p>}>
        <Await resolve={posts}>
          {data => <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>}
        </Await>
      </React.Suspense>
    </div>
  )
}

Checklist

• Use defer() only when some data can safely stream after first paint.
• Wrap deferred values in <Suspense> + <Await>.
• await before defer = no streaming; avoid unless needed for critical data.
• For SEO-critical content, block (await) instead of streaming.

Docs

• Remix defer guide: https://remix.run/docs/en/main/guides/defer
• React Suspense/Await: https://remix.run/docs/en/main/components/await

If this helps, please Mark as answer so others can find it.