All Projects → SaeedSheikhi → elegant-react-ssr

SaeedSheikhi / elegant-react-ssr

Licence: other
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA

Programming Languages

184084 projects - #8 most used programming language
56736 projects
75241 projects

Projects that are alternatives of or similar to elegant-react-ssr

React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (+206.25%)
Mutual labels:  create-react-app, ssr, server-side-rendering
React App
Create React App with server-side code support
Stars: ✭ 614 (+3737.5%)
Mutual labels:  create-react-app, ssr, server-side-rendering
Cra Universal
🌏 Create React App companion for universal app. No eject, auto SSR, zero config, full HMR, and more (inactive project)
Stars: ✭ 419 (+2518.75%)
Mutual labels:  create-react-app, ssr, server-side-rendering
React Antd Admin Template
Stars: ✭ 1,022 (+6287.5%)
Mutual labels:  react-router, create-react-app, redux-thunk
Loadable Components
The recommended Code Splitting library for React ✂️✨
Stars: ✭ 6,194 (+38612.5%)
Mutual labels:  react-router, ssr, server-side-rendering
Next.js-like framework for server-rendered React apps built with React Router
Stars: ✭ 4,051 (+25218.75%)
Mutual labels:  react-router, ssr, server-side-rendering
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+27187.5%)
Mutual labels:  create-react-app, ssr, server-side-rendering
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (+2668.75%)
Mutual labels:  react-router, ssr, server-side-rendering
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (+5431.25%)
Mutual labels:  react-router, create-react-app, redux-thunk
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (+437.5%)
Mutual labels:  react-router, ssr, server-side-rendering
Learning reactjs from the ground up (router, redux, thunk, hooks, context, portals, and functional components)
Stars: ✭ 15 (-6.25%)
Mutual labels:  react-router, redux-thunk
React template with a NodeJS backend
Stars: ✭ 18 (+12.5%)
Mutual labels:  react-router, css-in-js
DM Tools
An open-source Dungeons and Dragons DM helper desktop app built with React.js, Redux, SCSS
Stars: ✭ 41 (+156.25%)
Mutual labels:  react-router, create-react-app
Create React App with React Router 4 and MobX + Internationalization
Stars: ✭ 90 (+462.5%)
Mutual labels:  react-router, create-react-app
🔥 ⚛️ A React boilerplate for a universal web app with a highly scalable, offline-first foundation and our focus on performance and best practices.
Stars: ✭ 40 (+150%)
Mutual labels:  react-router, server-side-rendering
The "nearly invisible" way to server-render React applications
Stars: ✭ 1,914 (+11862.5%)
Mutual labels:  css-in-js, server-side-rendering
Easily extend the react-scripts to your own version of react-scripts
Stars: ✭ 64 (+300%)
Mutual labels:  create-react-app, server-side-rendering
A MERN stack e-commerce website.
Stars: ✭ 45 (+181.25%)
Mutual labels:  react-router, redux-thunk
🚀Fast, 💎Lightweight Angular alternative with the same modern API thats compile directly to WebComponents
Stars: ✭ 49 (+206.25%)
Mutual labels:  ssr, server-side-rendering
React Workshop
Stars: ✭ 13 (-18.75%)
Mutual labels:  react-router, create-react-app


Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA. this boilerplate is heavily inspired by this medium article, and using under the hood React-Frontload. reach out for docs.

Client render Server render

Server-side rendering in Create React App

SSR with all the goodies, without ejecting.


  • Zero modifications to your existing CRA application
  • Create React App without ejecting
  • React 16 (fiber, baby!)
  • React Router v4 (with Thunk)
  • Full SEO support via React Helmet
  • Preloaded page data via async/await and React Frontload
  • Code splitting via React Loadable

Getting Started

Clone the repo:

git clone
cd elegant-react-ssr

Install yarn:

npm install -g yarn

Install dependencies:


Set environment (vars):

cp .env.example .env.development
cp .env.example .env.production

Run application:

# Start on SSR mode on Unix machines
yarn build:unix && yarn serve:unix
# Start on SSR mode on Windows machines
yarn build:win && yarn serve:win

# Start on CSR mode
yarn start


Server-side rendering is a requirement for many modern web applications to appear correctly in search engines and social media parsers.

Question: Have you ever created a web application with multiple pages only to find out that your meta descriptions weren't page specific?
Answer: Server-side rendering

Question: Have you ever created a web application where users had individual profile pages that required pre-loading of metadata?
Answer: Server-side rendering

Question: Have you ever created a web application with a lot of content on your page that ends up taking a long time for your users to load in poor Internet conditions?
Answer: Server-side rendering


Do what you normally do - fork and PR.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].