react-prerendered-component
react-prerendered-component copied to clipboard
theKashey
Needs more explanation 😅
I encountered this repo a few times and I never quite grasped what it does. I did an extra effort today, and I think it does this: SSR fragments for code-splitted components.
Is that correct? So it renders page HTML + optional state while the browser downloads and executes the required JS?
I wonder how to make that more immediately understandable when seeing the repo the first time 🤔
Right now it does 3 things:
- controls client/server side rendering (aka ClientSideOnly component == noSSR) I've created for you. No joke, for you.
- delays hydration into HTML by keeping that HTML. In the same time allows state rehydration from HTML like in jQuery era. See this PR (code) for details.
- fragment caching on server and client side. The latest addition.
Check this, this and this articles.
I have to +1 this one, the documentation is really hard to understand. I'd be happy to help you with the readme but for now I really don't understand what you are saying there.
I know this repo is about partial hydration, but I have no clue how it works or how to use it.
Oh, I was absolutely sure this is one of the most proper documented libraries of mine.
I read the examples and these articles but still can't understand how it works.
I tried something like this:
import React from 'react';
import { PrerenderedComponent } from 'react-prerendered-component';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: this.props.counter || 0
};
}
render() {
return (
<PrerenderedComponent
restore={(el) => {
console.log('restore fired');
this.setState({
counter: +el.querySelector('i').innerHTML
});
}}
live={!!this.state.counter}
>
<p>Am I alive?</p>
<i>{this.state.counter}</i>
</PrerenderedComponent>
);
}
}
const element = document.getElementById('app');
ReactDOM.hydrate(<PrerenderedControler hydrated><App /></PrerenderedControler>, element);
Markup:
<html>
<body>
<!-- ReactDOM.renderToString(<PrerenderedControler isServer><App counter={10} />/PrerenderedControler>); -->
<div id="app"><div id="prc-1-1" data-prerendered-border="true"><p>Am I alive?</p><i>10</i></div></div>
<script src='./main.js'></script>
</body>
</html>
Got Warning: Text content did not match. Server: "10" Client: "0" and the restore method seems never get called.
What I should do to let App set counter as 10 after hydrated?
Let me extract your example as a test case. Everything is ok from the first sight.
