Server Side React

Say goodbye to SPAs for the best optimization and best security

How to Use

Server Side React

$ node-rails settings react

Old School Templating Built in React

Individual Assets

Each page is its own React application, the redux that is normally global across the client is stored on the server. All React components are the same. You can find the React page component file in the same directory as your ReactDOM file.

Building your React component is the same except the props for your page can be passed down from the server. This gives you the page source from your html in your jsx and allows you to restrict routes and views based on the data stored on the server.

Writing React Component

Global Components

Writing your React components are the same. For global reusable components they must be required for a directory outside of your pages directory. All assets just like your pub templates for styling pages are the same.

File Structure Example

/assets /jsx /components /REUSABLE_COMPONENT.jsx /pages /component.jsx

No React Router

There is no React Router because the server controls all the routing for the best security. Client side code no longer controls your server routes. This protects you against many different client side exposes and your server is in control of your server's security.

Client Side route pushing example

window.location.href = '/blogs';
React router uses the window.location and window.history objects to push the client to other routes. Use the window object to control your client.

View Route Security

Add middleware to your view routes for the security on your server.