I hope you all are keeping safe during these uncertain times.
I have two questions.
I am creating a simple react-js page with 4 components. Can someone please guide me how the caching works in Headless mode ? As per the sitecore guidelines output caching saves the JSON that is returned by the Layout Service for each component. Does the guideline means caching will be handled by both layoutService and viewEngine?
Do I need to have Separate RedisCache server for headless mode architecture? I
Sitecore JSS is using Sitecore MVC pipelines behind the scenes. So caching works the same way as in Sitecore MVC - the output of the rendering (in JSS case it is JSON) is cached in Sitecore's HTML cache (which can be configured per rendering/component). LayoutService indeed returns cached JSON per component.
Question on whether it is worth implementing a distributed shared cache (such as Redis) is not really specific to JSS Headless mode as well. Would you implement a distributed shared cache if you would use Sitecore MVC? It highly depends on what you are doing in your renderings (accessing 3-rd party, doing extensive computations, etc.) or simply rendering output of a component datasource.
There is one more place where you can add extra caching in headless architecture - the client side. Potentially, you can have some logic in your Node instance to cache output of LayoutService calls.
In any case I would not implement too much premature caching upfront and start with simply configuring Sitecore HTML cache for your components. And later on if you have any performance issues - add extra caching layers if needed.