React.js Serverside rendering and Event Handlers

by

This behaviour is because of what exactly server side rendering is.
Firstly you will have to run the exact same code both on client side and server side. This is what is called an isomorphic application. One that runs both on server and client.
So, on doing ReactDOM.renderToString(<Component>) only the HTML is rendered as a string. The render method of your component is evaluated and the HTML required for initial rendering is generated.
When the same code is run on client, react looks up the HTML rendered and attaches JS at required places. React is smart this way, it doesn’t re-render everything again at client side. Just evaluates the code and identifies where all to attach the code based on react-id each DOM element is given. (You’ll react-id if you inspect element any react app)

Now one might ask what is the benefit of rendering the same thing twice?
and the answer is perceived loading time by the user. And also some minimal viewing for users who disabled JS.

Client rendered application
This is how a solely client rendered application works. (client rendered React application too)

client rendered app

The User will only see content after all skeleton HTML, JS bundles(which are often pretty big), and data is fetched and evaluated. Which means the user will often have to stare at a spinner or loading screen for a while until everything loads.

Isomorphic application (runs both on client and server)
How an Isomorphic application works,
server rendered app
In this case the server generates the full HTML by evaluating your component. And the user will see content immediately as soon as the HTML is downloaded. Although the app will only function fully once the JS bundles are also downloaded and evaluated. So the JS has to run on both sides
Thus the user sees content much faster than before. Hence the huge decrease in perceived loading time.

More Related Contents:

  1. Why calling setState method doesn’t mutate the state immediately?
  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. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  12. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  13. How to make Puppeteer work with a ReactJS application on the client-side
  14. ‘react-scripts’ is not recognized as an internal or external command
  15. body data not sent in axios request
  16. useEffect does not listen for localStorage
  17. How do you import a javascript package from a cdn/script tag in React?
  18. Fetch image from API
  19. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  20. How do I add validation to the form in my React component?
  21. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  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. ReactJS server-side rendering vs client-side rendering
  28. How to deploy a React + NodeJS Express application to AWS?
  29. Access from origin ‘https://example.com’ has been blocked even though I’ve allowed https://example.com/
  30. Firebase-Admin, importing it to react application throws Module not found error

Leave a Comment