isSsr_hook.ts

isSsr_hook.ts

// best practice arch
// app
//  L hooks
//      L useIsSsr.hook.ts

// useIsSsr.hook.ts
import { useState, useEffect } from "react";

const useIsSsr = () => {
  const [isSsr, setIsSsr] = useState(true);

  useEffect(() => {
    setIsSsr(false);
  }, []);

  return isSsr;
}

// my-component.component.ts
const MyComponent = () => {
  const isSsr = useIsSsr();
  const screenWidth = isSsr ? null : window.innerWidth;
  
  const width = screenWidth
    ? screenWidth
    : '...';

  return (
    <div>
      <p>{Your Width Is:}</p>
      <p>{width}</p>
    </div>
  );
}