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

  •        55

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.

https://github.com/jaredpalmer/after.js#readme
https://github.com/jaredpalmer/after.js

Tags
Implementation
License
Platform

   




Related Projects

universal-router - A simple middleware-style router for isomorphic JavaScript web apps


A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).Play with an example on JSFiddle, CodePen, JS Bin in your browser or try RunKit node.js playground.

react-dashboard - React Dashboard - isomorphic web dashboard template (React


built with React, Bootstrap, React Router (with Server Side Rendering!), Redux and GraphQL based on React Starter Kit and latest industry best practices.Demo. Use following credentials: user/password.

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


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-webpack-server-side-example - Example of an react application with webpack including server-side rendering


Example of an react application with webpack including server-side rendering.This is not for the normal user. This example is meant as inspiration to develop an framework that can do server-side rendering of react with webpack. You shouldn't use the code, only the idea.



rapscallion - Asynchronous React VirtualDOM renderer for SSR.


This function returns a Renderer, an interface for rendering your VirtualDOM element. Methods are enumerated below.This function evaluates the React VirtualDOM Element originally provided to the renderer, and returns a Promise that resolves to the component's evaluated HTML string.

react-apollo - :recycle: React higher-order component for Apollo Client


React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to server side render.React Apollo unlike many other tools in the React ecosystem requires no complex build setup to get up and running. As long as you have a GraphQL server you can get started building out your application with React immediately. React Apollo works out of the box with both create-react-app and React Native with a single install and with no extra hassle configuring Babel or other JavaScript tools.

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


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.

prep - Pre-renders your web app (React, Vue, Angular,


Pre-renders your web app into static HTML based on your specified routes enabling SEO for single page applications.NOTE: prep is now based on Chromeless. We'll shortly release an updated version.

razzle - ✨ Create server-rendered universal JavaScript applications with no configuration


Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR into a single dependency--giving you the awesome developer experience of create-react-app, but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly......whatever comes next.Below is a list of commands you will probably find useful.

react-snap - 👻 Zero-configuration framework-agnostic static prerendering for SPAs


Pre-renders web app into static HTML. Uses headless chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance. Zero configuration is the main feature. You do not need to worry how does it work or how to configure it. But if you are curious here are details.

mongoui - MongoDB admin UI server written in Node.js 🎮


MongoUI is an open-source web and desktop app which allows to administer local and remote MongoDB instances via GUI. No need to type commands in a terminal anymore. Convenient interface will allow to create, update, remove and filter/search documents. You can switch between collections or even databases with just a single click.Currently a standalone tool (run as an app locally or on your server); desktop app later. This is a brand new v2 of MongoUI. Old version use DerbyJS, then new version uses Webpack, React, React Router, React Bootstrap and of course Express and Node.

react-starter-kit - React Starter Kit — isomorphic web app boilerplate (Node


React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps


CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

universal-redux-template - A clean, extensible react + redux boilerplate with universal/isomorphic rendering, testing and more


To bootstrap a React app development environment is not an easy task, there are so many libraries to setup, including webpack, babel, testing stuff and others. I'd like this boilerplate to be a ready-to-use one with the essential tools and the simplest logic that just work to build a universal rendering React + Redux app. That's why there is no fancy stuff in this app, since it's a basis of your killer app rather than a showcase one.

react-snapshot - A zero-configuration static pre-renderer for React apps


Server-side rendering is a big feature of React, but for most apps it can be more trouble than its worth. Personally, I think the sweet spot is taking static site snapshots of all your publicly-accessible pages & leaving anything requiring authentication as a normal, JS-driven Single Page App. This is a project to do that. Automatically, without any configuration, just smart defaults. Retrospective progressive enhancement.

ReactJS.NET - A .NET library for JSX compilation and server-side rendering of React components


ReactJS.NET is a library that makes it easier to use Babel along with Facebook's React and JSX from C#. Its features include On-the-fly JSX to JavaScript compilation, JSX to JavaScript compilation via popular minification / combination libraries, Server-side component rendering to make your initial render super-fast,

python-react - Server-side rendering of React components


For client-side integrations, refer to the docs. python-react provides an interface to a render server which is capable of rendering React components with data from your python process.

react-router-mega-demo - WIP Move Along


Eventually this will be a mega demo, but right now its just a playground for server-side rendering with react-router.