The code for the client UI needs to be rendered from the server in order to perform SSR (Server-side rendering):
Webpack: for converting JSX/JS code into language that the browser can understand
Babel: Transforming and compiling code into one format, also reading extension files
Initialise the project: setup Webpack and Babel to read and write to the index file
Use Babel to compile code into the build file which is rendered on the server
Build out a simple component to view inside of the browser and ensure SSR is being used
Because ExpressJS already has the capability to serve static files, I can take advantage of this by restructuring the project setup and using Express to serve the "build" folder once in production.
The objectives are:
To detect whether or not SSR is implemented, check the file sent in the network tab and see if JSX is rendered inside of the root element, if this is the case, SSR has been implemented
Serve both the ExpressJS app and the ReactJS app concurrently on the same port.
Pros:
SSR results in faster page loads, better UX and gives more control over what data is being sent to the browser
Serving static files from the port cuts costs of various services (in place of this I'd use something like Netlify to host my React-App and another service for the Express server)
The code for the client UI needs to be rendered from the server in order to perform SSR (Server-side rendering):
Webpack: for converting JSX/JS code into language that the browser can understand Babel: Transforming and compiling code into one format, also reading extension files
~This also introduces the concept of hydration in React Apps: https://levelup.gitconnected.com/how-to-render-react-app-using-express-server-in-node-js-a428ec4dfe2b~
Because ExpressJS already has the capability to serve static files, I can take advantage of this by restructuring the project setup and using Express to serve the "build" folder once in production.
The objectives are:
Pros:
Cons: