Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Два пути к двум React
Интересные мысли о разном видении интеграции современных функций React в Next.js и TanStack Start.
✨ Next.js – одна из самых популярных библиотек для React. С App Router сервер стал основным местом для вычислений в приложении. Вся основная логика по рендеру перешла в серверные компоненты. Клиентские компоненты нужны только для интерактивности.
Когда сервер является основным в React приложении, то лучшим способом уменьшения вычислений и ускорения работы приложения является кэширование. Next.js поэтапно внедряла кэширование. Например, в бете App Router в Next.js 13 внедрила автоматическое кэширование fetch, потом поменяла поведение в Next.js 15 и внедрила директиву ”use cache”.
✨ TanStack Start – это вариант, когда надо внедрить серверные компоненты, но не хочется делать поворот на 180 градусов относительно того, как создают и структурируют приложение. TanStack Start добавляет поддержку серверных фич, таких как SSR и гидратация, стриминг, серверные функции и другие. Серверные компоненты пока не поддерживаются. Под капотом используется TanStack Router и vinxi. Вкратце, TanStack Router для клиентского роутинга, а TanStack Start для фулстек роутинга. Пример кода роутера:
// app/router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen' // Этот файл генерируется автоматически
export function createRouter() {
const router = createTanStackRouter({
routeTree,
})
return router
}
declare module '@tanstack/react-router' {
interface Register {
router: ReturnType<typeof createRouter>
}
}
Пример файла для запуска сервера:
// app/ssr.tsx
/// <reference types="vinxi/types/server" />
import {
createStartHandler,
defaultStreamHandler,
} from '@tanstack/start/server'
import { getRouterManifest } from '@tanstack/start/router-manifest'
import { createRouter } from './router'
export default createStartHandler({
createRouter,
getRouterManifest,
})(defaultStreamHandler)
Пример файла для гидратации на клиенте:
// app/client.tsx
/// <reference types="vinxi/types/client" />
import { hydrateRoot } from 'react-dom/client'
import { StartClient } from '@tanstack/start'
import { createRouter } from './router'
const router = createRouter()
const root = document.getElementById('root')
if (!root) {
throw new Error('Root element not found')
}
hydrateRoot(root, <StartClient router={router} />)
https://bobaekang.com/blog/two-ways-to-the-two-reacts/
26 · 3.2K ·