What is Client-Side Rendering (CSR)?

Client-Side Rendering (CSR) is a technique where the browser takes responsibility for rendering the web pages. In CSR, the server sends a minimal HTML document, and all the heavy lifting of rendering the content is pushed to JavaScript running in the browser. This is a departure from traditional server-side rendering (SSR), where the server generates and sends fully-formed HTML pages to the client.

The primary advantage of CSR is interactivity. When a user navigates a CSR application, the experience often feels quicker and smoother, as only the data required for the specific view is fetched from the server, eliminating the need for full-page reloads.

Example of CSR

Imagine you are building a simple web application for a restaurant. When a user first visits the homepage, the server returns a minimal HTML document, and all the necessary JavaScript is loaded to render the full view. When the user clicks on the "Menu" link, the JavaScript fetches the menu data from an API and updates the page without needing to reload the entire webpage.

Here's a simple outline of what happens in a CSR application:

1. Initial Load: The user goes to your website, and the server sends an initial HTML and JavaScript bundle.
2. Data Fetching: As the user interacts with the site, JavaScript requests the necessary data (for example, menu items) from the server.
3. Rendering Without Reload: The JavaScript dynamically updates the content on the page, creating a seamless experience for the user.

The Role of Code Splitting in CSR

Code splitting is a technique that allows developers to split their code into smaller bundles that can be loaded on demand. This aligns perfectly with CSR, as it enhances performance by reducing the initial loading time of the application.

Why is Code Splitting Important?

When a user first loads a web application, ideally, you want to send them only the code they need to render the current view. If the entire application code is loaded upfront, it can lead to long load times and a lagging user experience. By implementing code splitting, you can ensure that each bundle is only loaded when it’s needed, which leads to faster interactions and a more efficient use of bandwidth.

How to Implement Code Splitting in a React Application

Let’s see how we can implement code splitting in a React application. React provides a straightforward way to achieve this using the React.lazy() and Suspense components.

Step by Step Implementation

1. Install React: Make sure you have React set up in your environment. If you haven't done this, you can create a new React application using Create React App.

npx create-react-app my-app
cd my-app

2. Create Components: Create a few components that you want to split out. For instance, let’s say we have a Home, About, and Contact component.

// Home.jsx
import React from 'react';

const Home = () => <h2>Home Page</h2>;
export default Home;

// About.jsx
import React from 'react';

const About = () => <h2>About Page</h2>;
export default About;

// Contact.jsx
import React from 'react';

const Contact = () => <h2>Contact Page</h2>;
export default Contact;

3. Implement Code Splitting: Now we can use React.lazy to dynamically import these components only when they are required.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const App = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>

    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Suspense>
  </Router>
);

export default App;

Explanation of the Code

• Lazy Import: We use lazy(() => import('./Component')) to tell React to load the component only when it’s required for rendering. This prevents unnecessary loading of code when users first visit your site.
• Suspense: Suspense is a wrapping component that allows you to provide a fallback UI (like a loading spinner) while your lazy-loaded components are being fetched.

By using CSR and code splitting together, you can create a responsive web experience that effectively balances performance and usability, keeping load times low and interactions snappy.