Vite Blog

> skip some build steps

There was a change in Next 16, not Turbopack, that removed `ESLint` during `next build`: https://nextjs.org/blog/next-16#breaking-changes-and-other-updates

This behavior is the same whether you use Turbopack or webpack. It doesn't make sense for us to couple ourselves with ESLint when there are many viable alternatives. No other popular frameworks run ESLint automatically during builds. This change in Next 16 brought up closer to parity with other frameworks and bundlers.

> typescript validation

There's no change here with Turbopack. We do still run `tsc` automatically to check your types. That's part of `next build` and not Turbopack. However, we may remove this in the future for similar reasons.

There's no good reason for the bundler to call the typechecker. Bundlers strip types. Historically this was done with Babel in webpack. Modern versions of Next.js use SWC for type stripping in both webpack and Turbopack.

> aggressively cache node modules

We aggressively cache everything. We don't have special-casing for `node_modules`. See our blog post about our caching system: https://nextjs.org/blog/turbopack-incremental-computation

Interestingly vite does actually special-case and cache `node_modules`: https://vite.dev/guide/dep-pre-bundling

There are tradeoffs to both approaches, and I think Vite's choice makes sense in the context of their broader minimal-bundling-in-dev design, but it makes less sense for Turbopack (as well as webpack and…

IMO Bun and Vite are best suited for slightly different things. Not to say that there isn't a lot of overlap, but if you don't need many of the features Bun provides, it can be a bit overkill.

Personally, I write a lot of Vue, so using a "first party" environment has a lot of advantages for me. Perhaps if you are a React developer, the swap might be even more straightforward.

I also think it's important to take into consideration the other two packages mentioned in this post (oxlint & oxfmt) because they are first class citizens in Vite (and soon to be Vite+). Bun might be a _technically_ faster dev server, but if your other tools are still slow, that might be a moot point.

Also, Typescript also "just works" in Vite as well. I have a project on work that is using `.ts` files without even an `tsconfig` file in the project.

https://vite.dev/guide/features#typescript

> Even though native ESM is now widely supported, shipping unbundled ESM in production is still inefficient (even with HTTP/2) due to the additional network round trips caused by nested imports. To get the optimal loading performance in production, it is still better to bundle your code with tree-shaking, lazy-loading and common chunk splitting (for better caching).

Source is Vite docs: https://vite.dev/guide/why.html#why-bundle-for-production

For me, Vite has largely solved my js tooling needs. It's definitely cool how far we can go with the platform alone, but for larger applications or publishing libraries, tooling like Vite is a blessing.

Vite does statically replace the `browser` variable with `true` or `false` based on whether you're on the client or server, but this shouldn't affect the correctness of your code. It does allow Vite to remove any unused code, however. E.g. `if (browser)` turns into `if (false)` on the server and any code within that block can be removed. This can avoid shipping unused code to the client.

Astro is also built in top of Vite and the same thing happens there. If you reference `import.meta.env.SSR` it is statically replaced during build and unused code is tree-shaken out: https://vite.dev/guide/env-and-mode#env-variables

If you don't need server rendering, I'd just recommend React without framework, and Vite [1] to run the app in dev and build the app in prod, then host the build (basically a HTML page with a JS file) on AWS S3 or similar static hosting platforms. That's the solution I've been using for 10+ years without any problem.

For the backend you can use whatever you are comfortable with. I mostly use PostgREST [2] nowadays. I recommend to use react-query [3] to call your APIs on the client side.

[1] https://vite.dev

[2] https://docs.postgrest.org

[3] https://tanstack.com/query/latest/docs/framework/react/overview

Thanks!!

Vite is specifically used for bundling the frontend and chosen due to the vast ecosystem of plugins that people use for it. Tailwindcss is a great example, others here: https://vite.dev/plugins/

Bun does quite a bit more. In this context it’s used as a runtime and a package manager, and automatically handles the workspaces aspect for shared types. While you might be able to achieve all of bhvr with just Bun I chose to stick with Vite due to the number plugins, tutorials, setups, etc. that all use it. Just keeps things simple and easy!