SvelteKit vs. Next.js

By Jaimie McMahon

If you’re looking to build static sites with complex interactive web applications, you’d be hard pressed to find two more suitable static site generators than Next.js and SvelteKit. 

Luckily for both developers and content teams, CloudCannon supports both Next.js and SvelteKit: whichever tool you choose for your static sites, with CloudCannon you’ll have the benefit of accessible content management, flexible dev tooling, and intuitive content editing and page building. It’s worth noting, however, that our support for Next.js and SvelteKit is focused on SSG capabilities of these tools, and as such does not include SSR.

Both Next.js and SvelteKit are incredibly popular tools, both built with JavaScript — and if you’ve been tuned into the web development world over the past few years you’ll have come across ardent supporters for each. It’s a testament to the vision driving the development of each tool that both have found such a widespread following. But which should you choose? Well, as usual, the answer will depend almost entirely on your development experience and preferences. (The remainder of the answer is much more subjective: choose the one that best fits your preferred workflow!)

With that said, let’s start comparing apples to apples, shall we?

TL;DR — Choose Next.js if you prefer React, choose SvelteKit if you prefer Svelte.

What is Next.js?

Next.js is a robust hybrid framework for both statically exported React applications and websites, as well as server-rendered React applications. As a framework, Next.js takes care of the tooling and configuration required by React while also giving developers’ applications more structure, features, and optimizations. It is often referred to as a meta framework for this reason. To put it as simply as possible, Next.js is a framework for React, which is a framework for Javascript components.

Next.js is becoming more and more popular among developers with React expertise. React offers a virtual DOM program and server-side rendering, which makes complex apps run extremely fast. It is also increasingly popular among those that need the adaptability of a hybrid model that can integrate both server-side rendering (SSR) and static site generation (SSG) in one project.

The designated purpose of Next.js, which is backed by Vercel, is to deliver full-stack functionality to the frontend. New Rust-based transpilation and minification capabilities, as well as the incremental bundler and build system Turbopack replacing Webpack, suggest that Next.js will continue to be a powerhouse for users who want the entire range of development options at their disposal.

Sites made with Next.js

• hbomax.com
• notion.com
• ign.com
• hulu.com

What is SvelteKit?

SvelteKit is a framework for Svelte that creates web applications and static sites that are build-optimized and only load the bare minimum of code. This allows developers to leverage their existing Svelte experience for their next e-commerce site, web application, or responsive marketing site. SvelteKit is actively being developed with their roadmap including built-in i18n support, incremental static regeneration, granular control over deployment region and runtime, image optimization, and many other improvements. SvelteKit is already powering significant data visualization applications such as The New York Times Coronavirus tracker. (Fun fact: Rich Harris first developed Svelte while employed as a graphics editor at The New York Times.)

As opposed to having two tightly tied programs (one to generate HTML, one to handle client-side interaction), this full-stack meta framework lets you utilise one language, unlike standard server frameworks. In other words, the logic and templating is bundled into one file for each component. You can deploy as a standard Node server or using serverless functionalities, including at the edge, because SvelteKit runs anywhere JavaScript runs.

After the initial server-rendered page load, it switches by default to client-side navigation, unlike conventional “multi-page apps” or MPA frameworks. Faster page transitions, state that survives between pages (such the position of a sidebar’s scroll bar), and less data usage are all made possible by this. Additionally, it prevents third-party scripts like analytics from being run again after each page load.

You have freedom with SvelteKit. Many frameworks make the assumption that there is just one right method, but the answer is always more complex. Pre-rendering static pages, for instance, does more than simply act as a poor man’s cache control; it also enables build-time validation, renders data from the filesystem that your edge functions can’t access, and serves as a safeguard against unstable databases.

Sites made with SvelteKit

• daisyui.com
• nytimes.com
• stake.com
• creately.com

Comparing Next.js and SvelteKit

Which should I choose?

The short answer — as always — is that it depends on you, your team, and your plan for the future of your project.

Choose Next.js if you (or your team) already have React knowledge and/or components, or if you know your website project or app will expand in size and/or scope beyond a simple static site in the near future. Don’t forget that Next.js is not only a static site generator. Since it uses both static and server-side generated pages, it is a hybrid framework (or meta framework). The reduction or elimination of upfront construction time makes Next.js an appealing solution for content-rich websites with many pages (100k+).

Similar to that, Next.js’s server-side rendering allows developers more control over scaling for huge e-commerce stores that depend on search and filtering to help users discover one product among thousands. It is difficult to consider another framework if your team is charged with launching a production-ready solution as quickly as feasible. Next.js will also benefit larger development teams with short timelines to scale their architecture.

Choose SvelteKit if you (or your team) already have Svelte knowledge and/or components, or if you expect your project to expand in size and/or scope beyond a simple static site in the foreseeable future. Like Next.js, SvelteKit is also a hybrid/meta framework that effectively reduces upfront construction time. Although, SvelteKit is even faster than Next.js, making it another great choice for content-rich projects. SvelteKit provides developers with greater power over scaling for extensive e-commerce stores dependent on filtering, and shorter timelines for scaling architecture.

The primary benefit of choosing SvelteKit as opposed to Next.js is the ability to work with Svelte. Surveys, like this one, show that developer satisfaction is greater with Svelte compared to React. Advantages of Svelte include writing less boilerplate code, which allows developers to focus on creating solutions, easily creating reactive variables, and eliminating virtual DOM which improves performance speed and reliability.

Choose either — or both — with CloudCannon

CloudCannon’s focus is, and always has been, making content editing and production more accessible to everyone, no matter the use case. Accordingly, we provide excellent support for both Next.js and SvelteKit, meaning we’re here for you whichever approach you choose. With our Git-based CMS, your content teams will be able to easily build pages in an intuitive visual editor, while developers benefit from our flexible approach to configuration and content management.

We’ve published a series of tutorials on Getting Set Up In SvelteKit, and we’ve also created a comprehensive overview (and video guide) of How to get started with Next.js and CloudCannon.