What is Server Side Rendering?
Server-side rendering (SSR) is a technique used to deliver HTML content to a client’s browser by pre-rendering it on the server. This approach helps reduce the load on the client’s browser and improves page loading times, resulting in faster access to web pages. A quick way to verify if an application is using SSR is to disable JavaScript in the client’s browser. If the requested page still loads with content, it indicates that server-side rendering is being employed.
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