Svelte Vs Nextjs

Posted on  by admin

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:.

..probably many others.

(Idyll is an outlier as it's geared towards a specific use case, rather than general purpose app development, but I think it qualifies as an example.).

These projects are all very cool, but there's a reason they haven't hit mass adoption: they want to control the entire world. You can't adopt Elm or Imba incrementally, and they need dedicated tooling far beyond just the compiler itself (e.g.

syntax highlighting, unless you like your code monochrome). In some cases (Elm stands out), interop with the JS ecosystem is less than seamless. Beyond that, they have a steep learning curve, which is hard to justify when there are so many options that are more accessible.

Loading data on the server-side

What if we had a language that was designed for building reactive user interfaces, but that also worked with your existing tools? What if you didn't need you to discard your years of experience using HTML, CSS and JavaScript, because it extended those languages?

It would extend HTML by adding JavaScript expressions in markup, directives for controlling behaviour and reacting to input, syntax for using conditions, loops and asynchronous values. It would extend CSS by adding a scoping mechanism that kept styles from clobbering each other. It would extend JavaScript by making reactivity a language primitive. How do we make reactivity a language primitive without introducing invalid syntax, or breaking the relationship with existing tooling (like TypeScript)?

Where does Remix really differ?

Styling

By hacking existing syntax:. We instrument assignments to variables and properties. We add $: statements, using the little-known label construct, that run whenever their inputs change value. We tie it all together with an opinionated scheduler. This, to me, is the best of all possible worlds: we can lean on decades of accumulated wisdom by extending well-known languages, author components in a delightfully concise and expressive way, and yet still generate apps that are bleeding-edge in terms of performance and everything that goes with it.

Objectives: fast, easy, convention over configuration, & batteries included. Overwhelming choices < providing a clear path forward. Contenders: SvelteKit (by Svelte) and Next.js (by Vercel).

I've been experimenting with both Svelte and Next.js a lot recently, I still have trouble picking one over the other 😬. Both of these frameworks bring a lot to the table, each in their own respective flavors. I'd say that rather than one beingan out-and-out winner over the other, they're more along the lines of cordial competitors in similar fields. I can't reallydeny the fact that "SvelteKit" is all I'm seeing in the "Winner" column, however.

Bottom line

At the end of the day, the choice (asalways) boils down to your development preferences, and project-specific requirements. In the React scene, Next.js and the development experience that Vercel provides are essentially unrivalled.They really are best-in-class, no doubt about that.

But as we edge closer to the 10-year mark of React's existence, I mustsay that Svelte (and SvelteKit) are a refreshing change of pace. With it's built-in features (lookin' at you,CSS animations) and familiar syntax, it just seems to pick up right where Vanilla JS fell short..

Pre-rendering pages as static site generators

Comparison of Major Features

without forcing us tolearn a whole new style of coding. 🟢 Feature Available. 🟡 3rd-party / partially available. ⛔ Feature Unavailable. 🚧 Work in Progress or RFC. ⚠️ Important Info / Warning.

MIT 2021 © Nicholas Berlette. Forked from jasongitmail. Remix, a full-stack web framework for from the creators of React Router, has gone from a paid to a free model, which is big news within both the React and the meta-framework communities. Within the past few years, the usage of the SaaS paradigm, which is the business model typically used by open source technologies in the cloud, has been solidified within the industry.

For example, React meta-frameworks Next.js and Gatsby both offer paid hosting services with additional features tailored to optimize their respective framework.

API Routing

Shopify recently released a React meta-framework called Hydrogen and has plans to release a hosting service for it called Oxygen.

Similarly, databases like Neo4j, ArangoDB, and MongoDB each offer cloud database services, making adoption and usage easier.

Eventually, the Remix creators will release an individualized, optimized platform.

Meanwhile, Vercel, the creators of the Remix competitor Next.js, has had an interesting development in hiring Svelte creator Rich Harris to work full time on SvelteKit, the primary Svelte meta-framework.

As a framework for server-side rendering, Remix aims to fulfill some of the same needs as frameworks like Next.js and SvelteKit. In this post, we’ll compare a few of their features, ranging from initiating a project to adding styling.

Let’s get started! N.B., the equivalent meta-frameworks for Vue and Angular would be Nuxt.js and Angular Universal, respectively. The new upstart framework Solid doesn’t have a meta-framework yet, but it is only a matter of time.

First, we’ll consider the commands for creating a project in each framework. When generating a Remix project, you can select a template tailored for deploying to different host services, like Netlify, Cloudflare, Fly.io, Vercel, and more.

Conclusion and Thoughts

Each comes with the documentation to make deployment a breeze. Routing determines what URL will be needed to access different pages on the website. All three frameworks use file-based routing, which is primarily what all meta-frameworks use.

The URL is based on the name and location of the file for that particular page. Below, you’ll see some examples of how different files get mapped to URLs, including an example with URL params, which define a part of the URL as a variable that you can retrieve.

Remix is built on top of React Router v6, so you can use many of the newest Hooks like useParams and useNavigate in your client-side code to handle navigation, similar to using React Router v6 normally.

/ → app/routes/index.js. /hello → app/routes/hello/index.js or app/routes/hello.js. /use_param/:id → app/routes/use_param/$id.js. / → pages/index.js. /hello → pages/hello/index.js or pages/hello.js. /use_param/:id → pages/use_param/[id].js. / → src/routes/index.svelte.

/hello → src/routes/hello/index.svelte or src/routes/hello.svelte. /use_param/:id → src/routes/use_param/[id].svelte. A major benefit of using a meta-framework is handling a lot of data preparation prior to your page hydrating, like API calls, transformation, etc.

Routing

When you use a meta-framework, you don’t have to prepare loaders or things like the useEffect Hook to deal with the asynchronous nature of these issues.

In all three frameworks, there is a function on each page we can define that will be run from the server prior to shipping the page to the user’s browser.

In Remix, we define a function called loader, which will be passed an object with things like URL params and the request data that we’lll use to prepare any data. The loader function can then return any data that the page will need, which can be retrieved in the component using the useLoaderData Hook as follows:.

Similarly, in Next.js, you can export a function called getServerSideProps. The return value can then define the props to the page component:.

Initiating a project

With SvelteKit, you define a function called load in a separately designated script block. Just like the previous examples, you can handle any API calls and data preparation, then return the data to be used as props to the page component:.

Pre-rendering pages as static site generators is probably the biggest diversion in feature sets. At the time of writing, Remix does not support pre-rendering of pages, while Next.js and SvelteKit do, meaning you can also use them as static site generators.

Remix does not currently support static site generation, but it provides a guide on using distributed cloud technologies to optimize your app.

  • If you prefer that your page is pre-rendered, simply export getStaticProps instead of getServerSideProps.
  • Otherwise, we’ll observe the same pattern as before. If you want a page to be pre-rendered in the module script blog, just set the following code:.
  • The code above will tell SvelteKit to pre-render the page instead of rendering it on each request.
  • While we can handle logic on the server side with the loader, getServerSideProps, or the load function, API keys and other data shouldn’t be in this code.

Thinking inside the box

You may still need dedicated API URLs with code that is only visible and run on the server side.

If you create a file that doesn’t export a component, then it will be treated as a resources route that can make a JSON response:.

If you create a route that exports a route function like in Express.js within the pages/api folder, it will be treated similarly to an API route:.

Legend: Emojis & Symbols

If you have a JavaScript or TypeScript file instead of a Svelte file, export a function, and it will be treated as an API route.

The name of the function will determine what method it is a response to:.

When it comes to styling, the three frameworks can differ quite a lot. Remix has a built-in way of linking traditional CSS style sheets via link tags by exporting a link function in the pages JavaScript file. If a link tag is present in the root (the template), the page’s link tag will be inserted afterward. Therefore, you don’t need to have all of your CSS present on every page to optimize how much CSS you’re sending per page:.

SvelteKit

You can use the helmet component to add link tags as well, but you can also use styled-components, JSS, Emotion, Sass, or any other CSS abstraction along with just importing standard CSS style sheets.

Svelte, like Vue, uses single-file components, so the CSS is in the components file. Remix truly has a unique and valuable difference in the way it handles forms.

Remix

In modern frameworks, we’ve abandoned the traditional functionality of forms in place of hijacking the process from within JavaScript. For those who’ve developed web applications long ago, you may remember forms that look like this:.

Next.js

Both the request method and the place where we made the request were entirely defined in the form, so there’s no need for onSubmit handlers or preventDefault. In our case, it worked because we had Perl or PHP script waiting on the other end to handle that request. Remix has a custom Form component that attempts to embrace the feel of this type of experience.

Here is a sample component from the Remix documentation illustrating the Form component in action:. When the form is submitted, it will make a POST request to /projects/new. The form will use that exported action function for handling, then redirect to the proper route.

Svelte isn’t supported by a company

What’s old is new again! If you want to bring some of that old-school, full-stack web application feel but still capture the benefits of React on the client side when needed, Remix is a strong choice for your meta-framework.

Although the lack of static pre-rendering makes it difficult to use for certain use cases, like blogs and marketing funnels, Remix is a strong addition to the toolkit for sites with lots of dynamic content. One thing is for sure: the place to look for innovations right now in the frontend framework space is really in the meta-frameworks, like Remix, Next.js, SvelteKit, Nuxt, Gatsby, Gridsome, etc.

We are even entering an era where meta-meta-frameworks exist — I’m looking at you, Blitz.js (built on Next.js).

Svelte isn’t in common use in large–scale web

Svelte just recently matured enough for enterprise–scale applications.

This means that there are not too many use cases of Svelte in the wild. Only recently Radio France added Svelte to their tech stack, just like Scott Tolinski used it for his Level Up Tutorials platform. So far, other technologies are preferred by influential players, and so Svelte remains to be battle–tested. Its future, while hopeful, remains unknown.

Conclusion

Svelte offers a lot. Praised for its size, highly efficient imperative code, as well as blazing–fast performance, Svelte might seem like a serious competitor to technologies like React or Angular.

Unfortunately, Svelte still has a long way to go. So far, it’s best to use for building single–page–applicationsfor those with lower internet connection or simple personal websites like blogs or portfolios. It’s definitely not replacing other frameworks in bigger companies’ tech stack, and Svelte developers are in very little demand.

For all its advantages, Svelte’s time to shine is yet to come. Look out, React! But don’t worry. For now, your crown stays in place.

Key Takeaways

Free e-book

Software Development Outsourcing

Download this free ebook to understand the ins and outs of software development outsourcing and use its tips to get ahead of your competition.

Download Now

Related Articles