reactjsserver-side-renderingclient-side-rendering

CSR vs SSR vs Pre-render, which one should I choose?


Currently, my project has two parts, one is before login, and one is after login. 

What I want to achieve is, before login needs to be fast and SEO friendly, should I choose pre-render or SSR?

And after login, we can choose CSR (so the client is able to wait for the page to load).

Alternatively, can I do two CSRs, one for before login (fast load), and once client logged in, by JWT token, redirect to the after login CSR page? 

Thanks


Solution

  • For pages that need to be crawled, most probably CSR is not an option. The question then becomes whether you choose to pre-render or SSR. The answer to that is that it depends.

    Is the SEO content static, or does it depends on other some backend API response at a given time?

    If it's static, pre-render should be enough for you. But if it depends on other APIs, the content could change during runtime, and you would have to do true SSR to accommodate that. SSR is more resource intensive on the server though.

    As for the after login part, because it probably shouldn't be crawled by bots anyway, it is okay to do CSR for all the logged in pages. CSR alone doesn't mean you will have a significantly faster initial load though, there is a lot of factor to consider such as the HTML document size, network trip latency, the response time of the other services your own service is depending on, etc. BUT, along with using a service worker and using the app-shell model, CSR should almost always be faster compared to SSR. I would recommend looking into that to improve CSR speed. Link