TanStack Changed How I Think About Functions.

So, I have been using tak start for

quite a bit right now. Actually, I've

been using it since it was still in beta

in production and I've been very happy

about it. But there's one thing that to

be honest kind of bugged me in the

beginning when I was just getting

started using it. And that is the whole

code execution model behind Tanstack

Start. If you're new to my channel or

you're just unfamiliar with Tanstack

start, it's just a full stack framework

that allows you to create web apps

really easily. It uses tensac router

under the hood, which means for those

who have been using tensac router to

create client side applications. This

should feel extremely familiar and I

would really advise you to use this

framework. But actually what I wanted to

talk to you about in this video is the

whole code execution model in task start

which is a bit confusing when you're

just getting started. So the whole idea

behind the code execution model in task

start is that the functions that you

write run both on the server and on the

client side which is of course something

that you normally don't expect from your

framework. You normally have a clear

separation between where your code runs.

It's either on the client or on the

server. And here it runs on both ends.

And this is what they call isomorphic.

So the code is isomorphic by default.

Every function that you write runs on

the server as well as on the client. Of

course, you have the possibility to

separate these two environments. You can

have or you can use create server only

function which allows you to run a

function that can only run on the server

and it would throw an error on the

client. You can also create a function

using create server function. I think I

should zoom in a little bit.

And this one just creates a remote

procedure call. So on the server, this

runs normally, I suppose, but on the

client. So this is going to make an

asynchronous request to the server. This

is going to run on the server and the

result is going to be delivered to the

client. And for you as a user, all of

this happens under the hood. It's all

invisible to you, but it's just very

useful. You don't need to create an API

endpoint, anything like that. It's all

done under the hood. Then there's also

the possibility of creating clientonly

functions by using this create

clientonly function. So where things get

most interesting is when we're talking

about this create isomorphic function.

Uh this allows you to create a function

that behaves differently on the server

and the client. This is right now a very

simple example. get device info and on

the server this is the value that you're

going to get and on the client this is

the function that's going to run.

Obviously you may think that you can

achieve the same thing by just checking

if window is undefined but the advantage

of using create isomeorphic function. I

mean the first advantage is that it's

tree shakable. So on the client you

don't receive the code of running the

server function and vice versa. So

that's obviously really important. So

that way you don't actually leak any

environment variables from the server to

the client. And the second advantage is

that you get to do some really cool

things that honestly I just never

thought of before. So what I did is to

ask this question on Twitter. What are

your use cases for testax isomorphic

functions? My first idea was to use them

for superbase. Basically if you have

some kind of loader in a route and

you're going to have different superbase

clients on the server and on the client.

This is obviously useful if you want to

set some SEO data. So you want to load

some data on the server. So you can set

the title and the description and even a

picture for every route. So you can use

this create isomeorphic function to just

define an environment aware superbased

client which is just so useful. There's

another example here coming from

documentation and this one shows how you

can implement some kind of caching. So

on the server you can create files and

save some data inside of them and on the

client you can use local storage and the

responses here are actually really

interesting. One of them is inside the

official documentation of RPC they're

using this create isomorphic function to

configure the RPC link and this is for

the browser and server side rendering

environment. So on the client you're

going to get this URL and on the server

you're going to get this one. Another

one that I found interesting is from

Coner app and here they're using it to

get the user agent. So on the server you

are grabbing the user agent from the

request headers and on the client you're

just grabbing navigator user agent.

Pretty cool. Since I just started

working with these isomorphic functions

I think I'm still going to figure out

some other cool ways we can use them in

real life applications. If you have any

ideas, please drop them in the comments.

And by the way, if you want me to cover

more T stack start uh topics, just let

me know in the comments and I will

gladly make more videos about it. Thanks

again for watching and see you in the

next