What is Client Side Rendering?
Client-side rendering (CSR) is a method in which all webpage files, such as HTML, CSS, and JavaScript, are delivered to the client’s browser. The browser then processes these files locally to render the content on the webpage, requesting resources from the server as needed. This approach shifts the computational load to the client’s browser, potentially resulting in slower initial page loading times but allowing for more dynamic and interactive user experiences.
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