Introduction to React: Understanding the Basics-part.9
Server Rendering In the browser, rendering refers to how the browser displays the webpage using HTML, CSS, and JavaScript. But in the server, rendering has a different meaning. What Does Rendering Mean on the Server? When we talk about server rendering, we're talking about how the server prepares and processes the data before sending it to the browser.The server has three main ways to do this: Server-Side Rendering (SSR) – The server processes the data before sending it to the browser. Client-Side Rendering (CSR) – The server sends raw data to the browser, and the browser processes it on its own. An isomorphic app (also called a universal app) is a web application that can run both on the server and the client. In simple terms: The first page is rendered on the server (like SSR) → This makes the page load fast and improves SEO. Then, React takes over in the browser (like CSR) → This makes the app interactive without needing full page reloads(So, an isomorphic app combines SSR and CSR to get the best of both worlds). By default, React uses Client-Side Rendering (CSR); To control how the server sends data, you need Next.js (or another framework like Remix). React alone cannot do this because it's just a front-end library. If you're only using React, the server decides how to send data, and you have to work with what it gives you.
Server Rendering
In the browser, rendering refers to how the browser displays the webpage using HTML, CSS, and JavaScript. But in the server, rendering has a different meaning.
What Does Rendering Mean on the Server?
When we talk about server rendering, we're talking about how the server prepares and processes the data before sending it to the browser.The server has three main ways to do this:
- Server-Side Rendering (SSR) – The server processes the data before sending it to the browser.
- Client-Side Rendering (CSR) – The server sends raw data to the browser, and the browser processes it on its own.
- An isomorphic app (also called a universal app) is a web application that can run both on the server and the client. In simple terms: The first page is rendered on the server (like SSR) → This makes the page load fast and improves SEO. Then, React takes over in the browser (like CSR) → This makes the app interactive without needing full page reloads(So, an isomorphic app combines SSR and CSR to get the best of both worlds).
By default, React uses Client-Side Rendering (CSR);
To control how the server sends data, you need Next.js (or another framework like Remix). React alone cannot do this because it's just a front-end library.
If you're only using React, the server decides how to send data, and you have to work with what it gives you.
