9 - Streaming

[treejamie]

https://nextjs.org/learn/dashboard-app/streaming

Covers:

• What streaming is and when you might use it.
• How to implement streaming with loading.tsx (a new special file) and Suspense.
• What loading skeletons are.
• What Next.js Route Groups are, and when you might use them. dashboard / (overview) / page.tsx
• Where to place React Suspense boundaries in your application.

Phoenix's LiveView vs Next.js Streaming

It is an obvious question that I had, but I wanted to have it answered and this seemed like the place to do it. I am beginning to think that Next.js may be a better use case for the personal blog and Elixir may be a better fit for dendromeda.

hmm. Anyhoo...

Just incase you were wondering - good old Professor GPT had this to say (everything below is LLM)

⚡ Phoenix LiveView vs 🔄 Next.js Streaming

Next.js streaming and Phoenix LiveView both tackle UI responsiveness and interactivity, but they come from different philosophies. Here's how they compare:

---

⚡ Phoenix LiveView

• Server-rendered UI updates over WebSockets
• State lives on the server
• UI updates are streamed via diffs — no custom JS needed for most interactivity
• Super efficient, real-time feel with minimal client logic
• Elixir-powered, very lightweight on the frontend

🔧 Feels like: “Live backend controlling the DOM directly”

---

🔄 Next.js Streaming (React Server Components / Suspense)

• Partial rendering streamed over HTTP
• Uses React's Suspense and async server components
• Improves Time to First Byte (TTFB) and perceived load time
• State is mostly client-side or hydrated after load (or managed with tools like useState, useEffect, etc.)

🔧 Feels like: “Progressively streamed HTML until hydration kicks in”

---

🧠 Core differences

Feature	Phoenix LiveView	Next.js Streaming
Transport	WebSocket	HTTP
State Location	Server	Client (mostly)
UI Update Mechanism	DOM patches via diffs	HTML streaming & React hydrate
JS Required?	Minimal to none	React + client JS
Use Case Fit	Real-time dashboards, forms	Fast SSR, complex app pages

---

🧪 TL;DR

• LiveView is real-time UI with live server state over WebSockets.
• Next.js streaming is fast partial server-side rendering with progressive HTML and hydration.

They’re both brilliant — just with different tradeoffs and stack roots. If you're loving LiveView, you might find RSCs + server actions in Next.js kinda similar in spirit, but not as seamless for real-time interactivity (without adding your own sockets or SWR).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextjs-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 9, 2025 7:43am