Next.js Discord

Discord Forum

SVG in React Server Component being downloaded client side

Unanswered
Western yellowjacket posted this in #help-forum
Open in Discord
Western yellowjacketOP
I have a server-only component that renders some html elements, 1 svg and 2 other components. (IMAGE ATTACHED)

- <IntroButtons> is a 'use-client' component
- <ActiveStudents> is a server-only component
- <Header> is a SVG rendered by SVGR (svg rendered as a react component)

PROBLEM:
The page that renderes this server-only component (and its the only component rendered by the page) appears in the network tab with 208kbs because its downloading <IntroButtons> (which is client-side, so its okay) and <Header> (which is a SVG, and this is not okay)

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

35 Replies

Western yellowjacketOP
its an SVG
This is opening the file directly in VSCODE, not builded
alfon
how did you check that the svg is rendered in the client? 🤔
Western yellowjacketOP
Because of the size of the download. If i coment the SVG, this page is only 8.6 kbs (which is the size of the client component IntroButtons)
As you can see, now its 208kbs because the Header SVG is not commented
With SVG commented:
alfon
I setup svg like this
and it loads up on initial page (with no js)
Western yellowjacketOP
I dont think the problem is the SVG... Because if I comment the client component IntroButtons while rendering the SVG, the page is not even downloaded client-side
alfon
i thought you said <Header /> is the problem, which is the svg
Western yellowjacketOP
Indirectly it is, because I dont want to download it client side, but I dont think its the SVG "fault" for being downloaded client side
alfon
im not sure how you set up your RSC but it works in my case
Western yellowjacketOP
I dont need to set it... Its default on nextJS 13
I only have import 'server-only on the top of the file for safety
alfon
ah so Intro is your page.js?
Western yellowjacketOP
No, its a component rendered in the page.js
alfon
and page.js is server component right?
Western yellowjacketOP
My page.js just renderes:
 return (
    <>
      <Intro lang={params.lang} />
    </>
  );
yes, it also has import 'server-only'
root page.js (sever only) renders Intro (server only) that renderes IntroButtons (client side)
alfon
hmmm maybe its time to try to make minimal reproduction repo
not sure why it happened lol
Western yellowjacketOP
I will try and do that
Western yellowjacketOP
https://github.com/ricardo-fnd/rsc-test
You can test here.
yarn install
cd apps/web
yarn run build && yarn run start
To test:
In the network tab you can page-xxx being downloaded with 208kbs
If you comment Header SVG in Intro.jsx, the page size is reduced to 8.6kbs
If you comment JUST IntroButtons (client side component) the page-xxx is not downloaded, even with the SVG inside it
the URL is: http://localhost:3000/lang/en
Western yellowjacketOP
Just removed SVGR and it worked, for some reason