Технические фронта Deep Dives для разработчиков Web3
25 июня 2025 г.Если вы похожи на меня-Dev Frontend, который разрезал зубы на дизайне и нашла свою свободу в крипто-инжи,-тогда вы знаете, что здание для Web3-это постоянный перетягивание каната между сложностью и элегантностью.
В этом посте я погружаюсь в три наиболее важных метода фронта, которые помогли мне масштабировать реальные DAPPS, не теряя сон (или моих пользователей).
1. Использование Zustand/jotai в производственных крипто -дапсах
Global State in Web3-это не просто пух пользовательского интерфейса-оно может представлять реальные балансы токенов, аудиторию в цепочке, соединения кошелька и интеллектуальные контрактные взаимодействия.
Почему не Редакс?
Redux - это зверь. Это излишне для худых, реактивных потребностей большинства DAPPS Web3. Zustand и Jotai, с другой стороны, дают вам управление атомным государством с гораздо меньшим количеством шаблонов.
Zustand на практике:
import { create } from 'zustand';
const useWalletStore = create((set) => ({
address: null,
setAddress: (addr) => set({ address: addr }),
chainId: null,
setChainId: (id) => set({ chainId: id }),
}));
Нет редукторов. Нет контекста спагетти. Просто композиционный, легкий состояние.
Бонус: настойчивость и промежуточное программное обеспечение
Zustand поддерживает промежуточное программное обеспечение для сохраняющихся в LocalStorage, синхронизации по вкладкам или отладки без дополнительной настройки.
Jotai еще более атомный-может быть, когда вы хотите изолировать отдельные состояния (например, конкретные значения токенов или флаги нагрузки с компонентами).
2. SSR & Caching в next.js для блокчейнов
Давайте будем реальными: большинство разработчиков Web3 пропускают SSR. Они шлепают кучу эффективных эффектов и называют это днем. Но если вы хотите SEO, более быстрое время до первого байта или устойчивого UX для неавтотифицированных пользователей, на серверной стороне вопросы рендеринга.
Общие ловушки:
- Токен балансирует только извлеченные на сторону клиента? До свидания с мгновенной обратной связью.
- Зависимый от кошелька мельница пользовательского интерфейса при загрузке страницы? UX Killer.
Решение: гибридный рендеринг + кэширование
Вот что работает для меня:
- GetserversIdeProps для получения общих данных (например, токенов, показателей протоколов)
- SWR на клиенте, чтобы увлажнить и переоценить данные, специфичные для кошелька
- Кэширование края с использованием заголовков Vercel или пользователей
export async function getServerSideProps() {
const prices = await fetchTokenPrices();
return {
props: { prices },
};
}
Помните: данные блокчейна не меняются каждую секунду. Кэшируйте это мудро, повторно заводим его быстро.
3. Использование GraphQL в приложениях Web3 с данными живого токена
Отдых - реликвия. GraphQL-это то, как вы приручите хаос в цепочке и предлагаете свой пользовательский интерфейс именно то, что ему нужно.
Почему graphql?
- Мелкозернистые запросы = меньше перевышения
- Объедините несколько контрактов/подграфов в один слой пользовательского интерфейса
- Чистые типинг при использовании codegen (например, graphql-codegen)
Инструменты, которые я использую:
- Протокол графика (API -интерграф)
- Клиент Аполлона для кэширования и реактивных обновлений
- Сацума/подпогласы для запроса по нескольким цепям
Пример:
query GetTokenHolders($id: String!) {
token(id: $id) {
id
symbol
holders(first: 10) {
id
balance
}
}
}
Соедините это с использованием Quysecer в Аполлоне, и у вас есть данные токена в реальном времени, введенные в отзывчивый, с учетом кэша пользовательского интерфейса.
Последние мысли: постройте так, как будто это новый интернет
Web3 не является тенденцией - это переписывание того, как взаимодействуют ценность, идентичность и код. Но если фронт отстой, никого не волнует, что делает ваш протокол.
Zustand дает вам композицию. Next.js дает вам скорость. GraphQL дает вам контроль. Объедините их, и вы можете создать опыт, который ощущается как магия, даже когда ваши пользователи не знают, что они только что подписали транзакцию или мостовые активы в цепях.
Дизайн как художник. Код как инженер. Думай как мятежник. Это фронтальный крипто -стек.
Оригинал