best Architecture for big React app

(Saeedjalali) #1

Hi, everybody. I want to create app that have this usecases:

  1. Load dynamically style from some theme.
  2. Disable or enable some component programmatically .
  3. End user can define some theme with html, css, … and install on the app.
  4. Server side rendering for improve SEO.
  5. Communication with rest api.

After some research for choosing best solution for this problem we find out for state management we need some library or framework like Redux or mobx. For dynamically styling we decide to use fella. We want create app that optimize for search engine (google). What is the best Architecture for solve this problem.

Thanks for your attentions.

(Ajay Patel) #2

Hello @saeedjalali1 Please have a look at below boilerplate we have created for ReactJS,
In which we have covered features like SSR(Server Side Rendering), Code Splitting, PWA(Prgoressive Web Application) with SEO in mind.

Please contact us if face any issue while implementing this bolierplate.

(Jakob Lind) #3

When writing a large application, it’s good to make a high-level plan like you just have made. But all decisions are maybe not needed to make upfront, but there should be some room for the architecture to evolve.

I would suggest start working on the hardest problems first, to be able to resolve the problems early by working with them. In your list, I note SSR as one large task to resolve. You have many options, such as using a framework such as next, or coding it yourself from scratch. I recently wrote a case study of our SSR implementation which also is a big production app. You can read it here: Case study of SSR with React in a large e-commerce app

(Mikayel) #4

Try to use composite view pattern and split your code for each rout, it will make your code more flexible.