How to useprocess.browser in Next.js
Next.js provides a built-in variable process.browser which is true on the client side and false on the server side.
Example:
//index.js
import Head from "next/head";
export default function Home() {
if (process.browser) {
console.log("Variant 2: Application is on client side");
} else {
console.log("Variant 2: Application is on server side");
}
return (
<>
<Head>
<title>Create Next App</title>
</Head>
<main>
<h2>This is a demo page</h2>
</main>
</>
);
}
Output:
Detecting server vs client in NextJS application
Next.js, a popular React framework, helps you to build powerful web applications with ease. However, managing server-side and client-side execution can pose unique challenges. In this article, we’ll explore techniques for detecting server or client execution in Next.js applications.
Table of Content
- What is Server Side Rendering?
- What is Client Side Rendering?
- Detecting server vs client-side rendering
- 1: Using typeof window
- 2: Using process.browser
- 3: Using a custom flag
- 4: Using req object in getServerSideProps
- 5: Using window object inside useEffect