5. Search Engine Optimization(SEO) in React , CSR vs SSR

1. Code Splitting and Lazy Loading

   Modern web applications can become large and slow if all the JavaScript is loaded at once. To improve performance, code splitting and lazy loading are used. These techniques help load only the necessary code when required, reducing initial load time and improving user experience.

   Code splitting is a technique used to break a large JavaScript bundle into smaller chunks, which are loaded when needed rather than all at once.

   Lazy loading is a technique where components or resources (like images, videos, or scripts) are loaded only when they are needed rather than at the initial page load.

   • Code splitting ensures that the application is bundled into smaller chunks instead of one big file.

   • Lazy loading makes sure that these chunks are loaded only when needed, rather than at the initial page load.

2. How to implement Lazy Loading ?

   1. Lazy Loading Component in react.

   React’s lazy() function allows components to be loaded only when needed.

import React, { Suspense, lazy } from "react";

const Dashboard = lazy(() => import("./Dashboard"));
function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Suspense fallback={<h2>Loading Dashboard...</h2>}>
        <Dashboard />
      </Suspense>
    </div>
  );
}
export default App;

2. Lazy Loading Routes using React Router

import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

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

function App() {
  return (
    <Router>
      <Suspense fallback={<h2>Loading...</h2>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}
export default App;

This ensures that the Home and About components are loaded only when a user navigates to their respective routes.

Suspense provides a fallback UI (like Loading...) while the component loads.

3. Lazy loading images and assets

The loading="lazy" attribute ensures that the image loads only when it comes into the viewport

function LazyImage() {
  return <img src="large-image.jpg" alt="Large Image" loading="lazy" />;
}

3. Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

   Client Side Rendering: In CSR, the browser downloads an empty HTML file and executes JavaScript to render content dynamically.(We see that body tag inside index.html is empty in react apps)

   React apps using CRA (Create React App) use CSR.

   Advantages of CSR:
   ✔ Faster initial server response
   ✔ Great for interactive applications
   ✔ Efficient with CDN caching

   Disadvantages of CSR:
   ❌ Slower initial load time (JS execution required)
   ❌ Poor SEO (Search engines may not index content correctly)

   Server Side Rendering:

   • In SSR, the server renders the page HTML before sending it to the browser.

   • This improves SEO and page load speed.

   • We use NextJS for server side rendering

     Advantages of SSR:
     ✔ Improves SEO (Search engines can index fully rendered pages)
     ✔ Faster first load (No waiting for JS execution)

     Disadvantages of SSR:
     ❌ Higher server load
     ❌ Slower interactivity (Re-renders require full reloads)

     Why and How React Apps(or CSR) have Poor SEO ??

     → React application loads two files - index.html (empty file) and index.bundle.js.

     → index.html file execute index.bundle.js file

     → index.bundle.js render the content(like h1 tag images etc) on UI.

     → Now If we search anything on browser (let google) then the crawling bots( a software that browse the internet to collect info. from web pages) looking for the content of index.html file

     → But In the case of react, index.html file is empty so web crawlers not able to find info inside index.html file so these websites have Poor SEO ( Poor ranking in search engines)

     Request (Search anything)→ Server sends empty index.html → Browser loads index.bundle.js → React dynamically injects content.

     How NextJS(or SSR) solve this Problem ??

     →With SSR, the server sends a fully rendered HTML page to the browser (including headings, images, metadata, etc.).

     → When the crawler visits the page, it immediately sees actual content inside the index.html.

     →This allows search engines to index the page properly, improving SEO and ranking.

     Request → Server executes React components → Sends full HTML with content.

4. Search Engine Optimization (SEO)

   Search Engine Optimization (SEO) is the process of optimizing a website to improve its ranking on search engines like Google, Bing, and Yahoo.

   React applications, especially those built as Single Page Applications (SPAs), face unique SEO challenges because search engines rely on server-rendered HTML content, while React apps dynamically generate content using JavaScript.

   How to achieve SEO in react Apps.

   1. Server-Side Rendering (SSR) with Next.js: SSR renders React components on the server and sends pre-rendered HTML(server generates the full HTML content of the page before sending it to the browser.) to the browser, improving SEO.

   2. Meta Tag Managment: Search engines rely on meta tags for page indexing. We can use react-helmet or Next.js’s Head component.

Interviews questions

1. Diffrence Between CSR and SSR ?

   CSR: Rendering in the browser , Page load speed is slow , Poor SEO , More Intractive

   SSR: Rendering in the server , Page load speed is high , Good SEO , Less Interactive

2. Why does SSR improve SEO?

   SSR sends a fully-rendered HTML page, allowing search engines to index content properly.

Next Topic: Routings In React.js