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

Question

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

Answer 1

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

Answer 2

It depends.

if SEO is irrelevant — e.g. an app that lives behind a login screen — then CSR is fine and you just need something like ReactJS

If you need a good SEO:

a) If you can predict the content to generate it in build time (eg: a blog), then you need SSG (static content created on build time) and should choose something like Gatsby or NextJS

b) If you can’t predict the content/possible request (eg: a search page), the server will need to generate the pages on demand, so you need dynamic SSR (content created on user access time) and should choose something like NextJS.

Note: NextJS allows you to selectively mix in the same project the 3 main rendering forms. For that reason is the best option if you need SEO.