use-ssr

import React from 'react'; import useSSR from 'use-ssr'; function App() { const { isBrowser, isServer, isNative, device } = useSSR(); // This console log will show different results depending on the environment. // In a browser: IS BROWSER: 👍, IS SERVER: 👎, IS NATIVE: 👎, DEVICE: browser // On a server: IS BROWSER: 👎, IS SERVER: 👍, IS NATIVE: 👎, DEVICE: server console.log('IS BROWSER: ', isBrowser ? '👍' : '👎'); console.log('IS SERVER: ', isServer ? '👍' : '👎'); console.log('IS NATIVE: ', isNative ? '👍' : '👎'); console.log('DEVICE: ', device); return ( <div> <h1>Environment Detection with useSSR</h1> <p>Am I in a browser? {isBrowser ? 'Yes 👍' : 'No 👎'}</p> <p>Am I on the server? {isServer ? 'Yes 👍' : 'No 👎'}</p> <p>Am I in React Native? {isNative ? 'Yes 👍' : 'No 👎'}</p> <p>Current device type: {device}</p> {isBrowser && <p>This content only renders in the browser.</p>} {isServer && <p>This content only renders on the server.</p>} </div> ); } // To run this in a simple SSR setup (e.g., with Next.js or a custom server rendering), // you would integrate this App component into your server-side render function. // For a client-side only app, you'd render it directly to the DOM. // Example for a basic client-side render: // import ReactDOM from 'react-dom/client'; // const root = ReactDOM.createRoot(document.getElementById('root')); // root.render(<App />); export default App;