#Bundlephobia: how does next js help with this?

19 messages · Page 1 of 1 (latest)

summer gorge
#

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 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 sandbox

That feels like a lot. How does next js help with this?

Home | Ark UI

A headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.

CodeSandbox
Myndelx
ark-ui-dialog - CodeSandbox

ark-ui-dialog by Myndelx using @ark-ui/react, loader-utils, react, react-dom, react-scripts

crystal spearBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

summer gorge
#

Bundlephobia: how does next js help with this?

lapis phoenix
# summer gorge I am making a website where SEO matters, and thus it should be *fast*. It shoul...

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.

silk axle
#

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

summer gorge
lapis phoenix
summer gorge
lapis phoenix
summer gorge
#

I'll check out radix then

silk axle
silk axle
summer gorge
lapis phoenix
summer gorge
#

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

#

How do I mark this as answered..?

lapis phoenix
# summer gorge And a bunch of extra components? The design we have differs significantly from ...

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.

sweet egretBOT
# summer gorge How do I mark this as answered..?
Mark an answer as the solution

To mark the message as solution:

  1. Hover over the message you want to mark as the solution.
  2. Right click the message Click the three dots that appear on the right side.
  3. You'll see a menu which should have the option of Apps. Hover Over it.
  4. Click on the Mark as Answer option.
    Note: If you don't see the Mark as Answer option or Apps option, restart/update your discord app!
Requested by joulev
crystal spearBOT