#T3 STACK INSTALL#
#T3 STACK CODE#

While this may sound a bit complicated, it actually results in a great user experience, since you can partially load data to improve performance, while still maintaining SEO. If you navigate to a page via next/link it will run on the client. For example: if you enter the URL and hit enter it'll run on the server. Contrary to getServerSideProps getInitialProps runs on client and server, depending on how you've reached a page. If ssr is enabled, tRPC will use getInitialProps (which happens to be a data fetching method, just like getServerSideProps) in order to execute queries before the page is rendered. Since this post is about my experience with tRPC and not a detailed explanation of how it works, I'll try my best to summarize this is a briefly as possible:

The real key here was to learn about Next.js's getInitialProps and how it works. Understanding this took a decent amount of time and research. So, it's disabled by default but recommended to enable it? What? But, ironically, the 'recommended' example app even enables ssr.

Since the Quickstart docs state: We highly encourage you to check out the example apps to learn about how tRPC is installed in your favorite framework. Does SSR no longer work when using tRPC? Why is it disabled by default? One of the reasons I like to use Next.js is SSR?! From the documentation: To enable SSR just set ssr: true in your createTRPCNext config callback.Īlternatively, you can leave SSR disabled (the default) and use SSG Helpers to prefetch queries in getStaticProps or getServerSideProps.Īgain, it might be on me, but I had no idea what that meant. One thing that really confused me was the documentation about SSR. It surely works this way - it's just a bit annoying. It might be due to the fact that I initially didn't really understand what this library was all about - but the Quickstart certainly didn't help with this in the first few paragraphs.Īs mentioned before I ultimately ended up installing everything and just figuring out what every component is for by myself.

#T3 STACK INSTALL#

Looking at the Quickstart documentation the first block looks like this: Screenshot from the v10 tRPC Docsĭo I need to install a package to call procedures on client? Do I need react-query? I mean, I've worked with and love react-query - but do I need it here? If so, why? Unfortunately - in my opinion - the documentation doesn't give all the answers you might want to see. What's a router? What are procedures? What's the context for? And so on. Learning curve & documentationĪfter I decided to give it a try it was time to dive into the documentation to get a better understanding of all its concepts. I'm not sure if I'd have done that without all the hype surrounding it - but retrospectively I can only recommend this approach if you're struggling in the beginning. I ultimately solved this problem by simply playing around with it, which helped me to get a real understanding of this library. Many of my developer colleagues had no real idea about what all of this is about - and even people like Theo, the guy behind the T3 stack which is built upon tRPC, had some problems with this at first.

#T3 STACK CODE#

The website also shows some code that makes a lot of sense by now - but back when I first encountered it just wasn't enough to grab the gist of this library.Īnd I'm not the only developer that was confused about it at first. 'Fast' is an argument that is thrown around in this business like corruption scandals in the Austrian government and 'break nothing' honestly didn't appeal like the absolute game changer because, realistically, things should not break before tRPC already, right? End-to-end typesafe APIs made easy.' - maybe I'm just a little dumb, but I had no idea what this means at first glance and I've been doing this web stuff for quite some time now. The website states 'Move Fast and Break Nothing. I remember when I first heard about tRPC on Twitter I initially had no idea what it was all about. Until today I've only used it for (multiple) private side projects. I've never used tRPC standalone and exclusively used it in conjunction with Next.js. This was post was written at the time of tRPC v10.