#883·svgr

SVG being downloaded client side in a 'server only' component NextJS

Author: ricardo-fndCreated Jun 16, 2023Updated Mar 28, 2026

Bug Report

In NextJS 13.4.1, SVGs rendered inside a server component are being downloaded client side, when a use client component is present.

'server-only' component

<div>
    <ClientSideComponent /> // using 'use client' directive
    <div>
        <Svg /> // using SVGR (download should happen server side)
    </div>
</div>

The page that renders this server-only component, appears in the network tab with 208kbs because its downloading <ClientSideComponent> (which is client-side, so its okay) and <Svg> (which is a SVG, and this is not okay)

If I comment <ClientSideComponent> and run build && start, the page is not downloaded client-side, not even the SVG. So, my conclusion is that, <ClientSideComponent> client component is triggering the SVG to render client side when its inside an server-only component...

However, when I removed the SVGR library, and installed other SVG to React Component lib, this is not happening. Only the <ClientSideComponent> is being downloaded.

To Reproduce

Steps to reproduce the behavior:

(Read README in repo to reproduce)

Expected behavior

When rendering a react server component server side, all its children should be also rendered server side, unless the children explicitly has use client directive.

Link to repl or repo (highly encouraged)

Repo to reproduce