Next.js Discord

Discord Forum

Next 13: Render on server at request time

Unanswered
Yacare Caiman posted this in #help-forum
Open in Discord
Avatar
Yacare CaimanOP
I've read about the react server component (RSC), and I understand what it is and how it works. But I'm not sure how the Next render with RSC will work at the request time. Please help me with answering the following questions:
- When a route is loaded with Next.js, the initial HTML is rendered on the server. This HTML is then progressively enhanced in the browser, allowing the client to take over the application and add interactivity, by asynchronously loading the Next.js and React client-side runtime. - Why does it render HTML rather than a JSON format for RSC?
- Is there any way to pass props from client component to RSC?
- Why does the RSC not re-render when its parent (client component) does?

9 Replies

Avatar
joulev
1. it renders html because that's how server components work: component => html on server
2. no
3. that's just how all react components work, server or not, see example below
"use client";

import { useState } from "react";

function ComponentA() {
  console.log("A is rendered");
  return null;
}

function ComponentB({ children }: { children: React.ReactNode }) {
  const [isChecked, setIsChecked] = useState(false);
  console.log("B is rendered");
  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={() => setIsChecked(!isChecked)} />
      <div>{children}</div>
    </div>
  );
}

export default function Page() {
  return (
    <ComponentB>
      <ComponentA />
    </ComponentB>
  );
}
Avatar
Yacare CaimanOP
Thanks for your answer.
Does nextjs send a format look like this to browser ? M1:{"id":"./src/ClientComponent.client.js","chunks":["client1"],"name":""} J0:["$","@1",null,{"children":["$","span",null,{"children":"Hello from server land"}]}]
Avatar
joulev
that one i don't know, you have to read the nextjs source code for that
i'm not too interested in the internal working of next.js
you don't need to know that to use next.js well
Avatar
Yacare CaimanOP
It is referred in this blog https://www.plasmic.app/blog/how-react-server-components-work.
Avatar
joulev
hmm? well i've been using server components since last October, never needed to know this to be able to use it well
but if you are interested, feel free to dive deeper into how it works