DEV Community

Cover image for ReactJS Rendering Pattern ~Client-Side Rendering (CSR)~
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

ReactJS Rendering Pattern ~Client-Side Rendering (CSR)~

#programming #javascript #react #learning

In React client-side rendering(CSR), the browser downloads a minimal HTML page and the necessary JavaScript bundle from the server. The browser then executes the JavaScript to bundle the user interface and dynamically update the Document Object Model(DOM), making the page interactive.

How it works

  1. Initial Request: a user's browser sends a request to the server for a web page.

  2. Server Response: The server responds with a minimal HTML "shell" and links to the JavaScript files.

  3. JavaScript Download & Execution: The browser downloads, parses, and executes the JavaScript bundle.

  4. Rendering: The React code runs in the browser and constructs the UI within the HTML shell.

  5. Interactivity: Once rendered, the application becomes interactive. Subsequent navigations within the application are handled entirely on the client without requiring a full page refresh.

****Pros and Cons

・Pros

Fast Navigations: After the initial load, navigating between pages is typically faster as only data needs to be fetched, not new HTML.

Rich Interactivity: CSR is ideal for complex, dynamic applications with high user interaction.

Clear Separation: Allows for a clear separation between client-side (React app) and server-side (API) code.

・Cons

Slower Initial Load: The user might see a blank page or loading spinner until all JavaScript is downloaded and executed.

SEO Challenges: Search engines like Google can now crawl CSR apps, but the initial empty HTML can negatively impact SEO scores and metadata (like link previews).

JavaScript Dependency: The page is empty if JavaScript is disabled in the browser.

Top comments (0)