Context
I want to build a ReactJS Website that will be hosted on different device categories. Sometimes, it will be hosted on a server, but other times it will be hosted on a Raspberry Pi (or even Zero?).
What was my idea?
The main idea is to take load off the client as much as possible, but I don't want to make the UX worse by server rendering the whole application.
There are parts of the application that will have to respond fast and change fast. These parts (where the user will be working most of the time) should be rendered client-side.
Other parts, like the navigation menu or the header of the page will almost never change. I would like to take off load from the Raspberry and render these parts server-side.
The problem
Probably, I could just deliver those static parts of the page inside the index.html page that looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
The problem with this approach is that I want to use one single UI Library that renders my navigation and my content (for example tables). In this case, the library would be Material-UI. If I understand correctly, it requires ReactJS to use that library and I don't have ReactJS in the index.html, but only inside the root element.
Question
Is it possible to render part of the React application on the server and let the rest render client-side? Are there any security risks (for example JS injections)?
Disclaimer
I have almost no experience with server-side rendering react applications. Maybe this is already done widely. I could only find informations about rendering client-side or server-side exclusively, but not about mixing both.
