How to usea custom flag in Next.js
You can set a custom flag during the server-side render and check for its presence on the client side.
Example:
//index.js
import Head from "next/head";
import { useEffect, useState } from "react";
export default function Home() {
const [isServer, setIsServer] = useState(true);
useEffect(() => {
setIsServer(false);
}, []);
if (isServer) {
console.log("Custom Flag: Application is on server side");
} else {
console.log("Custom Flag: Application is on client 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