Заметки про React: “Два пути к двум 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/