<a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github

Yeah I just watched <a href="https://youtu.be/edB964-YYpE?si=7j0OL8PjBUPgC404" rel="no

Hi! Quick question: I updated the README over at <code class="notran

HTML streaming about fastify-html HOT 10 CLOSED

gurgunday commented on May 27, 2024 1

HTML streaming

from fastify-html.

Comments (10)

mcollina commented on May 27, 2024 2

I don't think this is really useful, because generators are all synchronous anyway, and concatenating strings is incredibly cheap. I would expect generators to worsen performance.

However, supporting promises and streaming the chunk after each one resolves, would boost time to first byte.

from fastify-html.

mcollina commented on May 27, 2024 1

Do you think the TTFB would be slower in the following scenarios?

No, TTFB would exactly the same or slower, because all the data is going to the kernel in the same event loop tick. It can be slower because streams adds overhead and you already have all the data.

from fastify-html.

gurgunday commented on May 27, 2024

However, supporting promises and streaming the chunk after each one resolves, would boost time to first byte.

Alright, I will look into that, thanks for the input

Perf will definitely degrade I think, here the goal is faster TTFB

from fastify-html.

gurgunday commented on May 27, 2024

Do you think the TTFB would be slower in the following scenarios? Even though the final result might take longer, the important thing here is that the user will start seeing things much faster, no?

app.get("/", function (req, res) {
  const htmlContent = htmlGenerator`<html>
    <p>${"...your HTML content..."}</p>
  </html>`;
  const readableStream = Readable.from(htmlContent);
  res.send(readableStream);
});

Or (of course will be adapted for Fastify):

import { htmlGenerator as html } from "ghtml";
import http from "http";

http.createServer(async (req, res) => {
  if (req.url === '/stream') {
    res.writeHead(200, { 'Content-Type': 'text/html' });

  const htmlContent = html`<html>
  <p>${"...your HTML content..."}</p>
</html>`;
    for await (const chunk of htmlContent) {
      res.write(chunk);
    }

    res.end();
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
}).listen(3000, () => console.log('Server running on http://localhost:3000'));

from fastify-html.

gurgunday commented on May 27, 2024

https://frontendmasters.com/blog/streaming-html/

from fastify-html.

gurgunday commented on May 27, 2024

Yeah I just watched your masterclass, and to say the least, it came out at the perfect time 😄

So what I had in my mind with htmlGenerator won't improve TTFB, maybe I might add an async generator to combine with readFile, etc, but in any case thanks again for the information and the video 🙏

Closing for now

from fastify-html.

gurgunday commented on May 27, 2024

Hi! Quick question:

I updated the README over at ghtml to reflect on what I've learned, would you say this explanation is accurate?

from fastify-html.

mcollina commented on May 27, 2024

It's slightly incorrect. If you have all the data, processing and rendering synchronously will be faster.

from fastify-html.

gurgunday commented on May 27, 2024

Yes, it says streaming with sync generators are never faster than processing directly without the generator

I'll try to improve the wording

from fastify-html.

gurgunday commented on May 27, 2024

Done: https://github.com/gurgunday/ghtml?tab=readme-ov-file#htmlgenerator

from fastify-html.

HTML streaming about fastify-html HOT 10 CLOSED

Comments (10)

Related Issues (2)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent