Sep 11, 2024

Deep Dive On Solid Start

Explore Solid Start, a flexible full-stack framework for Solid by Attila. Learn about its modular design, efficient serialization with Cevo, and cross-platform capabilities with Tauri.

MeetUp

FullStack

Next.js

Author

Aditi DixitContent Writer

Book a call

Table of Contents

I’m Attila Fassina, Developer Relations Lead at Crab Nebula and part of the Solid DX team. You can also find me as a Google Developer Expert. I like to make things simple, and naming things is hard—so I’ve created shortcuts to my website and social media if you want to reach out, ask questions, or talk shop after the session.

Alright, let’s dive into something exciting—Solid Start. I’m going to walk you through how it works, what pieces come together to create this framework, and why it’s such a game-changer for the Solid ecosystem. For those unfamiliar, Solid Start is a full-stack framework built specifically for Solid—no, it’s not React. It’s something different, something more tailored for high performance and flexibility, much like Next.js or Remix but with a unique twist.

What Sets Solid Start Apart: The Power of Flexibility

Solid Start, while similar to frameworks like Next.js, Remix, or Nuxt, is built a little differently. It’s not just another framework that glues everything together—Solid Start is a "meta framework." What does that mean? Essentially, it’s a framework made of modular components that you can disassemble and reassemble at will. Think of it like Lego—you can use the default pieces to create something functional, but you’re also free to take it apart and tailor it to whatever you want.

Many frameworks out there glue these Lego pieces together in a way that doesn’t let you separate them. That can take away some of the fun and flexibility, right? The beauty of Lego is in its ability to be whatever you want it to be, and Solid Start follows that same philosophy. With great defaults and enough flexibility, Solid Start lets you build the framework that suits your needs. In other words, your opinions are welcome here. You have the freedom to configure and deploy things exactly how you want them.

Breaking Down Solid Start’s Four Fundamental Pieces

To really understand what Solid Start is all about, we need to break down the core components that make it a full-stack framework. First, we have the core framework, which includes the bundler, the serializer, and the server. These three elements make Solid Start a true full-stack framework. Without them, there’s no Solid Start. Second, we have Solid itself as a rendering library that provides the user interface for your app. The third key piece is Solid Router, which manages client-side logic and data loading. This is the component that you might want to switch out if you prefer a different router, though that requires some additional bindings.

And finally, we have Solid Meta, which handles meta tags and SEO for your app. These four components come together to create the full-stack experience that makes Solid Start so unique and flexible. Now, let’s dive deeper into how all of these pieces interact and work together.

Cevo: The Magic Behind Efficient Serialization

One of the most exciting aspects of Solid Start is how it handles serialization with Cevo. Cevo connects all of your server-side functions—the RPC layer of your framework—and serializes them before sending the data to the client. What’s interesting is that Cevo caches everything by reference, which means that even if you have three different functions pulling data from three different endpoints, Cevo ensures that the data is deduplicated. This way, you’re not wasting bandwidth by sending the same data multiple times.

But that’s not all—Cevo also supports streaming, which means it can serialize readable streams, promises, and even async generators. This makes it incredibly efficient at handling large data sets and complex operations. Let’s see a demo of how this works.

A Real-Time Demo: Streaming Data with Cevo

We have a simple webpage with a button. When I click “start,” it opens a stream connection to my server and begins sending lines of text from the poem “The Raven,” one line at a time. As you can see in the network tab, the size of the payload keeps increasing. These lines don’t exist in the client—they’re being streamed from the server in real-time.

The cool thing here is that Solid Start, through Cevo, makes this possible with minimal setup. On the client side, we’re using a signal instead of state, which updates each time a new line comes in. The server-side logic is even more interesting. We use an asynchronous generator that sends one line of the poem every 500 milliseconds. That’s how easy it is to create real-time streams with Solid Start.

Vinci Takes the Lead for Flexible Deployment

Now, let’s talk about Vinci, another key component of Solid Start. Vinci is essentially a wrapper around Vite and Nitro. Most of you are probably familiar with Vite—it’s a bundler and dev server that many frameworks use. Nitro, on the other hand, is a Node.js runtime developed by the Nuxt.js team. It’s platform-agnostic, which means it works across different environments. Vinci ties these two tools together, creating a seamless environment for Solid Start to thrive in.

The best part? Vinci lets you configure your app’s deployment in just a few lines of code. You can switch between around 30 presets for deployment, whether you’re targeting Netlify, Cloudflare, or another provider. Vinci also supports pre-rendering. You can tell it to crawl all the links on your site at build time, pre-render them, and cache the results for faster load times. Vinci ensures that your app is ready to deploy wherever you need it to go.

Solid’s User Interface Shines with Flexibility

The user interface in Solid Start is powered by Solid itself, as you might have guessed. Solid Start also comes with a file-based routing system, similar to what you’d find in Remix, Next.js, or Nuxt. You can create routes based on your file structure, with options for dynamic routes, named routes, and even catch-all routes. Solid Start makes it easy to organize your app’s routes while keeping things flexible.

What’s even better is that Solid Start encourages parallel data loading, which avoids the waterfall effect that can slow down apps. By lifting your external data loading to the server, Solid Start can handle everything efficiently. The framework is practically allergic to waterfall patterns, ensuring your app runs as smoothly as possible.

Cutting-Edge Features: Single-Flight Mutations

Solid Start also introduces a concept called single-flight mutations. In most frameworks, when you submit a form, you’ll see two requests—one for the navigation and one for the data. But Solid Start optimizes this process. It knows what data has changed and only sends what’s necessary, so you get everything done in just one request. This reduces the load on your server and improves the user experience by speeding up interactions.

Efficiency at Its Best!

In Solid Start, you’ll see only one request. That’s because the framework is aware of the changes and sends only the minimum required data, making everything more efficient. This is just one example of how Solid Start optimizes your app’s performance.

Building Across Platforms: Web, Desktop, and Mobile in One Codebase

One of the most powerful aspects of Solid Start is its versatility. Using Tauri, a Rust-based framework, you can build for the web, desktop, and mobile—all from the same codebase. Tauri connects your web app to system binaries, rendering it within the system’s web view. What’s even more exciting is that by changing just one file, you can configure your app to deploy across different platforms, whether it’s web, desktop, or mobile.

This flexibility allows you to build cross-platform applications without duplicating effort. The only limitation right now is that server-side rendering isn’t supported in Tauri, but other than that, it works seamlessly across different environments.

Solid Start Recap: Primitives, Flexibility, and Power

So, let’s recap. Solid Start offers powerful primitives, great defaults, and the flexibility to customize every aspect of your app. Whether you’re building a complex full-stack app or deploying across multiple platforms, Solid Start gives you the tools to work efficiently. The point of this talk isn’t to convince you to switch to Solid Start, but to help you understand how frameworks like this can change the way you build apps.

The ability to mix and match components, optimize data fetching, and deploy across platforms with ease is a game-changer. If any of these features interest you, feel free to come chat with me. I’m happy to help and answer any questions you may have. Thanks for being a great audience!

Watch the full video here. ⬇️