What is Client Side Rendering & Server Side Rendering in Next.js?
Next.js has emerged as a popular framework for building modern web applications with React. Its flexibility and powerful features make it a go to choice for developers. One of the key aspects that set Next.js apart is its ability to handle both client side rendering and server side rendering seamlessly. These techniques, when implemented with Next.js, offer powerful solutions for creating fast, interactive and SEO friendly web applications that deliver exceptional user experience.
In this blog, we will explore the concepts of Client Side Rendering and Server Side Rendering in Next.js, their benefits, and how they impact the performance and user experience of your web applications. By understanding the intricacies of Client Side Rendering and Server Side Rendering, developers can make informed decisions to create web applications that not only deliver exceptional performance, but also have a robust codebase that can stand the test of time.
Client Side Rendering(CSR)
Client Side Rendering (CSR) refers to the process of rendering a web page on the client-side, i.e in the user’s browser, using JavaScript. When a user navigates to a page that uses CSR, the server sends back an HTML file with an empty body and a JavaScript bundle. This bundle contains the logic to make the page interactive. The JavaScript bundle runs in the user’s browser and fetches data from an API or other data sources before rendering the page.
Imagine you have a puzzle in front of you. To solve it, you need to put all the pieces together. CSR is a way of putting the pieces together. Here, the browser takes the responsibility of putting the pieces together by executing a specific set of instructions (JavaScript code).
In CSR, the initial page load is slow as the browser needs to wait for the JavaScript to download, execute and fetch data before rendering the final content. Due to this, there will be a visible delay if the whole page is rendered using CSR. On the other hand, after the first load, CSR offers faster subsequent page navigations as the client side code can be cached and reused.
Advantages-
- CSR reduces the load on the server and distributes the rendering process to the browser. Once the initial load is complete, subsequent updates can happen quickly without requiring a full page reload.
- CSR allows dynamic and interactive content. JavaScript running on the browser allows for real time updates and interactions without communicating with the server for every action.
- By leveraging CSR, websites can optimize resource utilization as only the necessary data is fetched from the server, reducing the amount of data that is transferred over the network.
When to Use?
Client Side Rendering is usually used when you want to build a web application that requires real time updates and interactivity.
One possible application is a messaging application where users can chat with each other in real time. When a user sends a message, the application can update the chat interface instantly without the need to reload the entire page.
Another example is an E-Commerce website where users can filter and sort products based on different criteria. With CSR, the user can select various filers, such as price range or product category, and see the updates in real time without a page refresh.
Server Side Rendering (SSR)
Server Side Rendering (SSR) refers to an approach where the server generates the complete HTML content of a web page and sends it to a client’s browser for rendering. SSR enables the user to handle the initial rendering process. The server fetches the data, renders the HTML templates and sends a fully rendered HTML page to the client which can be displayed immediately.
If we consider the same puzzle scenario that we discussed earlier, in SSR it is like someone already solving the puzzle before they show it to you. Here, the server puts together all the puzzle pieces and gives the browser the entire result. The browser doesn’t have to do the work of figuring out where to fit each piece. The server does it for us!
One of the main benefits of server-side rendering is improved initial page load time and better perceived performance. Since the server sends a fully rendered HTML page, the client can display the content almost instantly, providing a faster initial rendering compared to client-side rendering. This can result in better user experience, especially for users with slower internet connections or less powerful devices.
Advantages -
- SSR provides a faster initial page load because the server sends a fully rendered HTML page to the browser. This means the user can see the complete content more quickly without waiting for JavaScript files to load and execute.
- SSR can enhance SEO because search engines can easily crawl and index the static HTML content. When search engines can understand and index the content of a web page effectively, it increases the chances of the website appearing in search engine results, leading to better visibility and organic traffic.
- SSR enables graceful degradation for users who have JavaScript disabled or are using browsers that do not support JavaScript.
When to Use?
Server Side Rendering is commonly used in scenarios where fast page loads, SEO optimization an accessibility are required.
One common example is news portals and blogs. News portals and blogs often employ SSR to deliver content quickly and optimize search engine visibility. By rendering the articles and blog posts on the server, the complete content is readily available to users, allowing for faster page loads and better search engine indexing.
Another example is websites that handle bookings and reservations, such as hotels, restaurants, or event ticketing platforms, often use SSR to provide timely and accurate information to users. By rendering the booking availability, pricing, and reservation details on the server, the website can display up-to-date information without requiring the user to wait for client-side rendering.
Author : Abhishek Chadha (LinkedIn)
