%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/react
## What is It?
[TanStack Router | React Router, Solid Router, Svelte Router, Vue Router](https://tanstack.com/router/v1)
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://tanstack.com/router/v1/docs/quick-start")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://tanstack.com/router/v1/docs/quick-start" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">Quick Start | TanStack Router Docs</div>
<div class="nifty-link-card-description">
If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router using both file-based route generation and code-based route configuration: Using File-Based Route Generation + Vite
</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://tanstack.com/favicons/apple-touch-icon.png">
https://tanstack.com/router/v1/docs/quick-start
</div>
</div>
</a>
</div>
%% run end %%
> I am waiting for the
## How to Use It?
## Alternatives and Comparisons
[[remix]] react router is its alternatives. Tanstack router has some advantage.
1. ✅ extremely powerful devtool
2. ✅ completely typesafe
3. ⛔ client side mostly, SSR is a bit difficult because the doc is not trivial
This is how tanstack router SSR is done using `loader`. see [External Data Loading | TanStack Router Docs](https://tanstack.com/router/v1/docs/guide/external-data-loading#using-loaders-to-ensure-data-is-loaded). this example is not entirely right, it is just a demo.
```tsx
let postsCache = []
export const Route = createFileRoute('/posts')({
loader: async () => {
postsCache = await fetchPosts()
},
component: () => {
return (
<div>
{postsCache.map((post) => (
<Post key={post.id} post={post} />
))}
</div>
)
},
})
```