Next 迁移到 Tanstack Start

起源

自从升级到 Next 16 ，每次本地开发的时候，CPU 占用率直接飙升（我都不用打开监视，声音都能判断出来...）。 打包的时候慢的不行，至少要一分钟。

你们不是用 Rust 重写了 Webpack 吗？ 怎么会越来越卡了... 不得已我只能把打包器降级到 webpack 了。

我的电脑是 19 款的 iMac ，虽然不怎么行了，但是开发个网页都不行了吗？

最近正好流行迁移到 Tanstack Start，我也赶一下时髦。

过程

用比较少篇幅介绍下迁移的过程，毕竟官网、AI 帮了不少忙...

路由切换

Next 的 App Router 迁移到 Tanstack Router ，全靠 AI 了。

链接、导航

Tanstack Start 的 Link 和 search 都是有类型的，这一点很好。

'use client'

狗屎全都去掉。

Server Action

原来用过，调试起来很困难。而且搞不懂什么时候是server/client。

Tanstack Start 里有个类似的概念是 createServerFn 。

虽然也可以用 /api 的形式编写接口，但这样写比较直观，而且返回的数据都是有类型的。

import { createServerFn } from '@tanstack/react-start'

// GET request (default)
export const getPostData = createServerFn().handler(async () => {
  return [{ message: 'Hello from server!' }]
})

// In a route loader
export const Route = createFileRoute('/posts')({
  loader: () => getPostData(),
})

function PostList() {
  const posts = Route.useLoaderData();

  // or 
  const posts = useQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })
}

编译器会把 createServerFn 替换成 RPC 调用（有一些陷阱需要避免，参考文档）。

i18n

让 AI 写了个

结果

迁移完以后开发和打包都快的飞起，打包现在就几秒钟... 我的 19 iMac 又可以再战几年了，早知道就早点换了。

我把牛马帝阮的原站点和新站点都放出来，可以对比下。

之后打算把脚手架从 Next 迁移到 Tanstack Start 了。