Comments (3)
Thanks for this @klarstrup !
This is still an opt-out of SSR-streaming though as we await for onAllReady
.
Really hope Urql & React will sort out Suspense
for data-fetching soon, that could be a real performance game-changer.
from react-ssr-prepass.
There's nothing for us to sort out 😅 Either you fetch during rendering or you don't, and that's outside of what urql can decide to do as it's in the Realm of what React guides everyone to do.
That said, with data dependency composition and hoisting using fragments you'd typically have one query per page on average and there'd then be less of a need to do a prepass, except for when starting a new codebase and such
from react-ssr-prepass.
@kitten I may have completely misunderstood Suspense for data-fetching then :)
The way I understood / imagined it - once Suspense is ready to handle any async operation and not just code-splitting, there won't be a need to await all
and any part of the HTML that is ready will be sent immediately, along with the Suspense fallback HTML, which will then be replaced by the "real" HTML once the data is fetched.
This approach will probably be more performant than running one blocking query per page, since you'd be able to immediately respond with a static above-the-fold HTML and then stream the data-dependant below the fold parts (for example).
This is at least how I understood the above article + the following comment in Dan's post:
Note: for this to work, your data fetching solution needs to integrate with Suspense. Server Components will integrate with Suspense out of the box, but we will also provide a way for standalone React data fetching libraries to integrate with it.
"Integrate" is a bit vague but as I understand it, the missing part is providing a way for data-fetching libraries such as Urql to tell React wether the Suspended content is ready or not.
Something like having useQuery integrate with a not-yet-existing React API and updating React with the state of the data-fetching, so that for the end-user of React + Urql - handling the loading state is encapsulated within React.Suspense
+ useQuery
.
Close to what they did with Relay I suppose.
On next-urql's side it'd mean ssr-prepass will no longer be needed but it also shouldn't block the response by awaiting for onAllReady
in getInitialProps
.
But maybe it was all just wishful thinking on my end.
from react-ssr-prepass.
Related Issues (20)
- Throws "ReferenceError: setImmediate is not defined" in browser HOT 2
- Lib not rendering components in same order HOT 7
- React 17 RFC and future maintenance HOT 2
- Relationship to more "full-featured" SSR libraries? HOT 1
- Functional components HOT 5
- React 17 support HOT 1
- Provide ESM build HOT 1
- Compatible with apollo@3 hooks ? HOT 2
- using ssr-prepase after 1.3.0 react 17 HOT 3
- Example with vite-plugin-ssr HOT 4
- React 18 support useId
- Functional Components HOT 1
- Question: Some libraries cannot seemingly clear data in custom derivate...
- Potential bug with wrapped components?
- v1.5.0 Missing from Github HOT 1
- Guard/check missing in areHooksInputEqual()?
- why HTML node showing empty or undefined? HOT 1
- Add useInsertionEffect to the dispatcher
- `Visitor` callback `element` argument is typed incorrectly in TypeScript
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-ssr-prepass.