the UI at https://nothing.tech/products/phone-3 renders a list of "widgets". I would like each of these widgets to have their own loaders to maximise page speed, furthermore I'd be able to "deeplink" a user straight into a widget. But how do I do that when a route can only have one Outlet?

Here's an example with Promise.all. Before:

// routes/dashboard.tsx
export async function loader() {
	const user = await fetch('/api/user').then(r => r.json())
	const projects = await fetch(`/api/projects?userId=${user.id}`).then(r => r.json())
	const notifications = await fetch(`/api/notifications?userId=${user.id}`).then(r => r.json())

	return { user, projects, notifications }
}

After:

export async function loader() {
	const userPromise = fetch('/api/user').then(r => r.json())
	const projectsPromise = userPromise.then(user =>
		fetch(`/api/projects?userId=${user.id}`).then(r => r.json())
	)
	const notificationsPromise = userPromise.then(user =>
		fetch(`/api/notifications?userId=${user.id}`).then(r => r.json())
	)

	const [user, projects, notifications] = await Promise.all([
		userPromise,
		projectsPromise,
		notificationsPromise,
	])

	return { user, projects, notifications }
}

Kent's notes:

I forgot that defer is now unnecessary, simply return an object from your loader and any properties on that object that are promises will be sent along as deferred data automatically. Learn more from the links below.

• Full Stack Components
• Streaming with Suspense
• React Router and React Server Components: The Path Forward
• promiseHash from remix-utils

the UI at https://nothing.tech/products/phone-3 renders a list of "widgets". I would like each of these widgets to have their own loaders to maximise page speed, furthermore I'd be able to "deeplink" a user straight into a widget. But how do I do that when a route can only have one Outlet?

Here's an example with Promise.all. Before:

// routes/dashboard.tsx
export async function loader() {
	const user = await fetch('/api/user').then(r => r.json())
	const projects = await fetch(`/api/projects?userId=${user.id}`).then(r => r.json())
	const notifications = await fetch(`/api/notifications?userId=${user.id}`).then(r => r.json())

	return { user, projects, notifications }
}

After:

export async function loader() {
	const userPromise = fetch('/api/user').then(r => r.json())
	const projectsPromise = userPromise.then(user =>
		fetch(`/api/projects?userId=${user.id}`).then(r => r.json())
	)
	const notificationsPromise = userPromise.then(user =>
		fetch(`/api/notifications?userId=${user.id}`).then(r => r.json())
	)

	const [user, projects, notifications] = await Promise.all([
		userPromise,
		projectsPromise,
		notificationsPromise,
	])

	return { user, projects, notifications }
}

Kent's notes:

I forgot that defer is now unnecessary, simply return an object from your loader and any properties on that object that are promises will be sent along as deferred data automatically. Learn more from the links below.

• Full Stack Components
• Streaming with Suspense
• React Router and React Server Components: The Path Forward
• promiseHash from remix-utils

the UI at https://nothing.tech/products/phone-3 renders a list of "widgets". I would like each of these widgets to have their own loaders to maximise page speed, furthermore I'd be able to "deeplink" a user straight into a widget. But how do I do that when a route can only have one Outlet?

Here's an example with Promise.all. Before:

// routes/dashboard.tsx
export async function loader() {
	const user = await fetch('/api/user').then(r => r.json())
	const projects = await fetch(`/api/projects?userId=${user.id}`).then(r => r.json())
	const notifications = await fetch(`/api/notifications?userId=${user.id}`).then(r => r.json())

	return { user, projects, notifications }
}

After:

export async function loader() {
	const userPromise = fetch('/api/user').then(r => r.json())
	const projectsPromise = userPromise.then(user =>
		fetch(`/api/projects?userId=${user.id}`).then(r => r.json())
	)
	const notificationsPromise = userPromise.then(user =>
		fetch(`/api/notifications?userId=${user.id}`).then(r => r.json())
	)

	const [user, projects, notifications] = await Promise.all([
		userPromise,
		projectsPromise,
		notificationsPromise,
	])

	return { user, projects, notifications }
}

Kent's notes:

I forgot that defer is now unnecessary, simply return an object from your loader and any properties on that object that are promises will be sent along as deferred data automatically. Learn more from the links below.

• Full Stack Components
• Streaming with Suspense
• React Router and React Server Components: The Path Forward
• promiseHash from remix-utils