{"id":20826730,"url":"https://github.com/cedrickchee/react-18-beta","last_synced_at":"2025-05-07T20:38:44.257Z","repository":{"id":37247093,"uuid":"432623323","full_name":"cedrickchee/react-18-beta","owner":"cedrickchee","description":"React 18 Beta (Suspense, concurrent rendering, HTTP streaming, Server Components) + Next.js 12.0.4 demo \u0026 benchmark (performance \u0026 UX)","archived":false,"fork":false,"pushed_at":"2021-11-28T05:04:29.000Z","size":1211,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T20:38:39.198Z","etag":null,"topics":["nextjs-example","react-18","react-server-components","react-suspense","reactjs","server-side-rendering"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cedrickchee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-28T05:04:25.000Z","updated_at":"2025-02-21T15:54:26.000Z","dependencies_parsed_at":"2022-09-04T18:20:12.227Z","dependency_job_id":null,"html_url":"https://github.com/cedrickchee/react-18-beta","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-18-beta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-18-beta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-18-beta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedrickchee%2Freact-18-beta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cedrickchee","download_url":"https://codeload.github.com/cedrickchee/react-18-beta/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954125,"owners_count":21830892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs-example","react-18","react-server-components","react-suspense","reactjs","server-side-rendering"],"created_at":"2024-11-17T23:09:52.838Z","updated_at":"2025-05-07T20:38:44.237Z","avatar_url":"https://github.com/cedrickchee.png","language":"JavaScript","readme":"# Next.js _12.0.4_ and React 18 _Beta_ Demo \u0026 Benchmark\n\nNext.js 12 comes with [React 18 Beta support](https://nextjs.org/blog/next-12#preparing-for-react-18).\n\nReact 18 will add features like Suspense, automatic batching of updates, APIs\nlike `startTransition`, and a new streaming API for server rendering with\nsupport for `React.lazy`.\n\n_This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)._\n\n_This project referenced the [Next.js 12.0.1 **React 18 Alpha**\nDemo](https://github.com/cedrickchee/next-rsc-demo/) (released on Oct 27)._\n\n[**React 18 usage in Next.js**](https://nextjs.org/docs/advanced-features/react-18)\n\nI'm making these features available to try today in Next.js 12. This project\nhave the beta version of React installed:\n\n```sh\n$ npm install next@latest react@beta react-dom@beta\n```\n\nI have enabled these advanced features (Alpha quality):\n\n- **Server-Side Streaming**: Concurrent features in React 18 include built-in\n  support for server-side Suspense and SSR streaming support. This allows you to\n  server-render pages using HTTP streaming. This is an experimental feature in\n  Next.js 12, but once enabled, SSR will use the same strict runtime as\n  Middleware. Enabled using the experimental flag `concurrentFeatures: true` in\n  `next.config.js`. (See\n  [docs](https://nextjs.org/docs/advanced-features/react-18#enable-ssr-streaming-alpha)\n  for more details)\n\n- **React Server Components**: React Server Components allow us to render\n  everything, including the components themselves, on the server. This is\n  fundamentally different from server-side rendering where you're pre-generating\n  HTML on the server. With Server Components, there's zero client-side\n  JavaScript needed, making page rendering faster. This improves the user\n  experience of your application, pairing the best parts of server-rendering\n  with client-side interactivity. Enabled using the experimental flag\n  `serverComponents: true`. (See\n  [docs](https://nextjs.org/docs/advanced-features/react-18#react-server-components)\n  for more details)\n\nThis is the demo of Hacker News built with Next.js and React Server Components.\n\n**Try the demo: https://next-news-rsc.vercel.sh**\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Compile\n\n```sh\n$ npm run build\n\n\u003e build\n\u003e next build\n\nwarn  - You have enabled experimental feature(s).\nwarn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.\n\ninfo  - Checking validity of types  \n\ninfo  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules\ninfo  - Using the createRoot API for React\nwarn  - You are using an unsupported prerelease of 'react-dom' which may cause unexpected or broken application behavior. Continue at your own risk.\nwarn  - You are using the experimental Edge Runtime with `concurrentFeatures`.\nwarn  - You have experimental React Server Components enabled. Continue at your own risk.\ninfo  - Creating an optimized production build  \ninfo  - Compiled successfully\ninfo  - Collecting page data  \nPage                                       Size     First Load JS\n┌ ℇ /                                      1.97 kB        78.9 kB\n├   /_app                                  0 B            76.9 kB\n├ λ /404                                   384 B          77.3 kB\n├ λ /500                                   393 B          77.3 kB\n├ λ /api/hello                             0 B            76.9 kB\n├ ℇ /csr                                   3.36 kB        80.3 kB\n├ ℇ /rsc                                   2.31 kB        79.2 kB\n├ ℇ /slow                                  3.32 kB        80.2 kB\n└ ℇ /ssr                                   2.57 kB        79.5 kB\n+ First Load JS shared by all              76.9 kB\n  ├ chunks/framework-f4a6e75f8d3c80e4.js   44.9 kB\n  ├ chunks/main-5d1d5b9b49f6a7f4.js        30 kB\n  ├ chunks/pages/_app-7961434b35938642.js  587 B\n  └ chunks/webpack-f5637e6c804d3e68.js     1.42 kB\n\nℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)\nλ  (Server)     server-side renders at runtime (uses getInitialProps or getServerSideProps)\n```\n\n## Performance and UX Benchmark\n\nI have been casually tracking and researching the progress of [the plan for React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html). I have tested multiple React 18 versions since, from Alpha release to the current [Beta release](https://github.com/reactwg/react-18/discussions/112).\n\n![homepage](docs/media/homepage.png)\n_Homepage_\n\n![HN](docs/media/hn.png)\n_HN_\n\n**Benchmark specs:**\n\n- React version: 18.0.0-beta-0cc724c77-20211125\n- Next.js version: 12.0.4 (stable)\n- Build: optimized for production\n- Chrome-based browser\n- Network connection: local\n- Test device: desktop and mobile\n\nWe will use Lighthouse for benchmarking:\n\n1. React Server Components (RSC) with HTTP streaming\n2. Static + Client Side Rendering (CSR) without HTTP streaming\n\n### React Server Components (RSC) with HTTP streaming\n\n**Device: mobile**\n\n![Lighthouse - RSC mobile](docs/media/rsc_mobile.png)\n_Lighthouse_\n\n![Original trace - RSC mobile](docs/media/rsc_mobile_perf_trace.png)\n_Original trace_\n\n**Device: desktop**\n\n![Lighthouse - RSC desktop](docs/media/rsc_desktop.png)\n_Lighthouse_\n\n![Original trace - RSC desktop](docs/media/rsc_desktop_perf_trace.png)\n_Original trace_\n\n### Static + Client Side Rendering (CSR) without HTTP streaming\n\n**Device: mobile**\n\n![Lighthouse - CSR mobile](docs/media/csr_mobile.png)\n_Lighthouse_\n\n![Original trace - CSR mobile](docs/media/csr_mobile_perf_trace.png)\n_Original trace_\n\n**Device: desktop**\n\n![Lighthouse - CSR desktop](docs/media/csr_desktop.png)\n_Lighthouse_\n\n![Original trace - CSR desktop](docs/media/csr_desktop_perf_trace.png)\n_Original trace_\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedrickchee%2Freact-18-beta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedrickchee%2Freact-18-beta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedrickchee%2Freact-18-beta/lists"}