https://github.com/cereallarceny/cra-ssr

[DEPRECATED] Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk
https://github.com/cereallarceny/cra-ssr

Last synced: 13 days ago
JSON representation

[DEPRECATED] Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk

• Host: GitHub
• URL: https://github.com/cereallarceny/cra-ssr
• Owner: cereallarceny
• Created: 2017-10-12T18:13:59.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T17:53:40.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T22:09:47.088Z (28 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.03 MB
• Stars: 484
• Watchers: 27
• Forks: 120
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-universal-rendering - cra-ssr - SSR app boilerplate based on CRA (without having ejected). (Tools / React)

README

        
# Deprecation notice

It didn't take long.  The web has grown a lot since I first developed this project.  Lo and behold [Jared Palmer](https://github.com/jaredpalmer) has beat me to it.  I'm going to shut down shop at cra-ssr in favor of a better solution: [Razzle](https://github.com/jaredpalmer/razzle).

**To anyone looking to use cra-ssr, I highly suggest you check out Razzle instead.**

---

# Server-side rendering in Create React App

_SSR with all the goodies, without ejecting._

- [Link to Tutorial](https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e)

- [Deployed application](https://cra-ssr.herokuapp.com/)

- [Github Gist for server folder](https://gist.github.com/cereallarceny/ee1b86227aabaf4a4b2a3144b84dfaa2)

## Goals

- **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

- Server-side **cookie support**

## Examples

- Multiple pages (`/`, `/about`)

- **User-specific pages with preloaded data** set on a timeout to fake an API call (`/profile/1`, `/profile/2`)

- **Basic authentication with cookie storage** (`/login`, `/dashboard`, `/logout`)

- Not found (404, etc.) page

## Installation

1.  Install dependencies via `yarn install`

2.  To run locally, use `yarn start`

3.  To run under SSR mode, use `yarn build && yarn serve`

## Why?

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_

## Contribute

Do what you normally do - fork and PR.