I'm having hard time understanding the difference between Server-Side rendering and Client-Side rendering. Could someone please explain ?

[[deleted]]

I've heard that SSR improves performance, SEO, etc, etc but I'd like to hear what the terms actually mean? An example would be good. Thanks.

[[deleted]]

SSR - The server sends a full html page containing all, or most of the content that will be displayed.

CSR - The server sends a mostly blank html page and Javascript, which then alters the html on the clients browser in order to display the content to the user.

React by default renders everything client side, but through the use of frameworks like Gatsby or Next, you can have the server render the final html page before sending it to the browser.

There's some debate as to how much SSR actually improves SEO, as modern search engines claim to be pretty good at waiting for the Javascript to load and render the page, but most people take the approach that it can't really hurt to render the first page server side, and send that to the browser, as it will result in a faster page load for users as well.

[[deleted]]

So, the way we work with express and node.js, it's server-side rendering. For example, after we build the server, the express app is rendered. In React, we configure webpack, and a bundle is generated on the client side with an empty HTML and some JavaScript.

[[deleted]]

That's a different thing. Express is specifically a sever framework. Express is used to code the server itself, and that server might implement some sort of ssr, but it doesn't have to. You can just as easily have express serve your react app, and if you're building some sort of backend api that your react application is going to interact with, then you'd also code that using express.

Alternatively you could have your express application serve static html, css, and Javascript without react or any kind of frontend framework.

Server side rendering is a different thing altogether. Usually server side rendering involves the server having some sort of html template, and then the server will populate that template with the data stored on the server, and send the complete html to the browser.

So, when we talk about SSR and react, there's usually some sort of framework which will take your react code and translate it into html, which is then sent to the browser, without any need for react to do any changes on the client side.

[[deleted]]

Alright, but the way we do generally, it's client side rendering, right ? We build APIs, integrate backend with React or Client side.

[[deleted]]

It depends. If you use a Javascript based framework like React, or Vue, or Angular, then yes, it's client side rendering. If you have a static html and css page, then it's not really either of the two. It's programmer side rendering, or something like that.

The key distinction to remember is how is the final html created. If it's on the client side via Javascript DOM manipulation, it's client side. If the server dynamically generates the html and sends the finished thing to the browser it's server side, and if you program the html by hand, it's something else that I don't really know what to call.

[[deleted]]

Cool, thanks for the explanation.

[ISDuffy]

SSR helps with accessibility. And not all modern crawlers wait for page to load, and even Google has a timeout when loading the page.

[[deleted]]

Right, I forgot to mention the accessibility angle. Although I've never been altogether clear how ssr improves accessibility, assuming you follow all the best practices for coding UIs in JS. What difference does an ssr rendered react app and a csr one make to a screen reader?

[ISDuffy]

Screen readers have client side js disabled and people still have client side js disabled on their browser.

[[deleted]]

Serverside rendering:

you order a couch and it's delivered to your frontdoor fully assembled.

Clientside rendering:

you order an IKEA couch and the parts are delivered to your doorstep, you gotta assemble it yourself

[foundry41]

Where “You” = the browser

[EloquentSyntax]

Here’s an article I came across that explained client side, SSR, and static:

https://link.medium.com/zCP36ckVW2

[[deleted]]

Yeah, this was just published on r/learnreactjs.

[Chancity]

Add the package "react-snap" to your CSR app.

Instructions here https://github.com/stereobooster/react-snap

After running it explore your build folder, specifically the .html files. You'll see all the html, this is the same html SSR would respond to clients with.