Запрос React с серверными компонентами Next.js

Узнайте, как использовать TanStack Query[0] для предварительной выборки данных из Supabase в компонентах сервера React Next.js.

Если вы еще этого не сделали, обязательно сначала посмотрите часть 1:    • React Query with Next.js App Router   (Запрос React с маршрутизатором приложений Next.js)

▶ Supabase и Next.js 14: https://supabase.com/blog/supabase-is...
▶ Прочтите документацию: https://tanstack.com/query/v5/docs/re....

Представлено Тором Шаеффом (@thorwebdev https://go.thor.bio/x)

Тор из Supabase вернулся, и сегодня мы говорим о функциях PostgreSQL и показываем, как объединить сложную логику SQL в функции многократного использования в вашей базе данных.

Это в основном упрощает ваш код и делает его НАМНОГО более удобным в обслуживании, одновременно оптимизируя производительность вашего приложения за счет сокращения ненужной передачи данных.

Что вы узнаете:

✅ Введение в функции PostgreSQL: узнайте, как функции работают в PostgreSQL и как они могут инкапсулировать сложную логику, аналогичную функциям в языках программирования.

✅ Создание и использование функций. Следуйте ЛЕГКИМ пошаговым инструкциям Thor по созданию функций PostgreSQL в Supabase, включая настройку параметров и определение типов возвращаемых значений.

✅ Поддержание эффективного кода. Узнайте, как использование функций базы данных снижает избыточность кода и упрощает обновления, что значительно упрощает обслуживание вашего приложения.

Мы знаем, что у разработчиков не так уж много времени, чтобы тратить его зря!

✅ Преимущества производительности: весь этот процесс сократит время получения данных.

✅ Практическая реализация: Тор покажет вам практические примеры реализации функций, которые взаимодействуют с вашей базой данных, выполняют поиск данных и динамически обрабатывают входные данные для возврата желаемых результатов.

Если вы хотите узнать, как эффективно интегрировать функции PostgreSQL во время установки Supabase — это видео для вас.

Почему это важно: перенося сложную логику в базу данных с помощью функций PostgreSQL, ваши приложения становятся быстрее и проще в управлении.

Такой подход не только оптимизирует разработку, но и повышает производительность за счет снижения рабочей нагрузки на клиентские приложения.

Всегда хорошо, правда?!

Главы
00:00 Итог: использование React Query с Supabase в маршрутизаторе приложений Next.js
00:36 Расширенный рендеринг сервера с помощью React Query и App Router
00:58 Предварительная выборка на сервере и увлажнение на клиенте. Объяснение.
01:25 Получение данных на стороне сервера с помощью React Query и supabase-js
03:00 Рефакторинг наших запросов для использования в серверных и клиентских компонентах.
06:00 Использование запроса в предварительном запросе на стороне сервера
06:53 Создаём супабазный клиент сервера
10:35 Создайте клиентский компонент и гидратируйте предварительно полученные данные.
14:05 Установите устаревшее время для клиента запроса.
16:32 Обсуждение: Имеет ли смысл использовать React Query в серверных компонентах?

💻 Видео, которые стоит посмотреть дальше:
▶ Посмотрите все видеоролики о Next.js Supabase:    • Next.js with Supabase  .
▶ Отслеживайте запросы в приложениях Next.js:    • Monitor Database Queries in Next.js A...  .
▶ Как БЕЗОПАСНО выполнить аутентификацию и Next.js:    • The Right Way to do Auth with the Nex...  

👇 Узнайте больше о Супабазе 👇

🕸 Сайт: https://supabase.com/
🏁 Начало работы: https://app.supabase.com/
📄 Документы: https://supabase.com/docs.

🔔 Подпишитесь на дополнительные руководства и обновления функций Supabase:    / @supabase  

📱 Свяжитесь с нами:
🐙 Github: https://www.github.com/supabase
💬 Дискорд: https://www.discord.supabase.com/
🐦 Твиттер:   / supabase  
▶ Instagram (подписывайтесь на мемы):   / supabasecom  


О СУПАБАЗЕ:
Supabase — это альтернатива Firebase с открытым исходным кодом. Supabase предоставляет полную базу данных Postgres для каждого проекта с pgvector, резервными копиями, режимом реального времени и многим другим. Добавляйте и управляйте электронной почтой и паролем, беспарольными, OAuth и мобильными входами в свой проект с помощью набора поставщиков удостоверений и API.

Создайте за выходные, масштабируйте до миллионов.

#Supabase #AppDevelopment #RealtimeApps #DeveloperTools