Next.js vs. Vite – Worth migrating to Vite?

Показать описание

Migrating from Next.JS to Vite: Is It Worth the Switch?

In this episode, we dive deep into our migration from Next.JS to Vite for an extensive React application with over 80,000 lines of code. You’ll learn about the improvements in build time, Hot Module Replacement (HMR) speed, and bundle size. We also discuss the challenges of switching from Webpack to ES Modules and replacing Next—JS-specific components. By the end, you’ll have insights into whether Vite could be the right fit for your project, especially for client-side rendering and future SaaS projects.

00:00 Introduction

00:53 Our Tech Stack

01:14 How long it took to migrate

01:57 Build time comparison

02:08 Bundlesize comparison

02:22 HMR comparision

03:35 Large bundle after migration

05:56 Review last Video about React

Additional links:

Substack article link on Sunday:

Рекомендации по теме

Комментарии

When Tanstack Start goes 1.0, it will be the newer, better Next.js (uses Vite, React and Nitro server from Nuxt stack)

pixelready

What color theme were you using in the clip output @ 3:44 — btw great video

mgan

I have add Vite and Deno 2.0 to an existing CRA React App and it is very fast and user friendly. I can just do all the linting, formatting, typestript settings with Deno 2 and it just updates instantly because of Vite. Layers of config and boilerplate just disappeared.

XX-rime

No need to do migration or choose. Know your requirements first.

- Next.js for SEO-friendly pages, where server-side rendering is a must and fast loading cache-able public pages such as e-commerce and blogs
- Vite or single-page app (client-side routing) for internal apps such as for company dashboard app, productivity apps, company operations app

There is no perfect tooling for everything.

joemgap

I have been using Vite for a couple of weeks and it's amazing. I tried Next JS but it took 45 seconds to load an image from Firebase. Deploying took about the same time compared to Vite's 5 seconds. I don't know anything about coding though so maybe I was doing something wrong but sticking with Vite for now.

danquixote

when we have vite + React SPA and backend API running as different entities, how do we safely handle authN? That's one of the main reason, I'm switching from Vite to Next.js to handle it at SSR

fullstackspiderman

Awesome content, Adrian!

Some stuff I’ve struggled with in Next.js: handling env variables across dev, staging, and production, and generating root-level pages (like /product-1, /product-2). We had to add a custom server on top of Next.js to make it work.

Curious how you guys set up your Next.js apps and deal with envs. Would love to hear your take!

tonytoth

I had a really great developing experience using vite and react, I like how fast vite is and all the feature it has, I like freedom when it comes to libraries choice that you can choose to install along with react, so you are free to use and choose the tools you prefer, fast build and production time, then yeah vite can be a great choice, oh and also of you prefer to have front and back end to be separated then yea it's a great choice.

GeeGnebAb

It is becoming more and more complex everyday, and it has become hard to scale projects with it.

Iammrunkown

Just know that Vite is about to go through some major updates

loquek

YES. vite. vite. if they keeping webpack, why not just bundle jquery in as well for old times. For me if its in NextJS, just keep it that way.. if starting fresh... vite.

mrrolandlawrence