How to create Optimistic UI with react SSR


(Ilyadoroshin) #1

I want to achieve the following (simplistic):

App.js:

const App = () => (
  <div>
    { 
      browser
      ? <MyFancyComponent />
      : <SkeletonPreview />
     }
  </div>
)

So that when I renter the app on Server it returns skeleton something like this (like bitbucket or facebook does on very first load).

The question is, wether ReactDOM.hydrate() will replace the whole app or just parts that are different from server-rendered? And if there’s a better/correct way to achieve that?

Thanks!