SSR Warning: useLayoutEffect does nothing on the server (v8.0.0)

neptunian / react-photo-gallery

React Photo Gallery

http://neptunian.github.io/react-photo-gallery/

Other

1.97k stars 308 forks source link

SSR Warning: useLayoutEffect does nothing on the server (v8.0.0) #144

Open tim-soft opened 5 years ago

tim-soft commented 5 years ago

I get the following server-side warning in Next.js with react-photo-gallery v8

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. 
This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

Here's how to repro:

yarn create next-app test-app

cd test-app

yarn add react-photo-gallery@8.0.0

Add gallery to `pages/index.js`

import Gallery from 'react-photo-gallery'

const photos = [
  {
    src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
    width: 1,
    height: 1
  },
  {
    src: "https://source.unsplash.com/qDkso9nvCg0/600x799",
    width: 3,
    height: 4
  }
]

const Home = () => <Gallery photos={photos} />

export default Home

Run the app

yarn dev

You'll get the warning in terminal on every refresh / HMR

neptunian commented 5 years ago

I have to use useLayoutEffect because the component needs to have "mounted" in order for it not to error because that code has to be in the browser to run without an error (I need some kind of container width to know how to resize the photos - to solve for height of row). If you can think of a better way to handle it, PRs or advice welcome. https://reactjs.org/docs/hooks-reference.html#uselayouteffect

BigSully commented 5 years ago

I think it's the problem of next or react instead of react-photo-gallery. You can move the component out of ssr to eliminate the warning for the moment.


//import PhotoGallery from "./gallery";  // ssr, which contributes to the warning
const PhotoGallery = dynamic(() => import('./gallery'), {  // no ssr
  ssr: false
})```

damon-kreft commented 4 years ago

Yep, same issue. Images not rendering sever side and @adam187 PR seems the way to go

francisrod01 commented 4 years ago

For those using hooks, there's a quick solution provided by @gaearon https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

kimmo-koo commented 3 years ago