How to arrange SSR in React.js for individual components on a page?

Question

React

Hello!
I’m learning React, I decided to rewrite the product filter in an online store written in Laravel, abandoning jQuery, since the number of filters and values ​​​​is very large, the values ​​\u200b\u200bare loaded into the filter using search and after a dozen filterings, the page starts to frankly slow down, since a lot of things are redrawn during.

I connected React to the project, wrote two components (one for the filter, and the second for displaying filtered products in the list of products, respectively, two ReactDOM.render are called), I manage the whole thing with redux. Everything works great, the response on the page is instant, but the question becomes open - since this is an IM, it is important that the products in the categories are indexed.

I began to study the topic of SSR, found a couple of articles (using express), but they are based on the SPA example, which is not suitable, since an index file is taken there and the result of the application is substituted into it. In my case, React and SSR are only needed for two components on the category page, and the pages themselves are already rendered on the server (using the Blade template engine).

I started looking for information on how this can be implemented, but for some reason I can not find anything. Is no one using React the way I wanted to use it? Or are there any options to organize the rendering of these blocks on the server side? Only one option comes to my mind: display products on the page immediately in the template, and then when the page loads, React will fire and redraw this block with products when filtering. But I'm not sure if this is the right way to do it, because it turns out that I will have two product templates - one in the template on the server, and the second template in jsx.

Tell me how to implement this correctly, or share articles on this topic, thank you in advance.

Answer 1

I can’t tell you about individual SSR pages, but there are 2 main frameworks for creating SSR -
Next and Gatsby . The first one is more popular. Next is often used by big players like tiktok