React Ssr Template
Simple template for a website with a brand new SSR streaming API from React 18
Overview
This is a React application template that uses Streaming Server Side Rendering (SSR) and React 18 with a new API. It is available on GitHub at https://github.com/reactwg/react-18/discussions. The template is a simple website and provides a development server, file watcher, TypeScript support, production build, testing capabilities, and various technologies such as Express.js, React, React-query, CSS-in-JS, and more. The template also includes a custom router for Redux integration.
Features
- Supports Streaming Server Side Rendering (SSR)
- Uses React 18 with a new API
- Development server with file watcher
- Production build command
- Testing command for eslint, prettier, tsc, and unit-tests
- Written in TypeScript
- Utilizes Express.js as a server framework
- Uses React's render to a stream for SSR
- Integrates React-query for working with external data
- Provides a custom CSS-in-JS implementation inspired by aphrodite
- Includes a custom router for Redux integration
- Uses webpack and esbuild to build the project
- Employs pino as a fast and lightweight logger
- Includes mocha, chai, sinon, and React testing library for testing
- Utilizes eslint for code mistake detection
- Implements prettier for code formatting
Summary
The React SSR template provides a basis for creating a website using server-side rendering and React 18 with a new API. It includes various features such as a development server, production build, testing capabilities, and integrated technologies like Express.js, React-query, and CSS-in-JS. The template also offers a custom router for Redux integration and uses webpack and esbuild for building the project. Additionally, it employs pino as a logger and includes eslint and prettier for code quality. Overall, the template offers a comprehensive starting point for a React SSR application.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.