Home > front end >  SSR vs CSR explanation
SSR vs CSR explanation

Time:01-19

I've been working as a full stack web developer for over a year now. Nextjs/golang is our stack. Today I realized that I have no idea whether we use CSR or SSR. I think we use CSR but I'm not sure. I've gone down rabbitholes on this topic like 100 times but its never stuck.

First question: When they say server side, do they mean on the backend? i.e. golang? or does that mean on the nextjs server? Whenever someone says server I think backend but I don't think this is correct.

Second question: How does client side rendering work? Like I know the server sends javascript to the client then the client uses the javascript to build the page. But all of this javascript must make a bunch of requests to the server to grab data and html right? Like how would the javascript build the page otherwise? Is this why react/nextjs is written in jsx? So the server can send all the JSX which is actually just javascript to the client then the client can build the html?

Third Question: If CSR has the client build the page, how would this ever work? Like what about all of the data that needs to be pulled from our database for specific users / etc etc. That can't be done directly from the frontend.

I tried reading tons of articles online! Hasn't clicked yet

CodePudding user response:

First question: When people say "server side", they usually mean on the backend, which is typically where a language like Go (golang) would be running. The backend is responsible for handling server-side logic and serving data to the frontend (client side) via an API.

Second question: Client-side rendering (CSR) is a way of building web pages where the majority of the logic runs on the client's browser, rather than on the server. This means that the server sends JavaScript code to the client, which is then executed by the browser to build and render the page.

In CSR, the JavaScript code makes requests to the server to fetch the data and HTML it needs to build the page. This is why libraries like React and Next.js are often used for CSR, as they allow developers to build web pages using a component-based architecture and JSX (JavaScript syntax extension), which makes it easy to build reusable UI components that can be rendered on the client side.

Server-side rendering (SSR) is an alternative to CSR, where the server generates the HTML for the page and sends it to the client, rather than sending JavaScript code that the client will use to generate the HTML.

In SSR, the server renders the page with the data and HTML and sends it to the client. This can be faster and can improve SEO but it's more complex to implement and need more computational power

Hope that helps!

CodePudding user response:

You said the essential thing yourself: in client-side rendering, "the server sends javascript to the client, then the client uses the javascript to build the page." Hold on to that one point – everything else is secondary. The client "renders."

Now that "client-side" rendering capabilities have become so powerful – and, so varied – it has generally become favored. If you "tell the client what to do and then let him do it," you are more likely to get a consistently favorable outcome for most clients. Yes, the client will issue perhaps-many AJAX requests in carrying out your instructions. That is irrelevant.

  • Related