All Topics
All Topics
Technology
Technology
AI
AI
Business
Business
Entertainment
Entertainment
News
News
Programming
Programming
Security
Security
Science
Science
Design
Design
Environment
Environment
Finance
Finance
Crypto
Crypto
Politics
Politics
Sports
Sports
Education
Education
Gaming
Gaming
Art
Art
Music
Music
Health
Health
Books
Books
Food
Food
Travel
Travel
Personal
Personal
Bluesky
Twitter

Workers - Transform HTML quickly with streaming content

1y ago

Source

CloudflareWorkers - Transform HTML quickly with streaming contentcloudflare.com
Snippet from the RSS feed
You can now transform HTML elements with streamed content using HTMLRewriter . Methods like replace , append , and prepend now accept Response and ReadableStream values as Content . This can be helpful in a variety of situations. For instance, you may have a Worker in front of an origin, and want to replace an element with content from a different source. Prior to this change, you would have to load all of the content from the upstream URL and convert it into a string before replacing the element. This slowed down overall response times. Now, you can pass the Response object directly into the replace method, and HTMLRewriter will immediately start replacing the content as it is streamed in. This makes responses faster. JavaScript class ElementRewriter { async element ( element ) { // able to replace elements while streaming content // the fetched body is not buffered into memory as part // of the replace let res = await fetch ( " ) ; element . replace ( res ) ; } } export default { async fetch ( request , env , ctx ) { let response = await fetch ( " ) ; return new HTMLRewriter () . on ( "[data-to-replace]" , new ElementRewriter ()) . transform ( response ) ; }, }; TypeScript class ElementRewriter { async element ( element : any ) { // able to replace elements while streaming content // the fetched body is not buffered into memory as part // of the replace let res = await fetch ( ' ) ; element . replace ( res ) ; } } export default { async fetch ( request , env , ctx ) : Promise < Response > { let response = await fetch ( ' ) ; return new HTMLRewriter () . on ( '[data-to-replace]' , new ElementRewriter ()) . transform ( response ) ; }, } satisfies ExportedHandler < Env >; For more information, see the HTMLRewriter documentation .

You might also wanna read

Comments

Sign in to join the conversation.

No comments yet. Be the first.