Import Rendered Server Component with Browser Data Arguments

[vincenzorm117]

Background

I've been experimenting with NextJS App Router Streaming and dynamic imports. Here is my understanding below.

Streaming
Streaming works like in this Mermaid Diagram (image below)

Dynamic Components
Dynamic components work like in this Mermaid Diagram (image below)

Note

Anybody feel free to correct me here, but I believe when the dynamic component is downloaded, I don't think that always happens where the dynamic function is called. I think NextJS will optimize where its bundled, so it might already be downloaded; just not used.

Problem

When a user visits my site, I am trying to:

1. Load a slim loading page (for fast loading)
2. Gather browser data (specifically viewport dimensions)
3. Transmit the viewport dimensions to the server
4. Server renders Server Component and serves it to client
5. Client loads final experience
   Here is a Mermaid diagram (image below) of the flow.
   

I've played with the 2 approaches above, but been having trouble getting this case to work.

Questions

Overall, does anybody recommend approaching this a specific way?

1. Is there a way to pass arguments to a dynamic import, have the component rendered on the server, and the client renders the server rendered component?
2. I've experimented with revalidatePath and suspect that may be another approach. Has anybody been able to get something like this to work with revalidatePath?