• Stars
    star
    153
  • Rank 243,368 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 1 year ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vite RSC experiments

Vite RSC Experiments

Discussions

Goals

Short term

Wire together all the pieces needed to build a proper app using vite and RSC. Implement the necessary router, bundler plugins and build setup to get an SSR'ed React app with RSC.

Long term

Eventually we want extract the pieces into modular parts for other vite based frameworks to use. So, implement a Vite plugin for React Server Components.

Ideally hitting the sweet spot between full-fledged yet flexible. Can we design the plugin so that it works with Wakuwork, Astro, Rakkas, and vite-plugin-ssr?

Things to do

Rendering

  • Server side rendering for RSC (pass initial RSC stream to React's streaming server renderer)
  • Hydrate server rendered HTML stream with client side RSC stream
  • Inline Server components stream data to SSRed HTML stream and use that for hydration
  • Render full HTML page with React components

Routing

  • Client side navigation for path
  • Client side navigation for search params
  • Proper route matching with path params
  • Nested routing
    • Nested routing on the server (using children prop)
    • Nested navigation on the client, i.e, only request RSC for the nested route
  • Typed router (ala tanstack router)
  • File system routing

Mutations

  • Server functions, ala "use server"
  • Mutations via server functions
    • API: useMutation hook
      function Component({ action }) {
        let mutate = useMutation()
        function handleClick() {
          mutate(() => action())
        }
      }
  • Throw error to nearest ErrorBoundary
  • Forms
    • Form submission
    • Form redirects
    • Form validation
    • Form submission error handling

Head tags

  • Manage metadata/head tags

CSS/Styling

  • Inline CSS to avoid FOUC
    • Inline imported CSS files in RSC components
    • Inline imported CSS files in client components
    • Inline imported CSS Module files
    • Try to avoid having to send styles as hydration data
  • Build CSS manifest (importing CSS files)

Build

  • Build
  • Build-time routing (static RSC output)

How to run

Currently, the main attraction is the Contacts Demo. To run:

pnpm install # at root
cd examples/contacts
pnpm dev

Structure

  • app: User code

    • root.tsx: Root server component, declares routes and renders matched route
    • Other server/client components
  • modules: Framework modules

    • vite: Vite plugins for RSC and integrating Hattip
    • router: Main framework
      • server.ts: Server handler, /__rsc endpoint for RSC stream, and other endpoints are per user's routing
      • client.ts: Client side router, handles navigation and hydration

Prior Art

Existing implementations:

More Repositories

1

vavite

Develop server-side applications with Vite
TypeScript
469
star
2

detype

Remove the types, keep the formatting
TypeScript
80
star
3

vite-plugin-cjs-interop

Vite plugin to unwrap default imports from CJS dependencies during SSR
TypeScript
68
star
4

esbuild-plugin-polyfill-node

ESBuild plugin to polyfill Node.js built-ins geared towards edge environments.
TypeScript
53
star
5

smf

WIP: Vite metaframework walkthrough
TypeScript
28
star
6

php-tag

PHP-in-JS: a silly experiment
TypeScript
15
star
7

haydi

A wannabe Vite for Deno
TypeScript
15
star
8

en-vogue

Zero-runtime CSS-in-JS with static CSS extraction
TypeScript
14
star
9

vite-plugin-mdx

MDX plugin for Vite
TypeScript
13
star
10

eslint-import-resolver-exports

package.json#exports resolver for eslint-plugin-import
JavaScript
12
star
11

knave

Client-side navigation done right
TypeScript
11
star
12

create-vike

Generates Vike application boilerplate
TypeScript
9
star
13

sfotty-pie

A set of tools related to the 6502 microprocessor
TypeScript
8
star
14

h

A JSX-based toy framework for streaming SSR in 80 lines of code.
TypeScript
6
star
15

svelte-kit-node-loader

Node ESM loader with SvelteKit
TypeScript
2
star
16

rsc-things

Several components for testing React Server Components
TypeScript
2
star
17

cyco130

2
star
18

multipart-parser-benchmark

Simple benchmark for web stream multipart parsers
JavaScript
2
star
19

bare-routes

A bare-bones React client-side page router that delegates the actual routing and page loading to user code and only handles history manipulation
TypeScript
1
star
20

rakkas-mantine

TypeScript
1
star
21

vavite-vps-loader

Vite loader experiment with VPS
TypeScript
1
star
22

who-said-that

Adds a prefix that identifies the currently running npm script to every line of its output
TypeScript
1
star
23

rakkas-socket-io-hack

Hacky way to socket.io with Rakkas
TypeScript
1
star
24

vite-loader-poc

A proof-of-concept Node ESM loader using Vite
JavaScript
1
star