TanStack Start in 100 Seconds

Key Takeaways

The Tanstack start, a DX optimized full stack framework that comes with full document serverside rendering, streaming, server functions, and bundling built by Tanner Lindsay, the man known for brutally frame mogging Nex.js while it was busy gesture maxing AI empowerment. React was originally created in 2013 as a way to let developers at Facebook, who had been labeled as gifted children when they were young, feel better about themselves after being forced to write jQuery all day. >> That's too easy. Its goal was to simplify the complexities of managing state in front-end applications. In 2016, it then escaped the browser with the release of Verscell's Nex.js, a zero config framework built on top of React that offered server rendering out of the box. At first, it was pretty nice. It taught millions of boot camp grads what a server was and empowered them to ship less JavaScript to the client. But over time, as React itself went through its own identity crisis, so did Next. This eventually led to some breaking changes, some pretty rough security vulnerabilities, and just overall bad vibes for the framework. Then last year, Tanner came along and said, "What if we could have a React framework that was type safe server first, highly performant, but without all the heavy abstractions?" So that's what he built and it's called Tanstack Start. Creating a new project is simple. Just run this command. From there, you can choose from a bunch of different configuration options to start out with. But once you do that, you'll have an app that comes out of the box with VEST for testing, the Tailwind for styling, tanstack router for routing, and TypeScript with end toend type safety. If you have logic that should only run on the server, like if you want to connect to a database or work with the file system or environment variables, you can create a server function that can be used anywhere in your app and it'll maintain type safety across the network. And because start is built on Tanstack router which uses file system based routes if you want to add a new route to your app. You just create a new file in the routes directory. From there you can also specify any data that route needs using a loader. And that data will be available to the route before it's rendered. And if you want to create an API route for handling raw HTTP requests, you can do that with the same create file route API but with the server property. This has been tan stack start in 100 seconds. If you want to see more videos like this, let me know what you want [music] to learn about next in the comments. Thanks for watching and I will see you in the next one.