CODEWITHSUNDEEP
javascripthtmlreactjsserver-side-rendering
Code Eagle
Code Eagle

Reputation: 1222

What does "rendering" mean in the context of server side rendering?

I know that rendering is the process in which the browser use HTML, CSS, Js code to show something on the screen, something visible to the user

But in server side rendering context, i feel that this is different, as i understand, in SSR, rendering means just creating a full HTML document that is sent to the client browser with js bundle which the browser use to show something visible to the user

Now is just generating a HTML document in the server is considered a form of rendering?? or something is not accurate here since it doesn't render anything actually??

Upvotes: 2

Views: 329

Answers (2)

Amila Senadheera
Amila Senadheera

Reputation: 13245

In React, if you create your app using create-react-app then after building the project it will have the index.html file and js attached to it. index.html is empty only the <div id="root"></div> is present.

When you serve this build folder from a server, the server just sends the index.html file as it is and the browser will attach everything starting from <div id="root"></div> when the attached js loads in the browser. This is client-side rendering.

In the context of React server-side rendering is your index.html should have rendered more content inside the index.html file before sent to the browser. By simply setting up a Node server you can do a ReactDOM.renderToString(App) to render the current page as a string and attached to index.html like <div id="root">{ReactDOM.renderToString(App)}</div>. This is server-side rendering. When this received by the browser(client) it attaches all of the rest (event listers.. etc).

When you have set up this is properly your website is isomorphic (behaves same in the client or the server)

Upvotes: 2

AKX
AKX

Reputation: 169051

Now is just generating a HTML document in the server is considered a form of rendering?

Yes.

Even if you just have a text template where you replace placeholders, e.g.

const response = `<html><title>${title}</title><body>${message}</body></html>`;

that could be considered rendering (since it turns the template into the final document to be transmitted).

Upvotes: 4

Related Questions