All Projects → Rohitkrops → Ssr

Rohitkrops / Ssr

React Server-Side Rendering Example

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ssr

ssr
React Server-Side Rendering Example
Stars: ✭ 265 (+17.26%)
Mutual labels:  ssr, rendering, react-redux
Advanced Redux
A messenger service built with Redux
Stars: ✭ 96 (-57.52%)
Mutual labels:  express, react-redux
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-61.95%)
Mutual labels:  express, ssr
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-48.23%)
Mutual labels:  express, ssr
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: ✭ 58 (-74.34%)
Mutual labels:  express, react-redux
Dva Starter
完美使用 dva react react-router,最好用的ssr脚手架,服务器渲染最佳实践
Stars: ✭ 60 (-73.45%)
Mutual labels:  ssr, react-redux
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-48.67%)
Mutual labels:  express, ssr
Essay
A blog system based on Nuxt.js
Stars: ✭ 913 (+303.98%)
Mutual labels:  express, ssr
Typescript Mern Starter
Build a real fullstack app (backend+website+mobile) in 100% Typescript
Stars: ✭ 154 (-31.86%)
Mutual labels:  express, react-redux
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (-30.97%)
Mutual labels:  express, react-redux
React Wp Rest
A boilerplate for pairing the WP Rest API with a server-rendered React app
Stars: ✭ 167 (-26.11%)
Mutual labels:  express, ssr
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-80.53%)
Mutual labels:  ssr, react-redux
Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-80.53%)
Mutual labels:  ssr, react-redux
Preact Cli Ssr
A quick demo for adding SSR to a Preact CLI app
Stars: ✭ 76 (-66.37%)
Mutual labels:  express, ssr
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-83.63%)
Mutual labels:  express, react-redux
Netlify Functions Express
How to use Netlify functions + express.js for serverside rendering on the JAMStack
Stars: ✭ 105 (-53.54%)
Mutual labels:  express, ssr
Crate
👕 👖 📦 A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
Stars: ✭ 2,281 (+909.29%)
Mutual labels:  express, ssr
Kite
🌴 Kite 前台页面是vue ssr服务端渲染、后台页面是react spa、服务层nodejs express、mysql编写的一套多权限文章、动态管理系统
Stars: ✭ 455 (+101.33%)
Mutual labels:  express, ssr
Angela
🙂angela (安其拉):react ssr router redux; react同构框架
Stars: ✭ 15 (-93.36%)
Mutual labels:  express, ssr
React Fondue
⚛ ReactFondue is minimal React boilerplate with support for code splitting, hot module reload and server side rendering.
Stars: ✭ 146 (-35.4%)
Mutual labels:  express, ssr

React Server-Side Rendering Example

Above is an example playground for you to play with React & Redux on Client and Server sides. Before jumping into it, make sure to read SSR tutorial on Freecodecamp (Outdated).

Here’s what we will build in this tutorial:

Clash of Clans app card

Development

  • Clone the repo:
$ git clone https://github.com/Rohitkrops/ssr.git
  • Go to the project directory and install dependencies:
$ cd ssr && yarn install

Launch the server:

$ yarn start

Now, the application is running at http://localhost:3000. The homepage is Sever Rendered and '/client' is client side rendered.

Note

This tutorial is to help you understand the concept behind server side rendering of a React application. Don't use this in Production.

For that use mature solutions, I would recommend Next.js

🥳

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].