Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use of more than one data-on-load attribute on a page seems to multiply requests exponentially #509

Open
radcool opened this issue Jan 22, 2025 · 0 comments
Open

Use of more than one data-on-load attribute on a page seems to multiply requests exponentially #509

radcool opened this issue Jan 22, 2025 · 0 comments

Comments

@radcool
Copy link

radcool commented Jan 22, 2025

(observed and tested with Datastar version v1.0.0-beta.2 on Chrome and Firefox)

When trying out the data-on-load attribute with the new __delay modifier, I've noticed that if I have more than one data-on-load attribute executing, GET fetch requests returning a fragment containing itself a data-on-load attribute seem to multiply exponentially, overloading the browser within a few seconds.

The starting page used during testing contains these two divs:

<div id="magret1" data-on-load__delay.1s="@get('/sse1')">Count: 0</div>
<div id="magret2" data-on-load__delay.1s="@get('/sse2')">Count: 0</div>

Both /sse* endpoints return a Datastar SSE event with a fragment containing a similar div, but with the current time:

<div id="magret1" data-on-load__delay.1s="@get('/sse1')"><current_time></div>
<div id="magret2" data-on-load__delay.1s="@get('/sse2')"><current_time></div>

If the starting page is modified to only contain ONE div with the data-on-load attribute, the runaway behavior is not seen, and the sole div updates every second from the backend, as expected.

Below is the Go backend code which uses templ for HTML rendering.

main.go

package main

import (
	"log"
	"net/http"

	"github.com/a-h/templ"
	datastar "github.com/starfederation/datastar/sdk/go"
)

func main() {
	http.Handle("/", templ.Handler(home()))

	http.HandleFunc("GET /sse1", func(w http.ResponseWriter, r *http.Request) {
		sse := datastar.NewSSE(w, r)
		sse.MergeFragmentTempl(frag1())
	})

	http.HandleFunc("GET /sse2", func(w http.ResponseWriter, r *http.Request) {
		sse := datastar.NewSSE(w, r)
		sse.MergeFragmentTempl(frag2())
	})

	log.Fatal(http.ListenAndServe(":8080", nil))
}

data.templ

package main

import "time"

templ home() {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1"/>
			<title>Datastar on load delay test</title>
			<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js"></script>
		</head>
		<body>
			<h1>Datastar on load delay test</h1>
			<div id="magret1" data-on-load__delay.1s="@get('/sse1')">Count: 0</div>
			<div id="magret2" data-on-load__delay.1s="@get('/sse2')">Count: 0</div>
		</body>
	</html>
}

templ frag1() {
	{{ currentTime := time.Now().String() }}
	<div id="magret1" data-on-load__delay.1s="@get('/sse1')">{ currentTime }</div>
}

templ frag2() {
	{{ currentTime := time.Now().String() }}
	<div id="magret2" data-on-load__delay.1s="@get('/sse2')">{ currentTime }</div>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@radcool