Начало работы с компонентами React Server: пошаговое руководство
programming react next.js react-tutorial

Начало работы с компонентами React Server: пошаговое руководство

22 июня 2023 г.

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

Что такое компоненты React Server?

Компоненты React Server — это компоненты React, которые запускаются на сервере и передают свои выходные данные клиенту. Они могут получать доступ к данным непосредственно из серверной части, не отправляя их клиенту и не связывая их с кодом JavaScript. Это уменьшает размер сети и пакета, что ускоряет загрузку и отрисовку.

Компоненты React Server имеют специальное расширение файла: .server.js. Они могут использовать только модули Node.js или другие серверные компоненты в качестве зависимостей и не могут использовать какие-либо API-интерфейсы браузера или функции на стороне клиента. Они могут отображать другие серверные компоненты, клиентские компоненты или общие компоненты.

Клиентские компоненты — это обычные компоненты React, которые запускаются в браузере и имеют расширение файла .client.js. Они могут использовать любые API-интерфейсы браузера или клиентские функции, а также отображать другие клиентские компоненты или общие компоненты.

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

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

Как работают серверные компоненты React?

Компоненты React Server работают с использованием специального модуля визуализации, который передает клиенту вывод серверных компонентов в формате, подобном JSON. Затем клиент анализирует поток и отображает соответствующие клиентские компоненты с помощью ReactDOM. Сервер и клиент обмениваются данными, используя протокол, поддерживающий потоковую передачу, например HTTP/2.

Процесс рендеринга компонентов React Server состоит из трех этапов:

  1. Визуализация сервером. Сервер визуализирует серверные компоненты и отправляет их вывод клиенту в виде потока данных. Выходные данные включают информацию о том, какие клиентские компоненты необходимо отображать в браузере, а также их свойства.
  2. Клиентский рендеринг. Клиент получает поток данных с сервера и визуализирует клиентские компоненты с помощью ReactDOM. Клиент также отслеживает, какие серверные компоненты были обработаны, а какие еще ожидают обработки.
  3. Сверка. Клиент сравнивает визуализированный вывод серверных компонентов с ожидаемым выводом на основе их реквизитов. Если есть какое-либо несоответствие, клиент запрашивает повторную визуализацию этих серверных компонентов с сервера.

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

:::

Как использовать компоненты React Server в Next.js?

:::информация Next.js – это популярная платформа для создания приложений React, поддерживающая как статическую, так и динамическую отрисовку. Next.js также поддерживает компоненты React Server в качестве экспериментальной функции, начиная с версии 13.

:::

:::информация Чтобы использовать компоненты React Server в Next.js, нам нужно включить их в нашем файле next.config.js:

:::

module.exports = { 
  experimental: {
    appDirectory: true,
  },
};

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

:::информация Далее нам нужно установить некоторые зависимости, которые требуются для компонентов React Server:

:::

npm install react@experimental react-dom@experimental
npm install @react-server/components @react-server/transport-webpack

Эти пакеты содержат компоненты React Server Components рендерер, протокол потоковой передачи и плагин webpack для объединения нашего кода.

Затем нам нужно создать файл app/pages/_app.server.js, который будет нашей точкой входа для нашего рендеринга на стороне сервера:

import { pipeToNodeWritable } from "react-dom/server";
import { createFromFetch } from "@react-server/components"; 

export default function handleRequest(req, res) {
  const manifest = require("../../.next/server-components-manifest.json"); 
  const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;

  const stream = createFromFetch( 
    fetch(url, {
      headers: req.headers, 
      method: req.method, 
      body: req,
    }),
    manifest
  );

  pipeToNodeWritable(stream, res, () => {});
}

n В этом файле используется функция createFromFetch из @react-server/components для создания потока данных от серверных компонентов на основе URL-адреса запроса и файла манифеста. генерируется Next.js. Затем он использует функцию pipeToNodeWritable из react-dom/server для отправки потока объекту ответа.

Затем нам нужно создать файл app/pages/_app.client.js, который будет точкой входа для рендеринга на стороне клиента:

import { hydrateRoot } from "react-dom";
import { createFromFetch } from "@react-server/components"; 
import App from "./_app";

hydrateRoot(
  document.getElementById("_next"),
  <App
    pageProps={{}} 
    Component={createFromFetch(
      new Response(document.getElementById("_next_data_").textContent, { 
        headers: { "Content-Type": "application/json" },
      })
    )}
  />
);

Этот файл использует функцию hydraRoot из react-dom для рендеринга клиентских компонентов в существующее дерево DOM. Он также использует функцию createFromFetch из @react-server/components для создания потока данных от серверных компонентов на основе тега сценария, который содержит исходные данные, отправленные сервер.

n Наконец, нам нужно создать файл app/pages/_app.js, который будет нашим общим компонентом для упаковки наших страниц:

import React from "react";

export default function App({ Component, pageProps }) { 
  return <Component {...pageProps} />;
}

Этот файл просто отображает компонент, соответствующий текущей странице, вместе со всеми переданными ему реквизитами.

Теперь мы можем создавать наши страницы с помощью компонентов сервера React.

Например, мы можем создать файл app/pages/index.server.js, который будет нашей домашней страницей:

import React from "react";
import { useFetch } from "@react-server/components";
import Header from "../components/Header"; // shared component 
import Footer from "../components/Footer"; // shared component
import PostList from "../components/PostList.server"; // server component

export default function Home() {
  const posts = useFetch("/api/posts"); // fetch data from the backend

  return (
    <div>
      <Header /> {/* render a shared component */}
      <h1>Welcome to React Server Components</h1>
      <PostList posts={posts} /> {/* render a server component */}
      <Footer /> {/* render a shared component */}
    </div>
  );
}

Этот файл использует хук useFetch из @react-server/components для извлечения данных из серверной части с использованием относительного URL-адреса. Затем он отображает общий компонент (<Header />), серверный компонент (<PostList/>) и другой общий компонент (< ;Нижний колонтитул />). Компонент PostList может отображать другие серверные или клиентские компоненты по мере необходимости.

Мы также можем создать файл app/pages/[id].server.js, который будет нашей динамической страницей для отображения одного сообщения:

import React from "react";
import { useFetch } from "@react-server/components";
import Header from "../components/Header"; // shared component 
import Footer from "../components/Footer"; // shared component
import PostDetails from "../components/PostDetails.server"; // server component

export default function Post({ id }) {
  const post = useFetch(`/api/posts/${id}`); // fetch data from the backend

  return (
    <div>
      <Header /> {/* render a shared component */}
      <PostDetails post={post} /> {/* render a server component */}
      <Footer /> {/* render a shared component */}
    </div>
  );
}

В этом файле используется хук useFetch из @react-server/components для извлечения данных из серверной части с использованием динамического URL-адреса на основе параметра страницы. Затем он отображает общий компонент (<Header />), серверный компонент (<PostDetails/>) и другой общий компонент (< ;Нижний колонтитул />). Компонент <PostDetails /> может отображать другие серверные или клиентские компоненты по мере необходимости.

Заключение

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

:::подсказка Компоненты React Server все еще являются экспериментальной функцией и могут измениться в будущем. Однако они предлагают многообещающий способ создания современных веб-приложений с помощью React.

:::

Источники

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE