ReactJS server-side rendering and client-side rendering

Question

I was just starting to learn ReactJS and found that it gives you two ways to render pages: server and client. But I can’t figure out how to use it together. Are these two separate ways to create an application or share them?

If we can use it together, how to do it - do we need to duplicate the same elements on the server side and on the client side? Or can we just create the static parts of our application on the server and the dynamic parts on the client side without any connection to the server side that has already been previously mapped?

Answer 1

For this website / web application, you can use the reaction on the client side, on the server side, or both.

Client

This is where you fully launch ReactJS in the browser. This is the easiest setup and includes most of the examples (including at http://reactjs.org ). The HTML source code displayed by the server is a placeholder, and the entire user interface is displayed in the browser after loading all of your scripts.

Server

Think of ReactJS as a server template engine (e.g. jade, rudder, etc.). The HTML displayed by the server contains a user interface, as it should be, and you do not expect scripts to load. Your page can be indexed by a search engine (if no javascript is running).

Since the user interface is displayed on the server, none of your event handlers will work, and there is no interactivity (you have a static page).

Both

Here the initial render is on the server. Consequently, the HTML received by the browser has a user interface, as it should be. After loading the scripts, the virtual DOM is re-rendered to configure the event handlers of your components.

Here you need to make sure that you re-render the same virtual DOM (root component of ReactJS) with the same props that you used to render on the server. Otherwise, ReactJS will complain that the virtual DOMs on the server side and on the client side do not match.

Because ReactJS distinguishes between virtual DOMs between re-renderings, the real DOM does not mutate. Only event handlers are associated with real DOM elements.

Answer 2

Image Source: Walmart Labs Engineering Blog

NB: SSR (server-side rendering), CSR (client-side rendering).

The main difference is that with the SSR, the server response for the client browser includes the HTML page of the page that will be displayed. It is also important to note that while using SSR the page is getting faster. The page will not be ready for user interaction until the JS files are loaded and the browser runs React.

One drawback is that the TTFB SSR (time to the first byte) may be slightly longer. This is understandable because the server takes some time to create an HTML document, which in turn increases the size of the server’s response.

Answer 3

I really wondered about the same study quite a lot, and although the answer you are looking for was given in the comments, but I believe that it should be more visible, so I write this post (which I will update when I can come with the best way, as I find the solution architecturally at least questionable).

You will need to write your components with both methods , as a result, basically, to install if everywhere, to determine if you are on the client or server, and then execute either a DB request (or whatever suits the server) or REST call (on the client). Then you have to write the endpoints that generate your data and expose it to the client, and there you go.

Again, we are pleased to hear of a cleaner solution.

Answer 4

Are these 2 separate ways to create an application or can they be used together?

They can be used together.

If we can use this together, how to do it - do we need to duplicate the same elements on the server side and on the client side? Or can we just build the static parts of our application on the server, and the dynamic parts on the client side, without connecting to the server side that has already been pre-processed?

It is better to have the same layout that will be displayed in order to avoid rearrangement and repainting operations, less flickering / blinking, your page will be smoother. However, this is not a limitation. You could very well cache the html SSR (which the Electrode does to reduce response time) / send a static html that overwrites CSR (client-side rendering).

If you are just starting out with SSRs, I would recommend starting out simple, SSRs can get very complicated very quickly. Creating html on the server means losing access to such objects as a window, a document (you have them on the client), losing the ability to include asynchronous operations (out of the box) and, as a rule, a lot of code changes to ensure compatibility of your code with SSR (so as you have to use webpack to package your bundle.js). Things like CSS import require vs import to suddenly start biting (this is not the case in a React app by default without a web package).

The general scheme of the SSR is as follows. Express server serving requests:

 const app = Express(); const port = 8092; // This is fired every time the server side receives a request app.use(handleRender); function handleRender(req, res) { const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl; console.log('fullUrl: ', fullUrl); console.log('req.url: ', req.url); // Create a new Redux store instance const store = createStore(reducerFn); const urlToRender = req.url; // Render the component to a string const html = renderToString( <Provider store={store}> <StaticRouter location={urlToRender} context={{}}> {routes} </StaticRouter> </Provider> ); const helmet = Helmet.renderStatic(); // Grab the initial state from our Redux store const preloadedState = store.getState(); // Send the rendered page back to the client res.send(renderFullPage(helmet, html, preloadedState)); } 

My suggestion to people starting with SSR would be to provide static HTML. You can get static html by running the CSR SPA application:

 document.getElementById('root').innerHTML 

Do not forget, the only reasons for using SSR should be:

1. SEO
2. Faster loads (I would discount it)

Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

Answer 5

Server-side rendering is the way you render a page natively on the server and how a fully rendered page is sent back to the client.

You will receive more information at this link. Click here