Library to effortlessly convert your non-SSR React applications into responsive, SSR React applications. https://ss-react.github.io/react-prime/
Please Note
This library has been developed to work with Create-React-Apps exclusively.
Dependencies that rely on the window object before checking if it exists will not be compatable with React-Prime.
Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Installing
Local installation
npm install --save react-prime
Then, install the required dependencies
npm i inquirer @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/register react-frontload react-helmet react-loadable md5-file
Server-Side Rendering
The process of SSR with our library has been automated through a CLI.
- Add a script into your package.json and run the script.
scripts: {
"prime": "prime"
}
npm run prime
Deployment
Upon answering all of the CLI questions, a primessr directory is created which contains five files:
- index.js
- server.js
- primeServer.js
- primeCompare.html
and either
- returnHTML.js
or, if you have Redux
- returnReduxHTML.js
Then, an SSR version of your application is automatically hosted on http://localhost:8080.
Performance Testing
To view side by side comparison of CSR and SSR renders:
prime:compare
While Prime compare server is running, execute the following to generate Lighthouse reports:
prime:CSRreport
prime:SSRreport
Authors
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
- Thank you to Patrick Cason for his excellent article on SSR.
- Huge shoutout to Clariz Mariano for the logo. You can find more of her work on dribbble!