Test HTML produced on server hydrates without errors on client-side

[overlookmotel]

I think it should work fine, but would be good to test.

[revskill10]

I got mismatched error when using hydrate .
With render , there's no mismatched error on client.

[overlookmotel]

Can you please post the code that produces this error?

[revskill10]

@overlookmotel I setup global state and use it as a cache to hydrate later:

const { setGlobal, getGlobal, addReducer, resetGlobal } = require('reactn');
const LRU = require('lru_map').LRUMap
const LIMIT = 10
const setupGlobal = ({cache}) => {    
  setGlobal({
    cache
  });
  addReducer('setCache', (global, key, record) => {
    global.cache.set(key, record)
    return {
      cache: global.cache
    }}
  );

  addReducer('evictCache', (global, key) => {
    //delete(global.cache, key)
    global.cache.delete(key)
    return {
      cache: global.cache
    }}
  );
}

export const setupGlobalCache = (limit = LIMIT) => {
  resetGlobal()
  let cache = new LRU(limit);

  setupGlobal({cache})
}

export const getGlobalCache = () => {
  const cache = getGlobal().cache.toJSON()
  return {
    cache
  }
}

export const loadGlobalCache = (serialized, limit = LIMIT) => {
  resetGlobal()
  const cache = new LRU(serialized)
  window.__CACHE__ = cache
  //cache.fromJSON(serialized.cache)
  setupGlobal({cache})
}

Then do serialization on server.js

const globalValue = getGlobalCache().cache.map(it => [it.key, it.value])
...
<script id='graphql-state'>
          window.__PRELOADED_STATE__=${serialize({cache:globalValue})}
        </script>

Then on client.js

import { loadGlobalCache } from './ssr/lru-cache'
loadGlobalCache(window.__PRELOADED_STATE__.cache)
loadableReady(() => {
  const sheetsManager = new Map();
  const generateClassName = createGenerateClassName();
  hydrate(
    <JssProvider generateClassName={generateClassName}>
      <MuiThemeProvider sheetsManager={sheetsManager} theme={theme}>
        <App />
      </MuiThemeProvider>
    </JssProvider>
)

[revskill10]

I think, because render has no warning, mean that something is wrong with client-side suspending when using with hydrating , so server-side or state part is not the problem here ?

[overlookmotel]

@revskill10 There's a lot of moving parts here. Are you able to simplify it?

I can't really investigate this as I am missing a lot of the pieces:

• Code for App
• Contents of './ssr/lru-cache'
• JssProvider
• MuiThemeProvider
• loadableReady

If you can't reduce the example's complexity, can you share all the code as a repo so I can run it and replicate the case on my machine? At this point, I haven't got a clue where to start!

[revskill10]

@overlookmotel Please give me some days to reproduce on a minimal repo !
Basically, what i tried to do is:

• Adding a global cache (using library lru_map)
• During the suspense phase, get and set from the global cache.
• Hydrating on client the cache

This is not much different from the react-cache , but we also need ability to dehydrate/hydrate from SSR. Currently, react-cache is broken on 16.8.3 and it doesn't provide method to dehydrate to JSON.

[overlookmotel]

Sure. Thank you very much for your effort.

[overlookmotel]

By the way, did you mean react-cache rather than reach-cache?

[revskill10]

@overlookmotel Yes, it's react-cache .

[revskill10]

@overlookmotel I retested with apollo-client and everything works fine. This is a non-issue.

[overlookmotel]

@revskill10 OK great. Thanks for letting me know.