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

Что такое клиентские и серверные компоненты в Next.js?

В Next.js существует четкое различие между Клиентскими компонентами и Серверными компонентами. Такое разделение позволяет вам принимать более обоснованные решения о том, где и как обрабатывать код, что напрямую влияет на производительность и удобство использования.

Клиентские компоненты

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

Ключевые характеристики:

• Запустить в браузере (клиенте).
• Имейте доступ к таким хукам, как useState или useEffect.
• Используется для обработки динамических взаимодействий, таких как формы или кнопки.
• Необходимо, когда вам нужно быстро реагировать на действия пользователя.

Пример клиентского компонента:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    

      
Client-side Counter
      
The count value is: {count}
       setCount(count   1)}>Increment
    
  );
}

Классическим примером является счетчик, который позволяет пользователю напрямую взаимодействовать со страницей. «Использовать клиент»; Директива сообщает Next.js, что этот компонент должен выполняться в браузере.

Компоненты сервера

Серверные компоненты — это новая функция в архитектуре Next.js. Эти компоненты обрабатываются на сервере и отправляют уже обработанный HTML-код в браузер. Это уменьшает объем JavaScript, поступающего к клиенту, ускоряя начальную загрузку страницы.

Ключевые характеристики:

• Отображается на сервере.
• У вас нет доступа к API-интерфейсам браузера, таким как окно или документ, а также к хукам React, таким как useState.
• Может напрямую взаимодействовать с базами данных или внешними API.
• Оптимизируйте производительность, отправляя клиенту HTML вместо JavaScript.

Пример серверного компонента:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
Data from the Server
      
{data.message}
    
  );
}

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

Новые возможности в Next.js

Next.js уточняет взаимодействие серверных и клиентских компонентов. Вот некоторые из наиболее заметных улучшений:

1. Компоненты сервера по умолчанию

Компоненты теперь по умолчанию являются Серверными компонентами. Это означает, что ваше приложение автоматически оптимизируется, отправляя в браузер меньше JavaScript, если только вам явно не требуется Клиентский компонент.

2. Оптимизированная потоковая передача

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

3. Детальный контроль

Next.js упрощает принятие решения о том, будет ли компонент работать на сервере или на клиенте, давая вам больше контроля над оптимизацией вашего приложения.

4. Улучшенное увлажнение

Гидратация — это процесс, который превращает статический HTML-код, отправленный с сервера, в интерактивную страницу на клиенте. С Next.js гидратация становится более эффективной и избирательной и происходит только там, где это абсолютно необходимо.

Когда использовать клиентские и серверные компоненты

Используйте клиентские компоненты, когда:

1. Интерактивность пользователя: когда вам нужно обрабатывать взаимодействия, такие как формы или кнопки, которые реагируют в режиме реального времени.
2. Управление состоянием: идеально подходит для управления локальными состояниями, которые динамически изменяются, например корзиной покупок.
3. Анимация и визуальные эффекты: при использовании анимации или эффектов, которые обновляются в зависимости от взаимодействия с пользователем.

Используйте серверные компоненты, когда:

1. Запросы к базе данных: когда вам нужно получить данные из базы данных перед отображением контента.
2. Статический контент: идеально, когда контент не меняется часто и не требует интерактивности.
3. Улучшение SEO: контент, отображаемый на сервере, становится более доступным для поисковых систем, что улучшает SEO.

Пример объединения клиентских и серверных компонентов:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    

      
Product List (Server-rendered)
      

        {data.map((product: any) => (
          
{product.name}
        ))}
      
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

  return (
    

       setSearch(e.target.value)}
        placeholder="Search product"
      />
      
Searching for: {search}
    
  );
}

В этом примере сервер отображает список продуктов и отправляет его клиенту, а компонент поиска является интерактивным и управляется на стороне клиента.

Заключение

Next.js представляет собой поворотный момент в разработке веб-приложений, оптимизируя как производительность, так и удобство использования. Эффективное использование Серверных компонентов и Клиентских компонентов позволяет создавать быстрые, динамичные приложения с меньшей начальной нагрузкой.

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