Использование клиентских компонентов в NextJS 13
NextJS 13 представил новую функциональность, которая позволяет использовать клиентские компоненты в приложениях на React. Это открывает новые возможности для разработчиков и позволяет создавать более динамичные и интерактивные пользовательские интерфейсы.
Клиентские компоненты в NextJS 13 позволяют загружать и рендерить компоненты на стороне клиента, что улучшает производительность и опыт пользователей. Это особенно полезно для создания динамических страниц или компонентов, которые изменяются в зависимости от действий пользователя.
Для использования клиентских компонентов в NextJS 13 нужно использовать новый API – `dynamic`. Этот API позволяет динамически импортировать компоненты и загружать их на стороне клиента при необходимости.
Пример использования `dynamic` API:
“`jsx
import dynamic from ‘next/dynamic’;
const DynamicComponent = dynamic(
() => import(‘../components/DynamicComponent’),
{ loading: () =>
Загрузка…
}
);
function Home() {
return (
Динамически загружаемый компонент
);
}
export default Home;
“`
В этом примере мы импортируем компонент `DynamicComponent` динамически с помощью `dynamic` API. При первой загрузке страницы компонент будет загружен на стороне сервера, а затем будет доступен на стороне клиента без дополнительной загрузки.
Использование клиентских компонентов в NextJS 13 позволяет оптимизировать производительность приложений и создавать более интерактивные пользовательские интерфейсы. Эта функциональность открывает новые перспективы для разработчиков и делает работу с React еще более удобной и эффективной.
По планам в ближайших видео поговорить о создании API точек и использовании NextAuth.
застрял на первом варианте реализации поиска. Ругается на то что в клиентском компоненте экспортируется метадата, почему у тебя нет такого?
и еще, подскажи, пожалуйста, что за магия с reactfc? как мне себе это установить?
А как сделать loading что бы работал при поиске или вообще когда запрос или mutation
здравствуйте! благодарю за видео! подскажите, пожалуйста, на 8:53 вы развернули шорткат reactfc с помощью какого расширения?
Спасибо за видео! Но урок получился очень сырой. Нужно четко разобрать один, наиболее оптимальный пример. Остальное надо выносить в отдельное видео. Получилось много переделок, переносов и т.п. Так знания не выстраиваются в четкую последовательную цепочку.
Потратил в три раза больше времени, чтобы декомпозировать компоненты и разнести серверную и клиентскую логики.
Но в любом случае спасибо!
Михаил привет,а что за тема или шрифт у тебя?
в rtk query больше нет надобности? ну раз nextjs теперь сам хеширует данные
как понимаю, то можно было еще использовать и 4 вариант с помощью server actions(на данный момент экспериментальная версия)
Как называется плагин который автоматически импортирует все зависимости? и другие которые помогают быстро разрабатывать?
Привет, ты нашел способ как обновлять серверные компоненты? перерыл кучу инфы никто кроме как router.refresh(); ничего не советует, но это такая шляпа, весь сайт перерендеривается. Допустим пример, я добавил пост на странице добавления, иду на главную, а данные с сервака не обновляются, он тупо не идет даже в функцию где эти данные о постах фетчатся, пока не обновишь страницу. Хоть этот Link не используй, а просто тег а
Большое спасибо!
Добрый день Михаил, благодарю за видео урок, очень полезно. У меня вопрос ? возможно ли сделать это в Context Provider , без дополнительный библиотек. Я реализовала это, но вот теперь есть сомнения все ли верно я сделала. Благодарю
почему не используешь FC для компонентов, а уже в него дженериком тип пропсов? выглядит намного лучше: const Navigation: FC<Props> = ({navLinks}) => { ….
Подскажите пожалуйста. Если серверный компонент состоит из двух клиентских, это как-то оптимизирует приложение, в отличии от того чтобы сделать клиентский компонент в клиентском компоненте?
Серверный или Клиент
| | |
Клиент Клиент Клиент
А нафига вообще zustand или SWR? Нет, я понимаю в качестве развития можно изучить быстро, но нельзя было на Redux-tollkit сделать и ReactQuery?
Ааааа, понял, это специально так сделано… чтобы мы сами на Redux-tollkit и ReactQuery перекинули всё 🙂 понятно… Спасибо вам за настоящею практику!
Мне кажется для обучения тайпскрипт не нужен, как тот скрипач (если речь не идет о самом обучении TS). Если сравнить две одинаковые версии кода – вот как в примерах – с тайпскрипт и без, то в общем-то разница очень заметна. Тайпскрипт сильно загромождает код лишними сущностями, необходимости которых, на этапе обучения новым каким-то вещам, просто нет. Оно сильно заметно отвлекает от понимания концепций в целом, ибо привносит элементы вообще никак не влияющие на саму концепцию рассматриваемых технологий.
А вообще у вас очень толковые уроки. Мало таких на ютубе. Большое спасибо!
Отличный материал! Спасибо! Сижу и сквозь ролик настырно и упорно все забиваю руками попутно обращаясь к докам версел )
Спасибо за отличное видео об Next JS! Замечательный разбор серверных и клиентских компонентов!
Михаил а вы не подскажите случаем, почему в серверных компонентах дважды вызывается fetch ?
После генерации апи "для ленивых" в реакте, в некстжс работа с запросами выглядит как-то не однообразно и мало удобно, даже в рамках того же swr