Comments (4)
Awesome, I hope you enjoyed some time off, its a very important part of the biz...
Thanks for taking the time to think about it. I have also been working around it by moving data fetching up the tree to higher levels, and for the most part it works really well.
That's an interesting approach. I could also imagine some edge cases where that could get in a loop, but you could always add a max depth where it returns regardless. But seems like a solid option to explore. I will let you know if I have something working.
from react-frontload.
Hi @matthewlein thanks for the kind words and really glad it's useful for you.
Sorry for late reply here I've just returned from holiday!
So, yeah, this is something that I've seen before and have thought about a bit. The bottom line is you are right, frontload doesn't support nesting on server render because of the fixed 2 render passes design.
So far I've dealt with this simply by 'flattening' all frontload components to the top level.
On the one hand this has benefits, I think, in simplification of design and code maintainability as in a lot of cases flat is just simpler than nested, and fits in quite well with the Container / Presentational components pattern.
But on the other hand, if you take this too far it starts to remove the purported benefits of frontload, which is that data loading can be extremely localised to individual components. It's still a lot better than, say, loading all the data required for everything in the page at the route level, but it doesn't truly solve the problem, just divides it up a bit.
One possible solution I think would be to do the renders recursively, until the output is equal, then return. I haven't fully thought this through and there could be edge cases where it would not work, but I think it should. It would look something like this (pseudocode)
const frontloadServerRender = async (render, lastRenderedHtml, passNumber = 1) => {
let nextRenderedHtml = await render()
if (lastRenderedHtml !== nextRenderedHtml) {
console.log(`render pass ${passNumber} - not finished, doing another pass`)
return frontloadServerRender(render, nextRenderedHtml, passNumber + 1)
}
console.log(`render pass ${passNumber} - finished, returning markup`)
return nextRenderHtml
}
from react-frontload.
Thanks, was a great holiday yes!
I think a max depth would make a lot of sense. Nested components firing chains of promises in serial are going to mean, in almost all cases, longer wait times before all content is loaded. This is less of an issue on the client where loaders can be shown whilst each progressive layer is rendered, but on the server it would certainly be more noticeable having to wait until the very last layer is loaded before returning.
A max depth limit could also help with this -- just telling the server to stop after a certain number of passes for general performance reasons then just render the rest on the client - the tricky thing here though is how to get those frontloads nested past the limit to 'know' they need to run on the first client render?
from react-frontload.
@matthewlein I've implemented this feature in #20
If you have time I'd appreciate if you'd give feedback and thoughts on whether I've done it the way you were expecting and if the documentation makes sense. Decided to go with the limit rather than just turning it on/off with a boolean for the reason you suggested above - to avoid infinite loops or just accidentally very deep nesting in unexpected corner cases etc, which would effectively just break server render.
It's been a bit of a challenge to document succinctly but thoroughly because there is so much nuance to it and so much of if/how to use this feature will depend on the application. But I've given it my best first shot!
from react-frontload.
Related Issues (20)
- frontloadConnect not running when navigating HOT 3
- [Question] Get a context value in frontload function? HOT 1
- useContext HOT 5
- [Feature request] specifying which props should fire reload HOT 3
- Frontload function not being called on the server HOT 5
- can't set props HOT 1
- Server Side Issues with Dispatch Action Method HOT 10
- Any way to run multiple actions from one component ? HOT 2
- Deprecated componentWillMount HOT 3
- Missing `await` in docs code example HOT 2
- ReRender on Client HOT 5
- Error code HOT 7
- Ability to disable SSR via prop HOT 1
- Replace `componentWillMount`
- Ability to reload data client-side
- Is frontload compatible with renderToNodeStream? HOT 4
- frontloadMeta.pending when nothing is returned HOT 2
- frontloadMeta.serverRendered false on webkit HOT 1
- handling error during server render HOT 1
- react-frontload with (@loadable/component ) or (suspense and lazy), hydration error HOT 1
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-frontload.