Введение: улучшение Next.js с помощью серверных компонентов React

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

В этом сообщении блога мы рассмотрим, как использовать серверные компоненты React и действия сервера в Next.js, с практическими примерами и фрагментами кода.

Что такое серверные компоненты React?

Серверные компоненты React (RSC) — это новый тип компонентов, представленный React, который позволяет отображать компоненты на сервере. Этот подход помогает уменьшить объем JavaScript, отправляемого клиенту, и повышает производительность за счет перегрузки работы по рендерингу на сервер.

Преимущества серверных компонентов React

• Улучшенная производительность: при рендеринге на сервере вы сокращаете объем клиентского JavaScript и сокращаете время загрузки.
• Улучшенный пользовательский интерфейс: более быстрая загрузка начальной страницы и более плавное взаимодействие.
• Упрощенная выборка данных: извлекайте данные на сервере и передайте их непосредственно компонентам.

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

Вот базовый пример серверного компонента React в приложении Next.js:

// app/components/UserProfile.server.js
import { getUserData } from "../lib/api";

export default async function UserProfile() {
  const user = await getUserData();

  return (
    

      
{user.name}
      
{user.email}
    
  );
}

В этом примере UserProfile — это серверный компонент, который извлекает пользовательские данные на сервере и отображает их.

Что такое действия сервера?

Действия сервера — это функции, которые запускаются на сервере в ответ на действия пользователя или другие события. Они позволяют вам обрабатывать логику на стороне сервера, например отправку форм или запросы API, непосредственно из ваших компонентов React.

Преимущества действий сервера

• Упрощенная серверная логика: пишите серверный код непосредственно в своих компонентах.
• Повышенная безопасность: обрабатывайте конфиденциальные операции на сервере, а не на клиенте.
• Повышение производительности: сократите количество JavaScript на стороне клиента и перенесите задачи на сервер.

Пример: использование действий сервера

Вот как вы можете использовать действия сервера в приложении Next.js для обработки отправки форм:

// app/actions/submitForm.js
import { saveFormData } from "../lib/api";

export async function submitForm(data) {
  await saveFormData(data);
  return { success: true };
}

// app/components/ContactForm.js
"use client";

import { submitForm } from "../actions/submitForm";

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await submitForm(Object.fromEntries(formData));
    if (result.success) {
      alert("Form submitted successfully!");
    }
  };

  return (
    

В этом примере submitForm — это серверное действие, которое обрабатывает данные формы на сервере, а ContactForm — это клиентский компонент, который использует это действие для обработки отправки форм.

Заключение: использование современных функций для улучшения веб-приложений

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

При создании приложений Next.js рассмотрите возможность включения серверных компонентов React и действий сервера, чтобы в полной мере воспользоваться преимуществами последних достижений в веб-разработке.

Удачного программирования!

?✨