React useSSR Hook

Introdução

Neste laboratório, exploraremos o uso do hook useSSR em React. Este hook nos permite verificar se nosso código está sendo executado no navegador ou no servidor, e fornece informações adicionais sobre o ambiente, como a disponibilidade de workers, event listeners e viewport. Ao final deste laboratório, você terá uma melhor compreensão de como escrever código React otimizado para diferentes ambientes.

React useSSR Hook

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Para verificar se o código está sendo executado em um navegador ou servidor, crie um hook personalizado que usa typeof, Window, Window.document e Document.createElement() para determinar se o DOM está disponível. Use o hook useState() para definir a variável de estado inBrowser e o hook useEffect() para atualizá-la e limpar no final. Use o hook useMemo() para memorizar os valores de retorno do hook personalizado.

Aqui está o código:

const isDOMavailable = !!(
  typeof window !== "undefined" &&
  window.document &&
  window.document.createElement
);

const useSSR = () => {
  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);

  React.useEffect(() => {
    setInBrowser(isDOMavailable);
    return () => {
      setInBrowser(false);
    };
  }, []);

  const useSSRObject = React.useMemo(
    () => ({
      isBrowser: inBrowser,
      isServer: !inBrowser,
      canUseWorkers: typeof Worker !== "undefined",
      canUseEventListeners: inBrowser && !!window.addEventListener,
      canUseViewport: inBrowser && !!window.screen
    }),
    [inBrowser]
  );

  return useSSRObject;
};

const SSRChecker = (props) => {
  const { isBrowser, isServer } = useSSR();

  return <p>{isBrowser ? "Running on browser" : "Running on server"}</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<SSRChecker />);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório React useSSR Hook. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.