verekia / js-stack-from-scratch

🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
MIT License
20.05k stars 1.99k forks source link

[Clarification] Doubling of code of requests? #224

Open jerrygreen opened 7 years ago

jerrygreen commented 7 years ago

Type of issue: Clarification of architecture

I really like the idea of js-stack-from-scratch and js-stack-boilerplate but I found 1 interesting thing. Why server rendered data differs from client rendered data?

Let's say we want to get list of posts. How do I make requests to API server in old SPA world without SSR? (simplified version)

  1. I have an dispatch in componentDidMount, which triggers an actions, which triggers a saga, which makes an API fetch call, so I get the posts. Yahoo!

How do I make requests to API server in new SPA world with SSR?

  1. I have an dispatch in componentDidMount, which triggers an actions, which triggers a saga, which makes an API fetch call, so I get the posts. Yahoo!
  2. I found such thing as a controller.js which makes the same API call correspond to the component to preload global state. Huh?

Do I misunderstand somewhat? Why do we do it twice? Did you think about it?

jerrygreen commented 7 years ago

To clarify my exact case:

I know that you're suggesting to use mongodb and nodejs to handle business logic. I don't want to get rid of my API server (which is not nodejs, it's RoR api). I want to narrow the responsibility of nodejs server just to SSR feature. No business logic there.

UPD. I'm currently thinking that controller.js is unnecessary. I can get rid of it. Server does call render, right? So it runs componentDidMount too. So it should dispatch action from there, trigger saga and make API call as the client does. I'm only not sure how does nodejs server know when all the components are completely rendered and no more renders needed? I mean, the saga does all things (i.e. api calls) asynchronously.

Hope to have a good conversation and a bit of clarification if you have time!

jerrygreen commented 7 years ago

Looks like componentDidMount not calling by server. Ok. But wait... How do I get data on client? I mean, if I preload data with server as you suggest (with controller.js or something like this, not with shared code...) then on client I will rewrite this data with pretty the same data by doing the same request again, isn't it? I think I don't get concept of it.

I have almost no hope you will answer. But the hope never die! :)