How to mix SSR with CSR?

5
votes

I have a very little knowledge about SSR. Currently, I have two servers. I have built a CSR Single Page App using React on one server and backend on Nodejs + express on another server. My app has a login page.

  1. How can I move my existing Login component logic to SSR and after successfull login all other components must work from CSR. I don't know how to achieve this goal.
  2. Do I need to turn my CSR react app server into SSR by using something like Nextjs and the backend nodejs server should continue to operate like before? Or do I need to use SSR logic on my backend Nodejs server?
  3. Or do I need to migrate my whole CSR react app into SSR? Then do i still need backend nodejs server?

I might sound confusing asking this question. Please let me know if i need to explain it a bit further.

1
javascriptnode.jsreactjsserver-side-renderingnext.js
What's CSR in this context? – m90
Client Side Rendering – Jaz
@Jaz, have fixed your issue, bcoz i have also trying to convert my applications CSR to SSR, i have facing some issue of "reference error window is not defined". have any idea about my issue? – RGKrish183

1 Answers

3
votes

You will use just one NodeJS + Express server. You define some regular endpoint routes to provide things like login functionality, signup and so on. But also a "catch-all" route at the end where you will render your react app to a string via node and send it back to the browser as HTML.

Not too long ago I did a very basic SSR example using typescript and react. I hope this will be helpful!

https://github.com/akimthedream/server-side-rendered-typescript-react