All Projects → alexnm → React Ssr

alexnm / React Ssr

Licence: mit
A baseline for server side rendering for your React application

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Ssr

angular-ssr
Angular 14 Example SSR (Server side rendering)
Stars: ✭ 92 (-83.39%)
Mutual labels:  server-side-rendering, example-project
angular-httpclient
Angular 15 Example HttpClient
Stars: ✭ 21 (-96.21%)
Mutual labels:  server-side-rendering, example-project
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-78.88%)
Mutual labels:  example-project, server-side-rendering
angular-pwa
Angular 13 Example Progressive Web App (PWA)
Stars: ✭ 45 (-91.88%)
Mutual labels:  server-side-rendering, example-project
Cable ready
CableReady completes the ActionCable story and expands the utility of web sockets in your Rails app
Stars: ✭ 489 (-11.73%)
Mutual labels:  server-side-rendering
Server Side Rendering
Server side rendering JavaScript in a PHP application
Stars: ✭ 432 (-22.02%)
Mutual labels:  server-side-rendering
After.js
Next.js-like framework for server-rendered React apps built with React Router
Stars: ✭ 4,051 (+631.23%)
Mutual labels:  server-side-rendering
Vidom
Library to build UI based on virtual DOM
Stars: ✭ 408 (-26.35%)
Mutual labels:  server-side-rendering
Saturn
Opinionated, web development framework for F# which implements the server-side, functional MVC pattern
Stars: ✭ 540 (-2.53%)
Mutual labels:  server-side-rendering
Korolev
Single Page Applications running on the server side.
Stars: ✭ 510 (-7.94%)
Mutual labels:  server-side-rendering
Matestack Ui Core
Matestack enables you to create sophisticated, reactive UIs in pure Ruby, without touching JavaScript and HTML. You end up writing 50% less code while increasing productivity, maintainability and developer happiness.
Stars: ✭ 469 (-15.34%)
Mutual labels:  server-side-rendering
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (-20.04%)
Mutual labels:  server-side-rendering
Universal React Apollo Registration
Open Source Universal User Registration System – NodeJS React Apollo GraphQL JWT MongoDB
Stars: ✭ 495 (-10.65%)
Mutual labels:  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 (-24.37%)
Mutual labels:  server-side-rendering
Universal Starter
Angular 9 Universal repo with many features
Stars: ✭ 518 (-6.5%)
Mutual labels:  server-side-rendering
React Ssr Prepass
A custom partial React SSR renderer for prefetching and suspense
Stars: ✭ 411 (-25.81%)
Mutual labels:  server-side-rendering
Example Ios Apps
 A curated list of Open Source example iOS apps developed in Swift. An amazing list for people who are beginners and learning ios development and for ios developers who need any example app or feature.
Stars: ✭ 461 (-16.79%)
Mutual labels:  example-project
Laravel Server Side Rendering
Server side rendering JavaScript in your Laravel application
Stars: ✭ 506 (-8.66%)
Mutual labels:  server-side-rendering
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+688.09%)
Mutual labels:  server-side-rendering
Easywebpack
A Simple, Powerful Webpack Front-End Development Solution
Stars: ✭ 452 (-18.41%)
Mutual labels:  server-side-rendering

React Server Side Rendering

A baseline for server side rendering for your React application. This repo has a couple of tags that follow building full support for rendering React applications on the server.

Getting started

Clone the repo with git clone https://github.com/alexnm/react-ssr

Install dependencies with npm i

Run dev mode with npm run dev

Now open the browser and navigate to http://localhost:2048 and you get your server rendered React app. You can inspect the page source and see that the html coming from your local server has all the nodes defined in the React app.

A few notes

  • I tried to limit the complexity of the entire app to focus on the server side rendering part. Don't take the same shortcuts in your production app!
  • We're starting the server with the index.js file which is in the root folder. This file loads the babel-register and sets up the babel plugins needed to run JSX and ESModules on the server.
  • The node server needs to handle the static files from the dist folder.
  • The entry point of the bundle is called client.js because it's the only part of our application that is not used for the server render.

Navigating through the different steps

Understand the different parts of server side rendering by going through each tag:

In depth explanations

Read more about implementing server side rendering step by step. Feedback is more than welcome!

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