In the realm of web development, React has been the undisputed king when it comes to being a library for client-side rendering. On its own, it is sufficient for small to medium projects. Problems arise when projects get bigger or if there's a heavy dependency between the backend and the frontend due to which changes to APIs and the introduction of new APIs could require lots of rework to integrate them into the UI. React on its own is just a rendering library. It does not offer any built-in mechanisms to tackle the problems we face as developers(Neither should it as it is marketed as a library for rendering only). We need extra logic and packages for data fetching, client-side routing, type safety, CSS and the list goes on.
You could install all these packages individually and incorporate them by hand. Or you can concentrate on building features by getting help from a tech stack that proffers a resolution to all these hardships from the get-go. A unique stack has been gaining popularity due to its seamless nature in providing an out-of-the-box solution for all these problems.
The T3 stack consists of NextJS(A react framework with its opinionated mechanisms for doing things), tRPC( Typescript Remote Procedure Call for end-to-end type-safety), TailwindCSS for its CSS class utilities, Typescript, Prisma(An Object Relational Mapper for typescript and node js)& other packages such as React Query, Zod & Next-Auth to name a few. Just from its elements, it's clear that it is an opinionated stack that is batteries-included for most scenarios we as developers face during our development workflows. Let's go over each of these components, what they purport to do and the problems they solve:
NextJS
Next.js is a popular open-source React framework that enables developers to build powerful server-side rendered web applications with ease. NextJS offers various techniques for rendering a page based on your needs or you can even opt for client-side rendering. Additionally, It comes baked in with file-based routing thereby not requiring any kind of configuration to route pages on the client.
The biggest advantage of using NextJS is SEO. Search Engine Optimization is a technique used by search engines to index the content of a webpage. As react apps render on the client, The search engine threads receive an empty page on load. This leads to a poor SEO score. NextJS solves these issues by letting the developer control the rendering mechanism for a particular page. You could pre-render the page through either Static site generation or server-side rendering so that the page has some HTML when it is received in the browser. Some notable benefits of using next js include:
- Faster Load Times
- Built-In Code Splitting
- Dynamic Imports
- Extensibility
- Rich Ecosystem
tRPC
tRPC is a lightweight library that enables type safety between front and back ends, making it easy to develop scalable and robust backends for your Next.js and Node applications.
tRPC provides fully typesafe APIs without the need for schemas or code generation. It facilitates sharing of types between the client and server, importing only types rather than the actual server code, ensuring that none of the server code is exposed on the front end. With end-to-end type-safety, tRPC can detect errors between your frontend and backend at compile and build time.
GraphQL could seem like it almost provides the same benefits as tRPC, but it comes with excess boilerplate code and requires significant initial setup and testing. Additionally, since GraphQL is a query language for APIs, it doesn't fully utilize the benefits of TypeScript due to encapsulating the types and passing them around is not possible. Moreover, You won't be getting any static-type analysis with GraphQL queries. If you are already using TypeScript in your application, tRPC allows for the direct sharing of types between the client and server without the need for any code generation. Summarizing the benefits as follows:
- End-to-End type-safety
- Seamless export and sharing of types
- Less boilerplate compared to GraphQL.
- More robust and Typesafe compared to traditional REST APIs.
TailwindCSS
Tailwind CSS is a utility-first CSS framework that helps developers quickly and easily style their web applications. Instead of relying on pre-built components like other CSS frameworks, Tailwind CSS provides a collection of CSS classes that can be applied directly to HTML elements. These classes are designed to be modular and reusable, making it easy to create consistent styles across an entire application. Key features are:
- Efficiency: Fixing stylistic issues becomes a breeze due to the nature of tailwind utility classes.
- Consistent styling across your app.
- Media query support
- Customizability: Add your personalized CSS classes as well as overrides for the default tailwind configurations.
Prisma ORM
Prisma is a modern, type-safe ORM (Object-Relational Mapping) tool for Node.js and TypeScript that simplifies database access and management. It is designed to work with popular databases like PostgreSQL, MySQL, and SQLite.
Prisma provides an easy-to-use API for interacting with your database, allowing you to query your database using a strongly typed language, and to work with your data in a type-safe manner. This makes it easier to write safer, more maintainable code and reduces the risk of errors and bugs caused by type mismatches or other common database issues.
- Type-safe queries
- Automatic schema generation
- Flexible data modelling
- Works with multiple DB flavours
- Generate and run migrations automatically.
- Performant query engine
Scaffolding a T3 app
The fastest and premier way of generating a T3 app is to use the create-t3-app CLI tool which can be executed using either npm, yarn or pnpm. Run the following and choose the options you'd like your app to be built with as it prompts various configurations.
pnpm create t3-app@latest
This CLI tool generates the boilerplate code to wire up typescript, NextJS, Tailwind, Prisma, Zod, React Query and tRPC to work together seamlessly so you can focus on building features for your app. Here's a link to a sample demo app leveraging the t3 stack scaffolded using this tool: t3stackdemo
For more information related to this tool please visit create-t3.
Conclusion
Creating typesafe web applications has become a must in 2023. Plain old javascript-only react projects have their place and time of use but the current speed of development requires us to be proactive in our choices of the technologies we need and use to build our apps. The T3 stack provides the tools and mechanisms to achieve this goal. Be sure to use the create-t3-app CLI tool for generating a template for your next app.
