Компонент, предотвращающий ошибки гидратации, то есть разницу между серверным и первым клиентским рендером, путём рендера своего содержимого только на стороне клиента. Помимо этого можно явно задать содержимое серверного и первого клиентского рендера.
Важно: не злоупотребляйте этим компонентом - он предназначен только для случаев, когда ошибок гидратации избежать невозможно. Старайтесь всегда решать проблемы гидратации без обходных путей.
Оберните содержимое, которое необходимо отрендерить только на клиенте, в компонент ClientOnly. Это содержимое отрендерится только на клиенте, после первого вызова useEffect.
Вы можете передать проп fallback, который отрендерится на сервере и во время первого рендера на клиенте. Затем он заменится на содержимое children. Проп fallback полезен для предотвращения скачков в лэйауте и минимализации разницы между первым и вторым рендером на клиенте.
По умолчанию равен null, следовательно на сервере ничего не отрендерится.
Здесь переменная address не доступна на сервере, но определена на 1м клиентском рендере. Без ClientOnly текст кнопки и наличие iconAfter у компонента Button будут отличаться и возникнет ошибка гидратации. Мы передаём проп fallback, который отрендерит запасную кнопку на сервере и при первом рендере на клиенте, а затем будет рендерится содержимое ClientOnly.
react, хук useIsSsr
Вы можете узнать, как работает хук useIsSsr.