#How does HTML streaming work?

6 messages · Page 1 of 1 (latest)

jovial quail
#

I have read a bit on the topic and experiment on local machine using Astro fetch() from my database.
https://docs.astro.build/en/guides/server-side-rendering/#using-streaming-to-improve-page-performance
https://docs.astro.build/en/guides/server-side-rendering/#streaming

Astro is running behind Nginx reverse proxy, I'm not quite sure how a fetch is call to my database on a production VPS doesn't seem to improve performance?

Which browsers support HTTP Streaming? Is it refer to HTTP live Streaming?

I was assuming the fetch call would be a short round-trip latency (both Astro and database on the same machine) but in my benchmark test, the requests throughput dropped significantly as the page adds more fetch request.

Home page, SSR, no fetch()
300+ req/s

Home page, SSR, 1's fetch() in component/test.astro
190+ req/s

Home page, SSR, 5's fetch() in component/test.astro
50+ req/s

Benchmark using wrk tool.

Astro Documentation
Server-side Rendering

Build faster websites with less client-side JavaScript.

tropic sleetBOT
#
No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

jovial quail
nimble comet
#

streaming concept is very simple.

  • execute .astro page front matter
  • go to .astro html components section
  • for each astro comoonent in order do :
    • execute component front matter
    • go to compnent html section and generate component html
    • send first component generated html
    • go to next component, loop recursively

As you see there, it's all about the time spent waiting in the frontmatter await. on top level, you did not start sending html, doing it in each component, you would have sent the html of previous component before awaiting the next.

jovial quail
#

I still haven’t grasp the whole concept, except is concern if say does it handle high traffic when my benchmark could only reach 50 req/s is due to the waiting time for each requests or server reach 100% load?

nimble comet
#

that question cannot be answered by astro alone, think of astro like a js script (which it is) so that depends on your server power, memory, and maily fetched dependencies latency. All astro streaming can help you with, is like being able to watch a movie in streaming mode, start watching from second 1. and not wait till the movie finishes downloading before you can start watching, that's what html streaming is about. Now please match html streaming to the html tags received by the browser and if it can handle them live and display them before end of html page.