https://github.com/sina-byn/react-streaming
a simple implementation of server-side rendering and UI streaming in React from scratch with express.js as the server framework
https://github.com/sina-byn/react-streaming
expressjs javascript react react-suspense server-side-rendering ssr
Last synced: 18 days ago
JSON representation
a simple implementation of server-side rendering and UI streaming in React from scratch with express.js as the server framework
- Host: GitHub
- URL: https://github.com/sina-byn/react-streaming
- Owner: sina-byn
- License: mit
- Created: 2024-06-07T07:45:34.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-07T19:28:30.000Z (11 months ago)
- Last Synced: 2025-04-05T15:35:29.569Z (25 days ago)
- Topics: expressjs, javascript, react, react-suspense, server-side-rendering, ssr
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React SSR and UI Streaming with Suspense
This repository contains the code for [implementing Server-Side Rendering (SSR) and UI Streaming from scratch in React using Suspense](https://medium.com/@sina-byn/implement-server-side-rendering-and-ui-component-rendering-from-scratch-in-react-986aa06df563), as detailed in the article published on Medium.
### Overview
This project demonstrates how to build a React application with Server-Side Rendering (SSR) and UI Streaming capabilities using the latest features of React, including Suspense. The goal is to improve the performance and user experience of React applications by rendering on the server and progressively streaming the content to the client.
### Features
- Server-Side Rendering (SSR): Render React components on the server to improve initial load times and SEO.
- UI Streaming: Stream the rendered HTML to the client progressively, improving the time-to-interactive for the user.
- React Suspense: Utilize React's Suspense for data fetching to manage loading states and code splitting.
### Getting Started
#### Prerequisites
- Node.js
- npm or yarn
#### Installation
1. Clone the repository :
```bash
$ git clone https://github.com/sina-byn/react-streaming.git
```
2. Navigate to the project directory :
```bash
$ cd react-streaming
```
3. Install dependencies :
```bash
$ npm install
# or
$ yarn install
```
#### Running the Application
1. Start the server:
```bash
$ npm run start
```
2. Open your browser and navigate to [http://localhost:3000](http://localhost:3000).
### Learn More
For a detailed explanation and step-by-step guide, check out the accompanying article on Medium: [Implement Server-Side Rendering and UI Streaming from scratch in React using Suspense](https://medium.com/@sina-byn/implement-server-side-rendering-and-ui-component-rendering-from-scratch-in-react-986aa06df563).
### Contributing
Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.
### License
This project is licensed under the MIT License.