Hi @brillout

I've been trying out some examples using vike-solid, solidjs, and solid-start, as well as combinations like vike-solid with solid query and solidjs with solid query.
@ryansolid, allow me to tag you here.

Here are my conclusions:

vike-solid, repo: vike-solid-streaming-ssr-test, codesandbox.

vike-solid-streaming-ssr-test-1	vike-solid-streaming-ssr-test-2
vike-solid-streaming-ssr-test-1.mp4	vike-solid-streaming-ssr-test-2.mp4

From the video vike-solid-streaming-ssr-test-1, we can see that while the page is streaming and the content is still loading, clicking the counter button doesn't trigger interaction. However, after the content fully loads and displays, the counter updates based on previous clicks. If I recall correctly, @ryansolid referred to this as event replay.

Also, from the console's network tab, we can observe that something is preventing all assets from being fetched until the movies are fetched. I'm not sure what is causing this issue. (This also occurs even when using solid-query).

From the video vike-solid-streaming-ssr-test-2, when I changed the script tag to be HTML_BEGIN (which means that vike_pageContext script, the viteDevScript, and the client entry script will be inserted inside the <head> tag), there is no more blocking, the counter is interactive while streaming the content. But after the movies are fetched on the server and the Loading suspense disappears, the movies are being fetch again in the browser. This issue only happens if we click the counter while the content is still loading. @ryansolid, do you know what causing this issue? I may need to create a separate issue on the solid's repo since this issue also happened on the solidjs & solid-start side.

vike-solid with solid-query. vike-solid-streaming-ssr-test-with-react-query.

vike-solid-streaming-ssr-test-with-solid-query.mp4

Using solid-query with all those scripts tag inserted to the <head> we finally accomplished what we wanted.

solidjs: solid-streaming-ssr-test, solid-start : solid-start-streaming-ssr-test, and solidjs + solid-query : solid-query-streaming-ssr-test.

solidjs	solid-start	solidjs + solid-query
solid-straming-ssr-test.mp4	solid-start-straming-ssr-test.mp4	solid-straming-ssr-test-with-solid-query.mp4

That's all I have for now. I hope that helps. Please take a look, review it, and correct me where I'm wrong.

Uh oh!

Progressive Rendering #95

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions