vercel / next-react-server-components Goto Github PK
View Code? Open in Web Editor NEWDemo repository for Next.js + React Server Components
Home Page: https://next-rsc-hn.vercel.app
License: MIT License
Demo repository for Next.js + React Server Components
Home Page: https://next-rsc-hn.vercel.app
License: MIT License
This code has been started in stories.js
file. You can see an example of one of our old iterations of this https://next-news.vercel.app/.
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?
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.
Hi everyone,
Thanks for sharing this demo!
I was looking at the source of Nav
component:
export default function Nav() {
;<ul className="nav-ul">
<Item href="/newest">new</Item>
...
<style jsx>{`
...
`}</style>
</ul>
}
Why is this component returning undefined
? What does it do if nothing is being returned?
How does this have an effect on DOM, state, styles, or anything else?
Is this a common pattern? Where can I read more about this? I'm intrigued :)
First off I don't know if this is the right place to open this issue, apologies if it isn't.
I am trying out React Server Components with Next.js v12.2.3
. This is the workflow I am trying to do:
// pages\blog\[slug].server.tsx
import type { GetStaticPropsContext } from "next";
import Image from "next/image";
import * as POST_1 from "../../content/post-1/index.server";
import * as POST_2 from "../../content/post-2/index.server";
const slugToModule = {
"post-1": POST_1,
"post-2": POST_2,
};
type Props = {
slug: string;
};
export default function BlogPostPage({ slug }: Props) {
// @ts-expect-error
const { default: MDXContent, meta } = slugToModule[slug];
return (
<main>
<h1>{meta.title}</h1>
{meta.coverImage && <Image src={meta.coverImage.src} alt={meta.coverImage.alt} />}
<MDXContent />
</main>
);
}
export async function getStaticPaths() {
const slugs = Object.keys(slugToModule);
return {
paths: slugs.map((slug) => ({
params: { slug },
})),
fallback: false,
};
}
type Params = {
slug: string;
};
export async function getStaticProps({ params }: GetStaticPropsContext<Params>) {
return {
props: { slug: params!.slug },
};
}
// content\post-1\index.server.tsx
import coverImage from "./cover-image.jpg";
export const meta = {
title: "Post 1",
coverImage: {
src: coverImage,
alt: "Alt description",
},
};
export default function Content() {
return (
<main>
<p>This is post 1 content.</p>
</main>
);
}
I am getting the following error:
❯ npm run build
> [email protected] build
> next build
warn - You have enabled experimental features (runtime, serverComponents) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - SWC minify release candidate enabled. https://nextjs.link/swcmin
info - Linting and checking validity of types
warn - You are using the experimental Node.js Runtime with `experimental.runtime`.warn - You have experimental React Server Components enabled. Continue at your own risk.
info - Creating an optimized production build
Failed to compile.
C:Usersmiolivercodepersonal est-rsc-next-imagecontentpost-1cover-image.jpg
Module build failed: UnhandledSchemeError: Reading from "C:Usersmiolivercodepersonal est-rsc-next-imagecontentpost-1cover-image.jpg" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "c:" URIs.
at C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57269:25
at Hook.eval [as callAsync] (eval at create (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:23385:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:23187:14)
at Object.processResource (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57266:8)
at processResource (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:20797:11)
at iteratePitchingLoaders (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:20748:10)
at runLoaders (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:20974:2)
at NormalModule._doBuild (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57256:3)
at NormalModule.build (C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:57400:15)
at C:\Users\mioliver\code\personal\test-rsc-next-image\node_modules\next\dist\compiled\webpack\bundle5.js:31406:12
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=next%2Fimage&modules=C%3A%5CUsers%5Cmioliver%5Ccode%5Cpersonal%5Ctest-rsc-next-image%5Ccontent%5Cpost-1%5Ccover-image.jpg&runtime=nodejs&ssr=false&name=pages%2Fblog%2F%5Bslug%5D&server=true!
> Build failed because of webpack errors
If I remove the static image import/export from content\post-1\index.server.tsx
tha it builds fine!
Currently if there're errors of data fetching on server side, it will just hang with suspense fallbacks instead of providing a useful error message. Need to provide a better way of helping notice errors of data fetching, easiler espically in dev mode
Repro Steps:
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
Steps to Reproduce:
Fix:
After downgrading to Next v.12.1.* (currently 12.1.6) everything works as expected
Updated package.json:
{
"scripts": {
"dev": "yarn next dev",
"build": "yarn next build",
"start": "yarn next start"
},
"dependencies": {
"ms": "2.1.3",
"next": "12.1.*",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
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 reactjs/server-components-demo#57 to the original demo in the same spirit.)
The up-to-date list of problems (likely non-exhaustive) is here: #13 (comment)
This demo shows each story "streaming in" individually:
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.
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.
<Suspense>
boundary breaks hydrationAlternatively, 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.
I am seeing an extra request to the RSC entry point from the client after the page loads:
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?
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!
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?
Reproduction:
Expectation:
Clicking browser Forward button in step 6. should simply take you to the page you previously just saw. Also, the state of anything you toggled on that page should be the same as how you put it when you clicked the browser Back button.
I found the doc to define the server components is
All components inside the app directory are React Server Components (RSC) by default, including special files and colocated components.
How about the files on lib folder?
Best wish. Thanks.
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:
main...zaiste:non-page-server-comp-cannot-import-client-comp
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
.
Remove dependencies and tsconfig file, as they're not being used
https://github.com/vercel/next-rsc-demo/blob/main/package.json
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
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.
The following files are referenced, but missing from the codebase:
./components/comment.js
from ./components/item.client.js
./components/comment-form.js
from ./components/item.client.js
./lib/get-comments
referenced from ./components/item.js
Hey all, first of all thank you for the interesting demo.
It seems that the demo is quite not fulfilling one of the main purposes of RSC, which is to keep server dependency in the server.
Example:
// ./components/Time.server.js
import moment from "moment";
const Time = () => {
return <p>{moment().format("DD/MM/yyyy H:mm")}</p>;
};
export default Time;
// ./pages/index.js
import { Suspense } from "react";
import Time from "../components/Time.server";
export default function Index() {
return (
<Suspense fallback={"Loading..."}>
<Time />
</Suspense>
);
}
The moment
dependency is being included into the client bundle, checked the chunks into .next/static
folder and also with @next/bundle-analyzer
:
How can we rerender(refetch) RSC to show updated data?
/slow
Error: storyIds.slice is not a function
function NewsWithData() {
const { data: storyIds } = useData('top', () => fetchData('topstories', 500))
return (
<>
{storyIds
? storyIds.slice(0, 30).map((id) => {
return (
<Suspense key={id} fallback={<Spinner />}>
<StoryWithData id={id} />
</Suspense>
)
})
: null}
</>
)
}
Hey
The ssr + api delay example is broken. I get an error 500 on:
https://next-news-rsc.vercel.sh/ssr
Thanks in advance! :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.