New JS Framework Just Dropped (Next.js Killer??)
Theo - t3․gg・2 minutes read
Tanner Lindley created a competitive fullstack react framework, prioritizing deployment on Vercel and emphasizing server-side rendering with complex data architectures, offer defer functionality for partial loading and potential for static site generation without a server. The text discusses server components, transforming streams, handling markdown files, and loading routes, comparing traditional SPAs with SSR and emphasizing the role of embedded data in content rendering.
Insights
- **Tanner Lindley created a fullstack react framework with components like react query, react charts, tan stack router, and tan stack forms, competing with Next and Remix, emphasizing the highly praised router.**
- **Nils Viny's contributions to the framework simplify bundling chaos and are showcased in projects like Thinky, highlighting the importance of understanding server components deeply for new framework development, contrasting Next's heavy investment in bundler integrations for server components.**
Get key ideas from YouTube videos. It’s free
Recent questions
What is the Tan Stack framework?
The Tan Stack framework is a fullstack react framework created by Tanner Lindley. It includes components like react query, react charts, tan stack router, and tan stack forms. The framework competes with Next and Remix, with a focus on Tanner's highly praised router. The tan.com TSR branch is being built and deployed to Vercel using the new full stack template tan stack start, incorporating Nils Viny's bundling chaos simplification.
What is the significance of server components in frameworks?
Server components play a crucial role in building new frameworks, requiring thorough research and source code analysis. While server components are not immediately planned for the Tan Stack framework due to documentation challenges, Next has heavily invested in deep bundler integrations for server components, a complex and costly endeavor. Waku, a minimal react framework by Dai, offers server components and a simple, readable codebase, emphasizing the importance of understanding server components deeply.
How does Tan Stack prioritize deployment?
Tan Stack prioritizes deployment on Vercel for its well-documented build output API. The framework, based on Tanner's router, utilizes the tan stack start template to streamline deployment to Vercel. This approach ensures a smooth deployment process and efficient utilization of Vercel's capabilities for hosting and managing the framework.
What is the role of SSR in rendering content?
Server-Side Rendering (SSR) is crucial for quickly delivering data to users, especially for highly interactive pages like dashboards that require constant updates. Tanack router, developed by Tanner, excels in complex data architectures, enabling server-side rendering of content such as blog posts fetched from GitHub. The use of defer in Tanack router allows for partial content loading initially, enhancing user experience by displaying core content promptly while streaming in additional data over time.
How does Tanner's system differ from traditional Spas and SSR frameworks?
Tanner's system introduces innovative features like the ability to defer specific promises, ensuring immediate page response while resolving additional data later, similar to Remix's functionality. The system also highlights the potential for static site generation, offering pre-rendering of multiple HTML pages without the need for a server to run on each request. This approach signifies a shift towards more server involvement in rendering content, potentially leading the way in this direction compared to traditional Spas and SSR frameworks like Next.js.
Related videos
Summary
00:00
"Tanner Lindley's Tan Stack React Framework"
- Tanner Lindley created the fullstack react framework, including react query, react charts, tan stack router, and tan stack forms.
- The framework competes with Next and Remix, built around Tanner's router, which is highly praised.
- The tan.com TSR branch is being built and deployed to Vercel using the new full stack template tan stack start, incorporating Nils Viny.
- Viny simplifies bundling chaos to provide building blocks for full stack frameworks, inspired by Bun.
- Thinky is a notable project, supported by Nils, with a strong background in the solid Community.
- Server components are not immediately planned for the framework, due to the lack of documentation for framework authors.
- Next invested heavily in deep bundler integrations for server components, a complex and costly endeavor.
- Waku, a minimal react framework by Dai, offers server components and a simple, readable codebase.
- Understanding server components deeply is crucial for building new frameworks, requiring thorough research and source code analysis.
- The tan stack start framework, based on Tanner's router, prioritizes deployment on Vercel for its well-documented build output API.
10:55
"Stream transforms, routes, and loading behavior"
- The text discusses the process of piping out HTML for various uses, with the stream being resolved once completed.
- It mentions the transforms transform stream with router add router transforms to the stream, highlighting the addition of router transforms.
- The transformed stream results in grabbing headers for assignment and returning the response.
- A get hydration overlay script context is introduced for embedding JavaScript scripts in strings to render embedded content.
- The text delves into the handling of markdown files for a blog on Local Host 3000, noting a hydration mismatch occurred.
- It details the code for routes, including the creation of file routes and components like post not found and outlet.
- The text explores the behavior of loading routes and network profiles, emphasizing background fetching and image resizing.
- It discusses the handling of versions in routes, showcasing the use of versioned TSX files for different versions.
- The text compares traditional Spas' loading process with server-side rendering, highlighting the complexities and differences in loading content.
- It concludes by contrasting the behavior of server components with traditional Spas and SSR, emphasizing the role of embedded data and JSON payloads in rendering content.
23:34
Tanner's Tanack Router: SSR Innovation Excellence
- SSR (Server-Side Rendering) is crucial for quickly delivering data to users, especially for highly interactive pages like dashboards where constant updates are needed.
- Tanack router, developed by Tanner, excels in complex data architectures, allowing for server-side rendering of content like blog posts fetched from GitHub.
- The use of defer in Tanack router enables partial content loading initially, with the rest streaming in over time, enhancing user experience by displaying core content promptly.
- Tanner's innovative approach includes the ability to defer specific promises, ensuring immediate page response while resolving additional data later, a feature akin to Remix's functionality.
- The potential for static site generation in Tanner's system is highlighted, offering the possibility of pre-rendering multiple HTML pages without the need for a server to run on each request.
- Comparisons are drawn between SSR-focused frameworks like Next.js and Tanner's approach, indicating a shift towards more server involvement in rendering content, with Tanner's system potentially leading the way in this direction.
