{
    "content": "<h1>Understanding the _rsc Query Parameter<\/h1><p>The <code>_rsc<\/code> identifier is a specialized query parameter and file extension suffix used primarily within the <a href=\"..\/Next.js\/\">Next.js<\/a> framework to manage the delivery of <a href=\"..\/React-Server-Components\/\">React Server Components<\/a> (RSC). In modern web architectures utilizing the <a href=\"..\/App-Router\/\">App Router<\/a>, <code>_rsc<\/code> requests are triggered during client-side navigation to fetch the serialized data required to render server-side logic without performing a full browser refresh.<\/p><p>Unlike traditional <a href=\"..\/Server-Side-Rendering\/\">Server-Side Rendering<\/a> which returns a complete <a href=\"..\/HTML\/\">HTML<\/a> document, an <code>_rsc<\/code> request returns a stream of serialized data. This payload contains the instructions necessary for the <a href=\"..\/React-Flight-Runtime\/\">React Flight Runtime<\/a> to reconstruct the <a href=\"..\/Virtual-DOM\/\">Virtual DOM<\/a> tree on the client. According to the <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components\">Next.js Documentation<\/a>, this approach enables <a href=\"..\/Partial-Rendering\/\">Partial Rendering<\/a>, where only the changed segments of a layout are updated, significantly improving <a href=\"..\/Web-Performance\/\">Web Performance<\/a>.<\/p><p>The <code>_rsc<\/code> payload includes several key pieces of information: the rendered output of server components, placeholders for <a href=\"..\/Client-Components\/\">Client Components<\/a> (known as client references), and any props passed from the server to the client. This allows for a seamless <a href=\"..\/Hydration\/\">Hydration<\/a> process where the client-side state is preserved even as new server-rendered content is integrated into the <a href=\"..\/DOM\/\">DOM<\/a>. As noted in the <a href=\"https:\/\/react.dev\/blog\/2023\/03\/22\/react-labs-what-we-have-been-working-on-march-2023\">React Labs update<\/a>, this architecture helps reduce the <a href=\"..\/JavaScript\/\">JavaScript<\/a> bundle size by keeping heavy dependencies on the server.<\/p><ul><li><a href=\"..\/Next.js\/\">Next.js<\/a><\/li><li><a href=\"..\/Server-Side-Rendering\/\">Server-Side Rendering<\/a><\/li><li><a href=\"..\/Hydration\/\">Hydration<\/a><\/li><li><a href=\"..\/Web-Performance\/\">Web Performance<\/a><\/li><\/ul>",
    "tags": [
        "react",
        "nextjs",
        "rsc",
        "server-components",
        "frontend",
        "rendering",
        "javascript",
        "performance",
        "app-router",
        "web-development"
    ]
}