ReactJS server-side rendering vs client-side rendering

by

For a given website / web-application, you can use react either client-side, server-side or both.

Client-Side

Over here, you are completely running ReactJS on the browser. This is the simplest setup and includes most examples (including the ones on http://reactjs.org). The initial HTML rendered by the server is a placeholder and the entire UI is rendered in the browser once all your scripts load.

Server-Side

Think of ReactJS as a server-side templating engine here (like jade, handlebars, etc…). The HTML rendered by the server contains the UI as it should be and you do not wait for any scripts to load. Your page can be indexed by a search engine (if one does not execute any javascript).

Since the UI is rendered on the server, none of your event handlers would work and there’s no interactivity (you have a static page).

Both

Here, the initial render is on the server. Hence, the HTML received by the browser has the UI as it should be. Once the scripts are loaded, the virtual DOM is re-rendered once again to set up your components’ event handlers.

Over here, you need to make sure that you re-render the exact same virtual DOM (root ReactJS component) with the same props that you used to render on the server. Otherwise, ReactJS will complain that the server-side and client-side virtual DOMs don’t match.

Since ReactJS diffs the virtual DOMs between re-renders, the real DOM is not mutated. Only the event handlers are bound to the real DOM elements.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. “SyntaxError: Unexpected token < in JSON at position 0"
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. Is it safe to store a JWT in localStorage with ReactJS?
  5. React – changing an uncontrolled input
  6. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  7. How to display binary data as image in React?
  8. How do you send images to node js with Axios?
  9. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  10. How to add custom html attributes in JSX
  11. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  12. How to make Puppeteer work with a ReactJS application on the client-side
  13. ‘react-scripts’ is not recognized as an internal or external command
  14. body data not sent in axios request
  15. useEffect does not listen for localStorage
  16. How do you import a javascript package from a cdn/script tag in React?
  17. Fetch image from API
  18. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  19. How do I add validation to the form in my React component?
  20. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  21. React.js Serverside rendering and Event Handlers
  22. Matched leaf route at location “/” does not have an element
  23. unable to deploy next js to azure
  24. Increase JavaScript Heap size in create-react-app project
  25. Webpack 5 – Uncaught ReferenceError: process is not defined
  26. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  27. How to deploy a React + NodeJS Express application to AWS?
  28. Access from origin ‘https://example.com’ has been blocked even though I’ve allowed https://example.com/
  29. Firebase-Admin, importing it to react application throws Module not found error
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment