SVG being downloaded client side in a 'server only' component NextJS
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)
Source: gregberge/svgr