This repository contains the code for implementing Server-Side Rendering (SSR) and UI Streaming from scratch in React using Suspense, as detailed in the article published on Medium.
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.
- 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.
- Node.js
- npm or yarn
- Clone the repository :
$ git clone https://github.com/sina-byn/react-streaming.git- Navigate to the project directory :
$ cd react-streaming- Install dependencies :
$ npm install
# or
$ yarn install- Start the server:
$ npm run start- Open your browser and navigate to http://localhost:3000.
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.
Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.
This project is licensed under the MIT License.