-
-
Save bb/a6c9cdbdbe253f3a77c5212c827dc3b1 to your computer and use it in GitHub Desktop.
| // this is pages/index.js of a fresh next.js app | |
| import {observer} from 'mobx-react'; | |
| import {observable} from 'mobx'; | |
| const store = observable({ color: "#f00"}) | |
| const clientOnly = () => store.color = "#0f0"; | |
| if (typeof window != 'undefined') { | |
| // clientOnly(); // too early: stays red + console error | |
| // Promise.resolve().then(clientOnly); // too early: stays red + console error | |
| setTimeout(clientOnly, 0); // too late: red visible | |
| // window.requestAnimationFrame(clientOnly); // too late: red visible | |
| } | |
| export default observer(() => | |
| <div style={{background: store.color}}> | |
| Background should be green without flickering to red on reload | |
| </div>); |
Update and solution
If you really, really want to work around flickering and use client side, you can add an inline JS directly in the element. Inside of JSX this needs a little extra work with dangerouslySetInnerHTML. I also changed the example to use className, see below for explanation.
// this is pages/index.js of a fresh next.js app
import {observer} from 'mobx-react';
import {observable} from 'mobx';
import Head from 'next/head';
const store = observable({ color: "red"})
const clientOnly = () => store.color = "green";
if (typeof window != 'undefined') {
clientOnly(); // works
// Promise.resolve().then(clientOnly); // works
// setTimeout(clientOnly, 0); // works, but warning (state update too late, see below)
// window.requestAnimationFrame(clientOnly); // works, but warning (state update too late, see below)
}
export default observer(() =>
<div id="foo" className={store.color} >
<script dangerouslySetInnerHTML={{
__html: `document.getElementById("foo").className = "green";`
}}></script>
<Head>
<style>{".red{background: #f00} .green{background: #0f0}"}</style>
</Head>
Background should be green without flickering to red on reload
</div>);
You may want to add the inline script tag only on SSR - that exercise is left for the reader (-;
Additional info for late client state updates and DOM inconsistencies
You need to make your existing DOM and the client state matching at the time react rehydrates. If client state is updated too late, you need to add suppressHydrationWarning={true} on the element you're modifying (i.e. div foo).
That may also be needed when you have an inconsistency in output, e.g. when using style instead of classname as in the initial example because of whitespace and color representation (#0f0 vs rgb(0, 255, 0) etc.)
Try it:
then http://localhost:3000/