Progressive Rendering #95

brillout · 2024-06-24T05:43:06Z

React 18 introduced Progressive Rendering. Does Solid support this?

It would be nice to potentially integrate it with Vike extensions (e.g. #94 and the upcoming vike-{react,vue,solid}-telefunc).

The text was updated successfully, but these errors were encountered:

phonzammi · 2024-07-07T10:08:52Z

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.

brillout · 2024-07-07T10:24:21Z

Thank you phonzammi for the nice digging 💯

FYI there is some dependency injection going on between Vike and react-streaming which enables Vike to inject into React's SSR stream. (In Vike internal technical terms: STREAM instead of HTML_END.) We could do the same for Solid. Does Solid provide a primitive to inject into the SSR stream (something like reactjs/rfcs#219)?

As for the double fetching issue, I guess the question here is whether it's a bug on Solid's side or on Solid Start's side?

phonzammi · 2024-07-10T09:24:54Z

Does Solid provide a primitive to inject into the SSR stream (something like reactjs/rfcs#219)?

AFAIK, it doesn't. But, solidjs does have onCompleteShell & onCompleteAll options that we can use like this :

pageView = renderToStream(() => getPageElement(pageContext), {
        onCompleteShell(info) {
            info.write("<script></script>")
        },
      }).pipe;

After doing more research, here is the sequence of how Vike + Solid streams when there is an async component (like in this test):

fetchMovies start
injectStringAtBegin()
first stream (non promise string: from layout to Loading placeholder or template tag and a bit of <script> tag)
onCompleteShell()
fetchMovies done
second stream : <template> tag included all movies list
third stream : Long <script> tag to replace Loading template with Movies list.
onCompleteAll()
injectStringAtEnd()

Due to injectStringAtEnd(), which also injects a client entry script, being executed at the very end, hydration does not occur until everything is finished. I may have an idea on how we can inject the vike_pageContext script, viteDevScript, and the client entry script after the first stream is flushed. I'll try to create a PR on Vike's core once I've done it.

As for the double-fetching issue, which is indeed a limitation on the SolidJS side (solidjs/solid#2217), let's hope that it can be resolved.

phonzammi · 2024-08-22T14:04:05Z

Hi @brillout and @magne4000

I’ve updated a working example : vike-solid-streaming-ssr-example.

Note about issue solidjs/solid#2217: My previous test with SolidJS (without Solid Query) used a different approach compared to using SolidJS with Solid Query. AFAIK, the issue is just with where we use the <Suspense> component. My apologies for the confusion; it was my mistake. I actually implemented it correctly with Solid Query and didn’t notice the difference. 🤦‍♂️

Please take a look and let me know if it’s good enough and if it’s the right approach.

See also : solidjs/solid#2217 (comment)

phonzammi · 2024-08-28T16:00:28Z

I’ve updated a working example : vike-solid-streaming-ssr-example.

I've tried this example (including with solid-query) using vike-solid from @0.7.0, to @0.7.3, and the result is interesting. Progressive rendering works in development mode but not in preview. However, using [email protected] works for both.

Do you have any idea what changes could be causing this issue?

phonzammi · 2024-08-29T02:57:54Z

what changes could be causing this issue?

I tried again by commenting out this line,

vike-solid/vike-solid/renderer/onRenderHtml.tsx

Line 92 in 98fe78f

${headElementsHtml}

and progressive rendering now works in preview mode.

Update : Either remove

vike-solid/vike-solid/renderer/onRenderHtml.tsx

Line 91 in 98fe78f

${viewportTag}

or

vike-solid/vike-solid/renderer/onRenderHtml.tsx

Line 92 in 98fe78f

${headElementsHtml}

makes progressive rendering works in preview mode.

brillout · 2024-08-30T08:53:53Z

That seems surprising? Is that a Solid bug or quirk?

phonzammi · 2024-09-05T17:11:38Z

After further investigation and testing with the vike-solid-streaming-ssr-example/with-express using Express, including adding several dummy meta tags, I believe the issue lies with the Vite preview server.

We encounter the same issue with vike-react.

Update :
After digging a bit deeper, I found that Vite uses the @polka/compression middleware on the preview server.

I also tried using @polka/compression with Express: phonzammi/vike-solid-streaming-ssr-example@ce75a06, and the result was the same as with the Vite preview server: it breaks Progressive Rendering.

brillout added enhancement ✨ New feature or request contribution-welcome 💕 labels Jun 24, 2024

phonzammi mentioned this issue Jul 11, 2024

fix: support injectScriptsAt: 'STREAM' vikejs/vike#1740

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Progressive Rendering #95

Progressive Rendering #95

brillout commented Jun 24, 2024

phonzammi commented Jul 7, 2024

brillout commented Jul 7, 2024

phonzammi commented Jul 10, 2024 •

edited

Loading

phonzammi commented Aug 22, 2024 •

edited

Loading

phonzammi commented Aug 28, 2024 •

edited

Loading

phonzammi commented Aug 29, 2024 •

edited

Loading

brillout commented Aug 30, 2024

phonzammi commented Sep 5, 2024 •

edited

Loading

Progressive Rendering #95

Progressive Rendering #95

Comments

brillout commented Jun 24, 2024

phonzammi commented Jul 7, 2024

brillout commented Jul 7, 2024

phonzammi commented Jul 10, 2024 • edited Loading

phonzammi commented Aug 22, 2024 • edited Loading

phonzammi commented Aug 28, 2024 • edited Loading

phonzammi commented Aug 29, 2024 • edited Loading

brillout commented Aug 30, 2024

phonzammi commented Sep 5, 2024 • edited Loading

phonzammi commented Jul 10, 2024 •

edited

Loading

phonzammi commented Aug 22, 2024 •

edited

Loading

phonzammi commented Aug 28, 2024 •

edited

Loading

phonzammi commented Aug 29, 2024 •

edited

Loading

phonzammi commented Sep 5, 2024 •

edited

Loading