React with Server Side Rendering Stack

Question

In the last few years, I've been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x. Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.

The use case needed to be SEO friendly , so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It's not just dummy text.

Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.

I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That's why my first thought was React.

The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don't need and I do not want to add overhead to my application and I cannot customize it as I desire.

I continue researching and I found an express package called " express-react-views " that is a template engine for express but it does not allow to mount the React application at the client side. Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.

My doubts / concerns are the following:

• Is React the right tool / library for this use case?
• In case of not being, what do you recommend?
• Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?

I don't want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.

Answer 1

I have no clue of why your question was downvoted as it's a very pertinent and actual question.

The easisest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:

https://reactjs.org/docs/react-dom-server.html#reference

It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.

I hope this helps!