React - Серверные компоненты - Введение и начальные мысли

Незадолго до Рождества команда реагирования дала ранний рождественский подарок, компоненты сервера ak.a Размер Zero Bundle компоненты. Давайте посмотрим на то, что они есть, то, что они приносят к столу и мои мысли.

Прежде чем мы начнем, просто хочу, чтобы вы знали, что лучший ресурс для более глубокого понимания, очевидно, будет RFC и ВВЕДЕНИЕ Видео из команды реагирования. Я собрал это вместе для людей, которые находятся на свете вовремя и поделиться своими мыслями и пониманием.

Вы можете найти весь источник для этого поста здесь Отказ Это вилка фактического демократического репо из команды RACT. Я только что упростил компоненты для более легкого понимания. Все кудос идут в команду Ract.

С введением компонентов сервера существующие компоненты были переименованы в виде компонентов клиента. На самом деле, сейчас у нас есть три типа:

Компоненты сервера
Клиентские компоненты
Общие компоненты

Давайте посмотрим на некоторые важные функции компонентов сервера.

Размер Zero Bundle.

Они являются нулевым размером расклада, потому что они отображаются на сервере, и только визуализированный контент отправляется клиенту. Это означает, что они не добавляют к вашему клиенту Размер пакета JS. Давайте посмотрим на примере,

// BlogPost.server.js - A Server component.

import { renderMarkDown } from '...'; // Server only dependency.
import {getBlogPost} from './blog/blog-api';

export default function BlogPost({blog}) {
  const blog = getBlogPost(blog.id); // Get blog post from database directly.

  return (
    <>
      {blog.title}
      {renderMarkdown(blog.markdown)}
    
  );
}

Вещи, чтобы отметить здесь,

Все компоненты сервера суффиксятся с сервер. {js, jsx, ts, tsx) (По крайней мере на данный момент).
Поскольку они не отправляются клиенту, мы можем иметь код, который обращается к ресурсам серверов, такие как база данных, внутренние API и т. Д.
Поскольку все это происходит на сервере, пакет, который вы импортировали для рендеринга Markdown, не отправляются клиенту, отправляется только визуальный контент. Это значительное снижение размера пакета Client JS.

Сам компонент прямо вперед, он выбирает данные из базы данных и отображают содержимое.

Формат визуализации

Если вы заметили, я сказал, что Содержание оказывается и не HTML . Это связано с тем, что компоненты сервера не отображаются HTML, а для промежуточного формата.

Если вышеуказанный компонент был единственным компонентом в вашем приложении, это то, что будет возвращено с сервера.

J0: [
    ["$", "h1", null, {
        "children": "Blog 1"
    }],
    ["$", "p", null, {
        "children": "unt aut..."
    }]
]

Как видите, только отображаемая маркировка отправляется клиенту, а не сама библиотека.

Теперь вам может быть интересно, почему бы не HTML и этот формат? (Я не знаю имя формата .. 🙃). Посмотрим, почему в следующем разделе.

Состояние и отличие от SSR

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

Однако, поскольку компоненты серверов используют этот промежуточный формат вместо HTML, он позволяет им иметь клиентские компоненты, которые имеют интерактивное поведение. Не допустить ошибки, сами компоненты сервера, не может иметь обработчики состояния или события Другими словами, они не могут использовать Уместите , Useffect и т.п. Однако они могут иметь компоненты клиента, которые, в свою очередь, могут иметь состояние.

Давайте добавим кнопку «Мне нравится» Blogpost Компонент, который при нажатии увеличивает количество лайков для поста блога.

// BlogPost.server.js - A Server component.

import {getBlogPost} from './blog/blog-api';
import LikeButton from './LikeButton.client';

export default function BlogPost({blog}) {
  const blog = getBlogPost(blog.id);
  return (
    <>
      {blog.title}
      {blog.markdown}
       // A Client component.
    
  );
}

// LikeButton.client.js - A Client component.

import {likeBlogPost} from './blog/blog-api';
import React from 'react';

export default function LikeButton({blog}) {
  const [likesCount, setLikesCount] = React.useState(blog.likes);

  const handleClick = () => {
    setLikesCount(prev => prev + 1);
  };

  return Likes: {blog.likes};
}

Blogpost Серверный компонент имеет дочерний компонент Холнгуттон , который является клиентским компонентом, который обрабатывает взаимодействие пользователя. Холнгуттон Компонент свободен использовать Уместите Как это клиентский компонент, и он также обновляет локальное состояние на клик.

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

Обратите внимание, что Холнгуттон Компонент обновляет только локальный вроде подсчета, а не подсчет на сервере. Точка этого примера состояла в том, чтобы показать, что клиентские компоненты могут иметь состояние и взаимодействие пользователя.

Государственное дерево

Чтобы понять это, давайте расширим наш пример, чтобы иметь Blogpostlist Серверный компонент, который отображает список блогов, используя наши Blogpost Компонент сервера.

// BlogPost.server.js - A Server component.

import {getBlogPosts} from './blog/blog-api';
import BlogPost from './BlogPost.server';

export default function BlogPostsList() {
  const blogs = getBlogPosts();
  return (
    <>
      {blogs.map((blog) => (
         // Uses a server component.
      ))}
    
  );
}

Давайте также обновим Холнгуттон Компонент для замены переменной состояния для Любит с Любит от реквизитов. Давайте также добавим функцию обратного вызова, которая попадает на сервер для обновления нравится Количество конкретного поста в блоге.

// LikeButton.client.js - A Client component.

import {likeBlogPost} from './blog/blog-api';

import React from 'react';
import {useLocation} from './LocationContext.client'; // Experimental API for POC.

export default function LikeButton({blog}) {
  const [, setLocation] = useLocation();
  const handleClick = async () => {
    await likeBlogPost(blog.id);
    setLocation((loc) => ({
      ...loc,
      likes: blog.likes + 1,
    }));
  };

  const likeBlogPost = async (id) => {
    // Fetch call to update the blog post in the server.
  };

  return Likes: {blog.likes};
}

Когда вы нажимаете на кнопку «Нравится», вызов сделан на сервере для обновления подобного количества, а затем SetLocation называется. Это экспериментальная API, предоставленная командой RACT, чтобы имитировать вызов серверу, чтобы получить единицу интерфейса пользовательского интерфейса. В этом случае мы выбираем компонентное дерево для текущего маршрута. На сетевой вкладке вы можете увидеть, что вызов действительно был сделан, и все компоненты в текущем маршруте, начиная от корня, возвращаются.

Все дерево отображается из рута, а детали, которые обновляются детали, в этом случае, где бы … Любит отображается на экране. Обратите внимание, что вызов для обновления был сделан из Холнгуттон Компонент, однако, так как все дерево обновляется Любит Количество прошло как опора к Холнгуттон обновляется.

Состояние клиентских компонентов сохраняется

Давайте создадим новый Комментарий Компонент, который отображает входное текстовое поле, связанное с переменной состояния. Для простоты мы не будем реализовывать функциональность комментариев.

// Comment.client.js - A Client component.

import React from 'react';

export default function Comment() {
  const [comment, setComment] = React.useState('');
  return (
     setComment(value)}
    />
  );
}

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

Клиентские компоненты – это компоненты, которые мы используем все это, пока. Но с компонентами серверов в смеси вам нужно помнить одну вещь,

Однако клиентский компонент не может импортировать компонент сервера, он может отображать компонент сервера, переданный в качестве детей из компонента сервера. Обратите внимание, что эти реквизиты должны быть сериализуемыми, JSX сериализуется и, следовательно, он может быть передан.

Невозможно

// FancyBlogPost.client.js - A Client component.
import React from 'react';
import BlogPost from './BlogPost.server';

export default function FancyBlogPost({ blog }) {
  return (
    
       // Not OK. Cannot import a Server component inside a Client component.
    
  );
}

// BlogPostList.server.js - A Server component.
import {getBlogPosts} from './blog/blog-api';
import BlogPost from './BlogPost.server';

export default function BlogPostsList() {
  const blogs = getBlogPosts();
  return (
    <>
      {blogs.map((blog) => (
        
      ))}
    
  );
}

Разумность довольно проста, клиентские компоненты отправляются клиенту. Если это должно было содержать компонент сервера, доступа к некоторому внутреннему API, что бы не удалось у клиента, поскольку он не будет иметь доступа. Это только одна причина среди многих.

Вместо этого мы можем сделать следующее.

Возможно

// FancyBlogPost.client.js - A Client component.
export default function FancyBlogPost({ children }) {
  return (
    
      { children }
    
  );
}

// BlogPostList.server.js - A Server component.
export default function BlogPostsList() {
  const blogs = getBlogPosts();
  return (
    <>
      {blogs.map((blog) => (
        
           // Fine. Server component passed as childredn to a Client component.
        
      ))}
    
  );
}

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

Другие вещи, которые можно помнить в отношении клиентских компонентов,

Они заканчиваются с расширением * .Client. {js, jsx, ts, tsx} (По крайней мере на данный момент)
Они будут частью пакета клиента и как таковые, вы не должны делать ничего, что вы не захотите быть публичными. Например: DB Операции и т. Д.
Они могут бесплатно использовать состояние и эффектные крючки.
Используйте браузер только API.

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

У них нет конкретного суффикса.
Они не могут иметь Государство Отказ
Они не могут использовать Useffect и т.п.
Они не могут рерантировать серверные компоненты.
Они не могут использовать конкретные API браузера.

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

Прочитав это, если вы думаете, что компоненты сервера выполняют именно то, что делает NextJS/SSR. Нет. В случае Nextjs компоненты отображаются на сервере, да, но в конечном итоге компоненты являются частью пакета клиента и используются для гидратации. Кроме того, компоненты сервера позволяют,

Поддержание состояния клиентского компонента.
Многие гранулированные интеграции клиентских и серверных компонентов. Например, в Neardjs вы ограничены страницами на выбор между клиентскими и серверами компонентов.
Разделение кода выполняется в зависимости от имени файлов и теперь не дополнительный шаг для разработчиков в качестве импорта.

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

Надеюсь, я смог объяснить некоторые концепции таким образом, чтобы это было легко понять. Счастливое кодирование и увидимся в следующем ..:)

Следуй за мной на Twitter или проверить мой Сайт Чтобы узнать больше обо мне .. ✨

Оригинал: “https://dev.to/sidthesloth92/react-server-components-initial-thoughts-3lml”