ssr: streaming with suspense #187
Conversation
roman01la
force-pushed
the
roman/ssr-suspense-streaming
branch
2 times, most recently
from
6b05354 to
c2b2f1d
Compare
|
master: PR: |
roman01la
force-pushed
the
roman/ssr-suspense-streaming
branch
from
c2b2f1d to
b5d96b9
Compare
|
master: PR: |
roman01la
force-pushed
the
roman/ssr-suspense-streaming
branch
from
b5d96b9 to
b0aeee5
Compare
|
master: PR: |
roman01la
force-pushed
the
roman/ssr-suspense-streaming
branch
from
b0aeee5 to
531e146
Compare
|
master: PR: |
roman01la
force-pushed
the
roman/ssr-suspense-streaming
branch
from
531e146 to
1fbcaec
Compare
roman01la
force-pushed
the
roman/ssr-suspense-streaming
branch
from
1fbcaec to
10af761
Compare
|
master: PR: |
|
master: PR: |
Initial implementation of streaming SSR with suspense boundaries, as described in reactwg/react-18#37
example.coreincludes web server implementationexample.uiincludes UI components with suspense boundariesRunning the demo
cd dom && clojure -A:dev -M -m example.corecd dom && clojure -A:dev -M -m shadow.cljs.devtools.cli watch ssrExplainer
When server rendering on JVM, data dependencies are resolved synchronously, which blocks delivery of HTML to the client. Moreover, it introduces a waterfall of requests, making HTML generation even slower.
Instead, it's proposed to implement out of order streaming. We can run suspended UI concurrently (UIx elements wrapped in
suspensecomponent) and return initial HTML immediately. Once the suspended UI resolves, chunks of HTML are streamed to the client together with bits of JS that insert the streamed HTML into DOM at specified locations where "suspended" UI is declared.Together with HTML and JS we also stream the data retrieved in suspended components, so that React on the client can pick it up and correctly hydrate HTML into interactive UI.
Using this approach, we are able to keep co-located data and prevent degraded user experience.
TODO
$!error handling