Bundlephobia: how does next js help with this?
Answered
Rose-breasted Grosbeak posted this in #help-forum
Rose-breasted GrosbeakOP
I am making a website where SEO matters, and thus it should be fast. It should be as much server rendered as possible.
I plan to use tailwind for styling, please let me know if tw merge is a static solution or not.
Secondly, I'll use [ark-ui](https://ark-ui.com/) instead of its shadcn, given its state on GitHub, and I'm also not a fan of having all the components available at source since some not so smart people in my team could potentially modify the component source directly.
Anyways, the problem with ark is the bundle size. It use zagjs under the hood which is 100kb uncompressed (checked using vite bundle analyser). I modified [this](https://codesandbox.io/s/ark-ui-dialog-ctsm8r) sandbox
That feels like a lot. How does next js help with this?
I plan to use tailwind for styling, please let me know if tw merge is a static solution or not.
Secondly, I'll use [ark-ui](https://ark-ui.com/) instead of its shadcn, given its state on GitHub, and I'm also not a fan of having all the components available at source since some not so smart people in my team could potentially modify the component source directly.
Anyways, the problem with ark is the bundle size. It use zagjs under the hood which is 100kb uncompressed (checked using vite bundle analyser). I modified [this](https://codesandbox.io/s/ark-ui-dialog-ctsm8r) sandbox
That feels like a lot. How does next js help with this?
Answered by joulev
tw merge is a simple js function, if you run it on the server it is run on the server, if you run it in client side code it will be run on the client side
nextjs cannot help with ark ui. that xxx kB are needed for ark ui to function. only the ark ui community/documentation/maintainers can give you guidance on reducing this.
if you aim for very low bundle size, choosing nextjs is a mistake. react is not known for having small bundle sizes. use alternatives like solid or svelte.
nextjs cannot help with ark ui. that xxx kB are needed for ark ui to function. only the ark ui community/documentation/maintainers can give you guidance on reducing this.
if you aim for very low bundle size, choosing nextjs is a mistake. react is not known for having small bundle sizes. use alternatives like solid or svelte.
15 Replies
@Rose-breasted Grosbeak I am making a website where SEO matters, and thus it should be *fast*. It should be as much server rendered as possible.
I plan to use tailwind for styling, please let me know if tw merge is a static solution or not.
Secondly, I'll use [ark-ui](https://ark-ui.com/) instead of its shadcn, given its state on GitHub, and I'm also not a fan of having all the components available at source since some *not so smart* people in my team could potentially modify the component source directly.
Anyways, the problem with ark is the bundle size. It use zagjs under the hood which is 100kb uncompressed (checked using vite bundle analyser). I modified [this](https://codesandbox.io/s/ark-ui-dialog-ctsm8r) sandbox
That feels like a lot. How does next js help with this?
tw merge is a simple js function, if you run it on the server it is run on the server, if you run it in client side code it will be run on the client side
nextjs cannot help with ark ui. that xxx kB are needed for ark ui to function. only the ark ui community/documentation/maintainers can give you guidance on reducing this.
if you aim for very low bundle size, choosing nextjs is a mistake. react is not known for having small bundle sizes. use alternatives like solid or svelte.
nextjs cannot help with ark ui. that xxx kB are needed for ark ui to function. only the ark ui community/documentation/maintainers can give you guidance on reducing this.
if you aim for very low bundle size, choosing nextjs is a mistake. react is not known for having small bundle sizes. use alternatives like solid or svelte.
Answer
Dwarf Hotot
Nextjs bundle can be compressed by using dynamic routes or ISR, Nextjs is good for seo and performance can also reach to 100 in both mobile and desktop
@joulev tw merge is a simple js function, if you run it on the server it is run on the server, if you run it in client side code it will be run on the client side
nextjs cannot help with ark ui. that xxx kB are needed for ark ui to function. only the ark ui community/documentation/maintainers can give you guidance on reducing this.
if you aim for very low bundle size, choosing nextjs is a mistake. react is not known for having small bundle sizes. use alternatives like solid or svelte.
Rose-breasted GrosbeakOP
Thanks for the input! unfortunately I can't decide on the framework, it's what the client wants (given its market hype)
@Dwarf Hotot Nextjs bundle can be compressed by using dynamic routes or ISR, Nextjs is good for seo and performance can also reach to 100 in both mobile and desktop
it can yes, but nextjs baseline for a hello world app is already at 80-100 kB. in comparison svelte will get you around 10 kB last time i tried it
@Dwarf Hotot Nextjs bundle can be compressed by using dynamic routes or ISR, Nextjs is good for seo and performance can also reach to 100 in both mobile and desktop
Rose-breasted GrosbeakOP
How are compression and dynamic routes related?
@Rose-breasted Grosbeak Thanks for the input! unfortunately I can't decide on the framework, it's what the client wants (given its market hype)
well then you have to be content with the bundle sizes.
i've never used ark-ui, but 100 kB seems too big. i use radix which is very lightweight. but to make the smallest possible component in terms of bundle size, the only choice is to write it yourself.
i've never used ark-ui, but 100 kB seems too big. i use radix which is very lightweight. but to make the smallest possible component in terms of bundle size, the only choice is to write it yourself.
Rose-breasted GrosbeakOP
I'll check out radix then
@Rose-breasted Grosbeak How are compression and dynamic routes related?
Dwarf Hotot
Dynamic routes will decrease the build size
@joulev well then you have to be content with the bundle sizes.
i've never used ark-ui, but 100 kB seems too big. i use radix which is very lightweight. but to make the smallest possible component in terms of bundle size, the only choice is to write it yourself.
Dwarf Hotot
Shade can UI is good and customisable
Rose-breasted GrosbeakOP
This bothers me
https://github.com/shadcn-ui/ui/issues/6417
https://github.com/shadcn-ui/ui/issues/6417
@Rose-breasted Grosbeak This bothers me
https://github.com/shadcn-ui/ui/issues/6417
shadcn-ui is just radix-ui with a good initial styling, you just install the component and then you own them and make changes where necessary. it's not a library in the form that you upgrade regularly, you just install once and own the code from there on
Rose-breasted GrosbeakOP
And a bunch of extra components?
The design we have differs significantly from the shadcn websites I've seen so far. So I might just use radix directly
The design we have differs significantly from the shadcn websites I've seen so far. So I might just use radix directly
How do I mark this as answered..?
@Rose-breasted Grosbeak And a bunch of extra components?
The design we have differs significantly from the shadcn websites I've seen so far. So I might just use radix directly
yes that's exactly what i'm doing.
keep in mind though that it's a bit hard to get animation to work right when you start with radix raw. this one shadcn-ui gets right.
so what i always do is, i install the shadcn component with all the animation classes manually (go to the 'manual' tab on the component documentation pages), then i remove most classes and restyle them to my design system, but keep or only slightly modify the animation classes.
keep in mind though that it's a bit hard to get animation to work right when you start with radix raw. this one shadcn-ui gets right.
so what i always do is, i install the shadcn component with all the animation classes manually (go to the 'manual' tab on the component documentation pages), then i remove most classes and restyle them to my design system, but keep or only slightly modify the animation classes.
Rose-breasted GrosbeakOP
Ark is a great community developed library, I'd love to use it for my personal projects but for the same reasons as chakra ui, I can't use it in production:/
Thanks again for the insights @joulev
Thanks again for the insights @joulev