isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

•    Javascript

---

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

react flux alt iso isomorphic spa ssr koa webpack jsx es6 babel postcss precss eslint react-router react-transform-hmr react-transform hot-loader async server generator es7 i18n intl

react-router-server - Server Side Rendering library for React Router v4.

•    Javascript

---

Server Side Rendering library for React Router v4. If anyone is interested in taking over this project please let me know.

webpack2 react-router code-splitting server-side-rendering ssr react reactjs react-component webpack server

After.js - Next.js-like framework for server-rendered React apps built with React Router 4

•    Javascript

---

Next.js is awesome. However, its routing system isn't for me. IMHO React Router 4 is a better foundation upon which such a framework should be built. Routes are just components and don't / should not have anything to do with folder structure. Static route configs are fine.

react server-side-rendering ssr webpack react-router

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

•    TypeScript

---

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

react webpack starter-kit postcss ssr reactjs apollo apollo-client graphql webpack4 styled-components typescript hot-reload helmet sass less gzip brotli server-side-rendering universal

react-server-routing-example - An example using universal client/server routing and data in React with AWS DynamoDB

•    Javascript

---

A simple (no compile) example of how to do universal server/browser rendering, routing and data fetching with React and AWS DynamoDB for fast page loads, and search-engine-friendly progressively-enhanced pages.Also known as isomorphic, this approach shares as much browser and server code as possible and allows single-page apps to also render on the server. All React components, as well as router.js and db.js are shared (using browserify) and data fetching needs are declared statically on each component.

react reactjs server server-side routing data

rendora - dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites

•    Go

---

Rendora can be seen as a reverse HTTP proxy server sitting between your backend server (e.g. Node.js/Express.js, Python/Django, etc...) and potentially your frontend proxy server (e.g. nginx, traefik, apache, etc...) or even directly to the outside world that does actually nothing but transporting requests and responses as they are except when it detects whitelisted requests according to the config. In that case, Rendora instructs a headless Chrome instance to request and render the corresponding page and then return the server-side rendered page back to the client (i.e. the frontend proxy server or the outside world). This simple functionality makes Rendora a powerful dynamic renderer without actually changing anything in both frontend and backend code. Dynamic rendering means that the server provides server-side rendered HTML to web crawlers such as GoogleBot and BingBot and at the same time provides the typical initial HTML to normal users in order to be rendered at the client side. Dynamic rendering is meant to improve SEO for websites written in modern javascript frameworks like React, Vue, Angular, etc...

ssr react vue angular reactjs vuejs chrome-headless chrome-devtools seo seo-optimization server-side-rendering dynamic-rendering spa crawler puppeteer

next-routes - Universal dynamic routes for Next.js

•    Javascript

---

This file is used both on the server and the client.

nextjs react universal routes router ssr node routing server-rendering next next.js route

Next.js - Framework for server-rendered or statically-exported React apps

•    Javascript

---

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

react server-rendering universal node components browser nextjs server-side-javascript ssg static-site-generator vercel

react-engine - a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views

•    Javascript

---

Pass in a JavaScript object as options to the react-engine's server engine create method. The options object should contain the mandatory routes property with the route definition.routesFilePath: <String> - path for the file that contains the react router routes. react-engine uses this behind the scenes to reload the routes file in cases where express's app property view cache is false, this way you don't need to restart the server every time a change is made in the view files or routes file.

react render render-engine react-router view-engine express jsx

loadable-components - React code splitting made easy ✂️✨

•    Javascript

---

React code splitting made easy. Reduce your bundle size without stress ✂️✨. Webpack allows modern code splitting via the dynamic import syntax. Loadable Components makes it possible to use that awesome feature with React. It is compatible with react-router and server side rendering. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.

react ssr webpack code-splitting react-router server-side-rendering dynamic-import react-loadable react-async-component react-async-components

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

•    Javascript

---

Redux bindings for React Router. React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

redux react-router react router

reactGo - Your One-Stop solution for a full-stack universal Redux App!

•    Javascript

---

Redux Predictive state containers. Server-side rendering with React Router 3.x. Having server-side rendering allows you to pre-render the initial state of your components when a user (or search engine crawler) requests a page.

full-stack redux react react-router universal webpack

react-native-redux-router - React Native Router using Redux architecture

•    Javascript

---

I've decided to stop supporting this component in favor to new release react-native-router-flux (https://github.com/aksonov/react-native-router-flux). The new version doesn't depend from concrete Flux/Redux implementation and allow you to build nested navigators easily. Also it allows to intercept route 'actions' from your store(s).

flux redux navigation react-components react-native react-native-router router react-native-router-flux

react-isomorphic-video-game-search - An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API

•    Javascript

---

An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API. An excuse to share my research and get feedback as I prepare to launch a large React-powered app.

react reflux isomorphic progressive-web-app universal universal-react-tutorial flux express react-router-component demo video games superagent

react-router-component - Declarative router component for React.

•    Javascript

---

React router component allows you to define routes in your React application in a declarative manner, directly as a part of your component hierarchy. Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users.

react routing router react-component history pushstate

found - Extensible route-based routing for React applications

•    Javascript

---

Extensible route-based routing for React applications. Found is a router for React applications with a focus on power and extensibility. Found uses static route configurations. This enables efficient code splitting and data fetching with nested routes. Found also offers extensive control over indicating those loading states, even for routes with code bundles that have not yet been downloaded.

router react redux routes routing

ssr-sample - A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App

•    TypeScript

---

This project introduces how to implement SSR, SPA, and PWA. This project shows several implementations like below.

react graphql babel typescript spa webpack pwa apollo styled-components redux-saga ssr server-side-rendering loadable-components

react-server-example - A simple example of how to do server-side rendering with React (no compilation needed)

•    Javascript

---

A simple (no compile) example of how to do server-side rendering with the React library so that component code can be shared between server and browser, as well as getting fast initial page loads and search-engine-friendly pages.A more complex example with shared routing and data fetching can be found at react-server-routing-example.

react reactjs server server-side

react-app - Create React apps with server-side rendering and no build configuration

•    Javascript

---

Then open http://localhost:3000/ to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.

react reactjs server-side-rendering ssr webpack babel isomorphic single-page-app boilerplate template

example-react-router-server-rendering-lazy-routes

•    Javascript

---

React Router has two great features that seem like they might not work well together: server side rendering and code splitting. This minimal demo shows how to get the benefits of server rendering and partial app loading with lazy routes and webpack's code splitting.