Comments (18)
After the release of React Hooks I've moved away from react-tree-walker
.
I figured that it will be an endless fight to keep up with React. Very ambitious to say the least (just thinking about Suspense, Concurrent mode, etc.)
In the end I decided to go the same way as react-apollo
did. Even if it's one more complete render cycle. I simplified it a lot for my use case.
If anyone is interested that's how I've roughly done it.
// server.js
// Preparation for SSR
export const PreloadPromiseContext = React.createContext()
// This will called on page load on SSR
const preload = async tree => {
const loaders = []
const registerLoader = loaderConfig => loaders.push(loaderConfig)
// collect
ReactDOMServer.renderToStaticMarkup(
<PreloadPromiseContext.Provider value={{ registerLoader }}>
{tree}
</PreloadPromiseContext.Provider>
)
// resolve one after another
// loaders will put responses into global store
for (const { props, loader } of loaders) {
await loader(props)
}
}
// Actual SSR
server.use(async (req, res) => {
const app = (
<Provider store={store}>
<App />
</Provider>
)
await preload(app)
// use state and markup to render the actual HTML output
const state = store.getState()
const markup = ReactDOMServer.renderToString(app)
})
Now this is used in combination with a HoC (could maybe be a hook at some point?) Every component which should preload is wrapped with this.
import PreloadPromiseContext from './server.js'
const resolve = loader => Component => {
class Resolve extends React.Component {
static contextType = PreloadPromiseContext
constructor(props, context) {
super(props, context)
if (context && typeof window === 'undefined') {
// fetch on SSR
context.registerLoader({ props, loader })
} else {
// fetch on client side, to make life easier
// (you might not need this)
loader(props)
}
}
render() {
return <Component {...this.props} />
}
}
return hoistNonReactStatics(Resolve, Component)
}
// Example usage for a component. The result will be put in a global store inside the called function
export default presolve(props => props.store.fetchThings())(MyApp)
from react-tree-walker.
Any updates on this? I have problems updating to react 16.6.x which makes react-async-bootstrapper unusable.
from react-tree-walker.
@ctrlplusb Any idea when you'll be releasing this? We're using react-tree-walker
over at next-i18next. Thanks!
from react-tree-walker.
React hooks is probably a bigger problem than the context API, a lot of libraries including graphql-react
and Apollo have given up on walking React trees.
from react-tree-walker.
Ah, I see what you mean now. Your solution in graphql-react and the new react-apollo getDataFromTree are interesting. I imagine it's a lot more expensive but the reliability is what matters most I guess.
from react-tree-walker.
As another reference, I've recently fixed the graphql-react
SSR preload
function for React v16.6 context: Diff here.
from react-tree-walker.
@tadeuszwojcik of course, always happy to keep inline with the latest fixes and enhancements that the Apollo team have applied. Would really appreciate the PR. 👍
from react-tree-walker.
Seems like @ctrlplusb is inactive, it's a bit annoying. Did anyone create a fork and published it on npm?
from react-tree-walker.
@isaachinman @jcampalo Did you guys publish a fork by any chance?
from react-tree-walker.
Hi @oyeanuj. Over at next-i18next I had to move away from react-tree-walker
entirely due to:
- Performance impact.
- Unreconcilable issues with context.
It's a bit of a shame, but I think this project is self-aware in that it's not appropriate for every use case.
Good luck!
from react-tree-walker.
@isaachinman what did you end up using instead?
from react-tree-walker.
@oyeanuj I took a completely different approach that sidestepped tree traversal entirely. Sorry if that's not helpful.
from react-tree-walker.
@ctrlplusb Please give proper rights to others, we need this fix.
from react-tree-walker.
Shit. completely stuck on this. Days sunk into this already. What are people using as alternatives?
from react-tree-walker.
@mschipperheyn I didn't personally check it myself, but see this: #46 (comment)
from react-tree-walker.
@mschipperheyn I didn't personally check it myself, but see this: #46 (comment)
I tested this and It did not solve this problem.
from react-tree-walker.
Does this fork fix the issue for anyone? It has worked for me. If so I can work on a PR w/ the fix I lifted from react-apollo
.
https://github.com/jaredLunde/react-tree-walker
from react-tree-walker.
Yeah, I mean it's a large part of why I haven't even begun looking at Hooks. I need asynchronous components on the server side more than I need hooks. Unfortunately React.lazy + Suspense is useless until their new server renderer is done in the second half of this year so this will have to do.
from react-tree-walker.
Related Issues (20)
- Support React v16.3 context API HOT 9
- Support preact HOT 1
- Support concurrent branch traversal HOT 2
- Behavior on server-side when using in conjunction with dynamic imports HOT 7
- Fails with CSS in JS systems HOT 2
- Problems with context using react-jss HOT 1
- Accept iterables and collections as children. HOT 1
- A promise was created in a handler at webpack-internal://...react-tree-walker... but was not returned HOT 2
- feature request: provide current element depth to visitor function HOT 1
- Add support for getDerivedStateFromProps
- Add a note that this is discouraged HOT 4
- React.forwardRef is not supported HOT 1
- ReactDOMServer.renderToString() recreates components tree from the scratch HOT 1
- issue with connect, outdated props when rendered HOT 1
- React tree walker can not walk children 2.0.0 react-async-component components HOT 1
- Fix new Context handling (react@^16.6.x)
- Warning: Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. HOT 3
- Type error in ssr development mode
- You should not use <Switch> outside a <Router> 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-tree-walker.