Nextjs vs Sapper

Indisputably, the last few decades have witnessed rapid, rather overwhelming advancements in technology and web development, in turn, is no exception. With the advent of myriad open-source libraries and frameworks, the process of web development has become incredibly fast, straightforward, and astonishingly convenient for developers. In this article, we will examine two free but state-of-the-art frameworks for stunning web development, namely Next.js and Sapper.

Before jumping into Next.js and Sapper, it is crucial that we have a basic understanding of React and Svelte. React is a JavaScript library that offers solutions to some of front-end programming’s most annoying issues, allowing developers to build dynamic and interactive web apps with ease. It’s fast, scalable, powerful, maintained by Facebook, and has a robust developer community, which eventually makes it one of the most popular frameworks. However, there are still some existing issues within React, such as not catering to users who do not have access to JavaScript or have disabled it, potential security issues, significantly extended page loading times, which ultimately harm the site's overall search engine optimization. In these cases, Next.js comes in handy as it allows some or all of the website to be rendered on the server-side before being sent to the client. Turning to Svelte, here is the definition: “Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.” Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

While Next.js is a React framework, Sapper is built on top of Svelte and both of which are open sources granted under the MIT license. However, according to the Sapper documentation, it is notable that Next.js serves as an inspiration for Sapper. Incorporating a multitude of useful tools and features, the two frameworks are trusted by developers to build fast, reliable, and powerful web applications. Both support features such as server rendering, code-splitting, TypeScript support, …however, Next.js focuses primarily on React applications whereas Sapper is on a universal scale. Nevertheless, there are also some differences between the two frameworks.

Here is a concise and easy-to-understand description of Next.js’s features from Wikipedia:

“The main feature of Next.js is its use of server-side rendering to reduce the burden on web browsers and provide enhanced security. This can be done for any part of the application or the entire project, allowing for content-rich pages to be singled out for server-side rendering. It can also be done only for first time visitors, to reduce the burden on web browsers that have yet to download any of the site's assets. The "hot reloading" feature detects changes as they are made and re-renders the appropriate pages so the server avoids the need to be restarted. This allows changes made to the application code to be immediately reflected in the web browser, though some browsers will require the page to be refreshed. The software uses page-based routing for developer convenience and includes support for dynamic routing. Other features include hot-module replacement so that modules can be replaced live, automatic code splitting, which only includes code necessary to load the page, and page prefetching to reduce load time.”

However, Next.js also has some problems as described here:

Next uses something called 'route masking' to create nice URLs (e.g. /blog/hello-world instead of /post?slug=hello-world). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms
All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an API endpoint that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your server.js file to handle these cases, but it feels at odds with the declarative approach taken for pages

Sapper offers a perfect solution for the above issues. First and foremost, Sapper is powered by Svelte so the performance is faster and your applications are lighter in comparison to Next.js. For instance, the same 'Hello World' app that took 204kb with React and Next weighs just 7kb with Sapper. Secondly, apart from pages, you can also create server routes in the src/routes directory, which eventually makes it easy to implement, for instance, a JSON API. However, Sapper is no longer being actively deployed and it is encouraged to use SvelteKit instead. You can find the comparison of major features between Svelte Kit and NextJS here (link).

In conclusion, although more features and functionalities will need to be implemented and existing issues need to be fixed, these frameworks have proven to play an indispensable role in web development with their scalability and breakneck performance. In the Stack Overflow 2021 Developer Survey, while React ranks first in terms of the most commonly used web framework (link), Svelte is the most loved web framework (link). And because Next.js and Sapper are built for React and Svelte respectively, it is undeniable that these two frameworks will gain popularity in the future.

Hope you enjoyed the article!

Sources and further documentation:
https://nextjs.org/docs
https://sapper.svelte.dev/docs/
https://en.wikipedia.org/wiki/Next.js
https://github.com/jasongitmail/svelte-vs-next
https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework
https://svelte.dev/blog/whats-the-deal-with-sveltekit
https://insights.stackoverflow.com/survey/2021#most-loved-dreaded-and-wanted-webframe-love-dread
https://insights.stackoverflow.com/survey/2021#most-popular-technologies-webframe