A demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support

Last update: May 12, 2022

Next.js 12 React Server Components Demo (Alpha)

Try the demo live here: next-rsc-hn.vercel.app.

Introduction

This is a demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support. We recommend you taking a look at these links, before trying out the experimental feature:

This demo is built for showing what features that Server Components provide and what the application structure might look like. It's not ready for production adoption, or performance benchmarking as the underlying APIs are not stable yet, and might change or be improved in the future.

Technical Details

This Next.js application uses React 18 (RC build) and the new Edge Runtime. It has runtime set to 'edge' and feature flag serverComponents enabled. You can check out next.config.js for more details.

Running Locally

  1. yarn install
  2. yarn dev

Go to localhost:3000.

Deploy

You can quickly deploy the demo to Vercel by clicking this link:

Deploy with Vercel

License

This demo is MIT licensed.

GitHub

https://github.com/vercel/next-react-server-components
Comments
  • 1. Remove the Suspense boundary for individual items

    As mentioned in https://github.com/vercel/next-rsc-demo/issues/13#issuecomment-988319153, we think removing the spinners for individual items will reduce layout shift and improve the overall experience of this app.

    Reviewed by shuding at 2021-12-07 23:17
  • 2. TransformStream is not defined

    I have an error in rsc ReferenceError: TransformStream is not defined.

    and in csr Error: Hydration failed because the initial UI does not match what was rendered on the server.

    What is the problem?

    Reviewed by rajabzadeh1986 at 2022-03-28 09:27
  • 3. Why is a bunch of js files loaded?

    Hi, sorry if I'm misunderstanding, or maybe it's because Server Components are still alpha, but I was under the impression that this demo would load zero javascript.

    If I look in the browser devtools network tab on https://next-news-rsc.vercel.sh/csr for example I'm seeing it loads a bunch of js files like https://next-news-rsc.vercel.sh/_next/static/chunks/313-ac2dffa02b6a4c2a.js.

    Is this because the functionality is not out of alpha, or am I understanding wrong? Would love to use this.

    Reviewed by Epskampie at 2021-12-01 16:32
  • 4. Non-page server component cannot import client component

    It seems that client components can be only directly imported from a page component.

    For example, the News component located in rsc.server.js can import the Story client component just fine. If we, however, move the StoryWithData to a separate file (with the .server suffix or none i.e. a shared component), Next.js returns errors.

    Here's a diff off a branch from my fork that shows this issue: https://github.com/vercel/next-rsc-demo/compare/main...zaiste:non-page-server-comp-cannot-import-client-comp

    Reviewed by zaiste at 2021-11-01 18:59
  • 5. trailing slash does not seem to work with RSC on

    Having trailingSlash: true does not seem to work if you turn on serverComponents. I'm not sure if this is the right place to raise it up or on the actual project considering it's still on alpha.

    Reviewed by leogono at 2022-01-19 09:54
  • 6. Cannot set headers after they are sent to the client

    Repro Steps:

    1. git clone
    2. remove yarn from package.json so i can use npm to start
    3. npm run dev
    Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
        at ServerResponse.setHeader (_http_outgoing.js:518:11)
        at DevServer.renderError (C:\Users\Admin\Documents\Javascript\FullStack\Next.js-Strapi-Template\next-rsc-demo\node_modules\next\dist\server\next-server.js:1631:17)
        at DevServer.run (C:\Users\Admin\Documents\Javascript\FullStack\Next.js-Strapi-Template\next-rsc-demo\node_modules\next\dist\server\dev\next-dev-server.js:431:35)
        at runMicrotasks (<anonymous>)
        at processTicksAndRejections (internal/process/task_queues.js:97:5) {
      code: 'ERR_HTTP_HEADERS_SENT'
    }
    error - TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer. Received an instance of Uint8Array
    error - unhandledRejection: undefined
    error - unhandledRejection: TypeError: The stream (in errored state) is not in the writable state and cannot be closed
    
    Reviewed by mnai01 at 2021-10-29 02:21
  • 7. Add error placeholder for request errors

    Resolves: #34

    If there're errors occurred during the data fetching in useData, it will return a error property and stops hanging. Then you can use the returned error to display it or do whatever you need there. e.g.

    function Example() {
      const { data, error } = useData('data', fetcher)
      return (
        <div>
          {error && <ErrorPlaceholder error={error} />}
          {data && <div>My data: {data}</div>}
        </div>
      )
    }
    

    If there's error occurred in topstories fetching it will display the below error. You can try to tweaks the fetching url to simulate an error

    image
    Reviewed by huozhi at 2022-03-14 11:19
  • 8. Not working with React 18 rc.1

    We are evaluating server components in our app. While attempting to get it to work, I kept getting the following error. I decided to try this simple example. Initially it works without issue, however if you update react to RC 1 (what our app is on), you get the same error we experience.

    image

    Reviewed by demiluke at 2022-03-04 14:08
  • 9. rsc.server.js rendered twice

    How to reproduce

    Add some console.log at function News() -> https://github.com/vercel/next-rsc-demo/blob/main/pages/rsc.server.js#L39 Run next with next dev Go to http://localhost:3000/rsc Check console output

    So the problem is that each Page/Component is wrapped by RSCComponent -> https://github.com/vercel/next.js/blob/v12.0.5-canary.4/packages/next/client/index.tsx#L716 this component use another component RSCWrapper, which hit server second time

    Reviewed by ms-sch at 2021-11-19 13:51
  • 10. Change `ms` to `moment`

    This is to demonstrate that modules used in Server Components will never be shipped to the client side, but traditional SSR and CSR pages do. So moment adds an additional 25kb to /ssr and /csr, but not for /rsc.

    Reviewed by shuding at 2022-04-01 12:47
  • 11. Document or fix known issues with this demo

    I'm starting to see this demo being used in performance comparisons in a way that implies this is the canonical RSC experience. It would be good to either solve or document (in README) concrete issues with it so that a future reader has an idea of what's correct and what's a known issue. (I've added https://github.com/reactjs/server-components-demo/pull/57 to the original demo in the same spirit.)

    Update

    The up-to-date list of problems (likely non-exhaustive) is here: https://github.com/vercel/next-rsc-demo/issues/13#issuecomment-988438962


    Streaming "Jank"

    This demo shows each story "streaming in" individually:

    https://user-images.githubusercontent.com/810438/145104379-12b00f2d-9eb9-4434-b98b-b48036aa43ad.mov

    This is a rather janky user experience.

    I am guessing that this demo does it to make the "streaming" aspect obvious. However, I am observing that people take away that this jankiness is what we mean by "streaming". It seems like a rather unfortunate consequence if people's takeaway becomes that apps built with Server Components have pieces randomly "popping in" — especially because the whole point of the <Suspense> model is to give you precise control over what's allowed to "pop in" individually vs what pieces must "pop in" together.

    How to fix it?

    If I understand correctly, there are multiple ways to fix this:

    • Remove this <Suspense> boundary so that all stories "pop in" at once. Despite delaying the display, this is a much better user experience because there's no content layout shift, and individual jumping rows aren't useful anyway.

      • I think you'll also want to replace the "top-level" spinner with null and make the body full-height so that the loading sequence before we get the stories isn't jumpy either. Ideally we'd either hold the entire page or show the shell that will be "filled in" — both of these could feel natural. A small body with a spinner in the top left corner looks weird.
      • I've tried doing that, but ran into a hydration error I couldn't fix. Is that a bug in React? For some reason, the exact place where the error happens wasn't reported in the console so I've had a hard time trying to fix this. It seems like there needs to be an investigation for:
        • [ ] Why removing this <Suspense> boundary breaks hydration
        • [ ] Why errors are not being fully reported to the console
    • Alternatively, use <SuspenseList>, replace a spinner fallback with null, and hide the tail, so that you only see stories appearing "in order". This is currently out of question because <SuspenseList> won't be in 18.0 and will come later in 18.x. It's not currently implemented on the server.

    Additional server request

    I am seeing an extra request to the RSC entry point from the client after the page loads:

    Screenshot 2021-12-07 at 21 38 56

    I wouldn't expect the initial page load to need to make any additional requests. Do we understand why it happens? Is this a bug or a known limitation of the current demo?

    Thanks

    I very much appreciate the work on this demo. I'm hoping we can fix and/or document the issues in it so that people are aware what's missing and don't make an impression of the overall RSC architecture or user experience based on an early demo.

    Thanks!

    Reviewed by gaearon at 2021-12-07 21:41
  • 12. Routing with nextjs ?

    Thanks for great demo!

    One question related to routing, currently it seems impossible to read queryparams in server component.

    Do you have any example/guideline for that?

    Reviewed by revskill10 at 2021-10-30 18:32
  • 13. Is `next export` supported?

    I tried to add next export to package.json like so "build": "yarn next build && yarn next export", but non of the pages (other then 404) is generated. Why so? Not even when I add getStaticProps to some pages, like index.js, csr.js or rsc.server.js.

    Reviewed by adammockor at 2021-10-26 17:49
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.

Hacker News Clone React/GraphQL This project is a clone of hacker news rewritten with universal JavaScript, using React and GraphQL. It is intended to

May 14, 2022
A react based hacker news clone / client
A react based hacker news clone / client

Hacker News Redesign In an effort to learn to react here is a react based hacker news clone from scratch using the official open Hacker News's API .(N

Apr 22, 2022
News Web App 📰 built using React ⚛️ and NewsAPI 🚀 which Fetches latest news.
News Web App 📰 built using React ⚛️ and NewsAPI 🚀 which Fetches latest news.

Inshorts Clone using React ⚛️ News Web App ?? built using React ⚛️ and NewsAPI ?? Fetches latest news. ?? Checkout the live Website here! ?? NOTE ?? N

Dec 25, 2021
A React & react-router-powered implementation of Hacker News using its Firebase API.
A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

May 9, 2022
Alan ai news application - Conversational Voice Controlled News App

NewsReader NewsReader is a conversational voice controlled news application that

Mar 9, 2022
The IM+ application with registration area, news area, financial controlThe IM+ application with registration area, news area, financial control
The IM+ application with registration area, news area, financial controlThe IM+ application with registration area, news area, financial control

The IM+ application with registration area, news area, financial controlThe IM+ application with registration area, news area, financial control

Feb 1, 2022
Feb 1, 2022
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Apr 27, 2022
A Facebook Clone which built with reactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Facebook Clone with ReactJS A Facebook Clone that you can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Apr 27, 2022
A Slack Clone which built with ReactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

A Slack Clone that you can sign in with your Google Account, add new channels and send realtime messages to them.

Apr 12, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

May 5, 2022
Simple netflix clone using React and TMDB API to pull in movies/tv shows.

Netflix React Clone Simple netflix clone using React and TMDB API to pull in movies/tv shows. Uses Material UI for the frontend. Still a work in progr

Dec 3, 2021
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node :globe_with_meridians:
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node :globe_with_meridians:

StackOverflowClone As the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by m

May 15, 2022
Recoil is an experimental state management library for React apps.

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

May 18, 2022
An extremely lightweight, 0.5kb experimental, React-like front-end library

What is Reval.js? Reval.js is an experimental, React-like front-end library used to create small-scale web apps faster and better-structured. It is li

May 15, 2022
TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.
TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

Apr 13, 2022
Webapp of Mattermost server: https://github.com/mattermost/mattermost-server

Mattermost Mattermost is an open source, self-hosted Slack-alternative from https://mattermost.org. It's written in Golang and React and runs as a sin

May 18, 2022
The repo shows how to connect your React app to StarkNet

StarkNet.js + Cairo + Hardhat + React This repo shows how to connect your React app to StarkNet. Scripts helper mkdir -p build starknet-compile contra

Nov 28, 2021
This app shows all of the Rick and Morty charachters.
This app shows all of the Rick and Morty charachters.

This app shows all of the Rick and Morty charachters.

Oct 23, 2021