Client-Side Rendering (CSR)

CSR is the abbreviation of Client-Side Render, which is the most common rendering method in modern front-end development. In this mode, the server is mainly responsible for providing static HTML files (which may contain some basic HTML structures and JavaScript scripts), while the actual page rendering work is completely done by the client’s browser. This means that the page content is dynamically generated on the user’s browser

Advantages of CSR:

  • Reduce Server Load: Client-side rendering moves a large portion of the rendering process from the server to the client browser. Since the server only needs to send minimal HTML and static assets, the processing overhead and server load are lower

  • Better interactivity: With CSR, user interactions such as button clicks, form submissions, or navigation between pages can be handled in the browser without reloading the entire page. CSR applications can respond to user actions and input in real time. This enables near-instant updates, richer user experiences, and makes websites more responsive

Disadvantages of CSR:

  • Long first page loading time: Client-side rendering causes longer page loading time than server-side rendering because the browser must download and execute all necessary JavaScript files before rendering the entire web page, especially for complex single-page applications (SPA)

  • Bad for SEO: Search engine crawlers may not be able to parse page content dynamically generated by JavaScript well, resulting in poor SEO results, although search engines such as Google and Bing have improved indexing of websites loaded with JavaScript. However, robots and crawlers still find it easier to index server-rendered websites than client-rendered websites.

Although CSR improves interactivity and user experience, such sites may not be as easily found in search results, which can negatively impact their visibility, organic traffic, and conversion rates. Therefore, using client-side rendering is a wrong approach for sites that require high search engine visibility, such as landing pages, blogs, media publications, and e-commerce platforms.

How to implement client-side rendering (CSR)

It is very simple to implement CSR. We use lazy Suspense of react to implement it.

my-nodestack-app
├── src
│   ├── pages
│   │   │── csr      
│   │   │   │── index.js 
│   │   │   │── compontents    
│   │   │   |   │── home.js 
│   │   │   |   │── about.js 
│   ├── routes
│   │   │── csr      
│   │   │   │── index.js 
├── ndsk.config.js
└── package.json

import {useEffect,useState,lazy,Suspense} from "react";
const routes = {
  '/csr/about':lazy(() => import('./compontents/about.js')),
  '/csr/home':lazy(() => import('./compontents/home.js')),
}
export default (props)=>{  
    const [isClient,setIsClient] = useState(null);
    useEffect(()=>{
      setIsClient(true)
    },[])

    const App = ()=>{
      const [Page,setPage] = useState(routes['/csr/home'])
      const Link = (props)=>{
        return <a href={props.path} onClick={(e)=>{
          e.preventDefault();
          setPage(routes[props.path])
        }}>{props.children}</a>
      }
      return (
        <div>
          <div><Link path="/csr/home">to home</Link></div>
          <div><Link path="/csr/about">to about</Link></div>
          <Suspense> <Page/></Suspense>
        </div>
      )
    }
    return (
      <html lang="en">
        <head>
          <title>{props.title}</title> 
        </head>
        <body> 
            {isClient ? <App/> : '<div>loading</div>'}
        </body>
      </html>
    );
}

export default ()=>{
    return (
        <div>
            home
        </div>
    )
}

export default ()=>{
    return (
        <div>
            about
        </div>
    )
}

export const path = '/csr/{p*}' 
export default (request)=>{
    return { title:'CSR',}
}
  • Visit http://localhost:3000/csr
  • We configure path = '/csr/{p*} in the routes/csr/index.js file, indicating that all routes starting with /csr point to the pages/csr/index.js file, and pass a title to the front end, then use react lazy to dynamically load components, and use e.preventDefault() to prevent clicking the a tag to refresh the page

Next step

Static site generation