- Это не рендеринг на стороне сервера.
2020 год стал для всех нас сумасшедшим путешествием. В преддверии новогодних праздников команда React недавно объявила о захватывающем исследовании нового способа создания приложений React с использованием компонентов React Server.
Имейте в виду, что компоненты React Server все еще находятся в стадии разработки и не рекомендуются для производства. Эта функция не является обязательной, и вы все равно можете написать свой компонент, как сейчас.
Вы можете посмотреть часовой доклад и демонстрацию здесь, а вот 5-минутное руководство, в котором освещаются и объясняются важные моменты.
Что такое серверный компонент React?
Серверный компонент React - это способ написать компонент React, который отображается на стороне сервера с целью повышения производительности приложения React.
Одна из проблем, с которыми сталкивается при разработке приложений с помощью React, - это часто большое количество сетевых запросов, выполняемых , когда пользователи ждут, пока страница / данные, которые они запросили, станут доступны:
Например, сегодня распространенный подход к извлечению данных - это вызов API-интерфейсов с помощью хука useEffect:
useEffect(() => { axios.get("URL HERE") .then((response) => { // set data into statesetData(response.data); }) .catch((error) => { console.log(error); }); }, []);
Хотя в этом нет ничего плохого, этот подход к извлечению данных всегда требует времени, чтобы отобразить что-то значимое для пользователя.
Другая проблема - это, конечно, размер пакета. Минификация, разделение кода, удаление мертвого кода - вот несколько примеров методов, используемых для уменьшения размера пакета приложения React. Почему? Потому что для загрузки большого пакета требуется время. Не у всех есть доступ к быстрому устройству и быстрому интернету:
Компоненты React Server помогут решить две проблемы, указанные выше, и многое другое.
Как работают компоненты React Server
Поскольку компоненты React Server все еще находятся на экспериментальной стадии, детали реализации этой функции могут измениться. Тем не менее, вы можете понять некоторые из его основных концепций, посмотрев демо.
Первое, на что следует обратить внимание, это несколько пакетов с экспериментальной версией в package.json файле:
"react": "0.0.0-experimental-3310209d0", "react-dom": "0.0.0-experimental-3310209d0", "react-fetch": "0.0.0-experimental-3310209d0", "react-fs": "0.0.0-experimental-3310209d0", "react-pg": "0.0.0-experimental-3310209d0", "react-server-dom-webpack": "0.0.0-experimental-3310209d0",
react, react-dom и react-server-dom-webpack используют экспериментальную версию, которая включает компонент React Server, а react-fetch, react-fs и react-pg - это группа пакетов-оболочек, используемых для взаимодействия с системой ввода-вывода (они называются библиотеками ввода-вывода React).
Следующий момент заключается в том, что эта демонстрация основана на Express.js, что имеет смысл, потому что вам нужен сервер для рендеринга компонентов. Но здесь также возникает вопрос: означает ли это, что серверные компоненты работают только в среде JavaScript? А как насчет Go, Java и других серверных сред?
Мы можем увидеть поддержку для других сред в будущем, поэтому давайте отложим этот момент.
Конечно, все эти детали реализации могут измениться в будущем по мере развития исследований.
Перейдя к коду в папке src/, вы увидите три вида расширений для файлов компонентов:
.server.jsуказывает на серверные компоненты..client.jsуказывает на клиентские компоненты React.- Обычное расширение
.jsпредназначено для общих компонентов. Эти компоненты могут запускаться на сервере или на клиенте, в зависимости от того, кто их импортирует.
При запуске приложения командой npm start одновременно будут выполняться две задачи:
- Сервер Node, работающий с использованием сценария
server/api.server.js - Сборка Webpack для клиентского пакета React с использованием сценария
scripts/build.js
Посмотрев на серверный скрипт, вы увидите, что app.server.js импортируется в файл:
const ReactApp = require('../src/App.server').default;
А затем обрабатывается как Поток с возможностью записи в узле:
const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname, '../build/react-client-manifest.json'),
'utf8'
);
const moduleMap = JSON.parse(manifest);
pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}
Код под расширением .server.js, включая его зависимости, не включен в пакет клиента, что означает, что он не влияет на размер пакета.
Компоненты сервера имеют прямой доступ к базе данных или файловой системе на сервере, поэтому вы можете получить любые необходимые данные и отправить их клиенту при первом рендеринге. Вы можете увидеть пример в NoteList.server.js файле:
export default function NoteList({searchText}) {
const notes = db.query(
`select * from notes where title ilike $1 order by id desc`,
['%' + searchText + '%']
).rows;
return notes.length > 0 ? (
<ul className="notes-list">
{notes.map((note) => (
<li key={note.id}>
<SidebarNote note={note} />
</li>
))}
</ul>
) : (
<div className="notes-empty">
{searchText
? `Couldn't find any notes titled "${searchText}".`
: 'No notes created yet!'}{' '}
</div>
);
}
Компоненты сервера не могут быть интерактивными, а это означает, что вы не можете useState или создавать прослушиватели на стороне сервера. Вам нужно поместить состояние на клиентскую сторону и импортировать их из серверных компонентов.
В чем преимущество React Server Component?
- Компоненты сервера в комплект не входят. Они никогда не загружаются браузером, что не влияет на размер пакета.
- Вы можете уменьшить размер пакета, переместив статические компоненты только для рендеринга на серверную сторону и сохранив интерактивные компоненты с отслеживанием состояния на стороне клиента.
- Компоненты сервера могут получать доступ к ресурсам на стороне сервера. Вы можете получать данные напрямую из базы данных или файловой системы, а также можете получать данные из API, как на стороне клиента.
- Компоненты сервера также могут читать запросы GraphQL.
Чем это отличается от рендеринга на стороне сервера?
SSR в том виде, как он работает сегодня в приложениях React, просто отправляет клиенту компоненты, отрисованные как HTML, чтобы ваше приложение, казалось, имело быстрый ответ. Пользователь не может ничего делать с вашим приложением, пока не будет загружен код JavaScript.
Компоненты React Server разные. Как показано в демонстрации, серверные компоненты отображаются не как HTML, а как специальный формат, который передается клиенту. У потока пока нет стандартного протокола, но он очень похож на формат JSON. Вот фрагмент ответа:
M1:{"id":"./src/SearchField.client.js","chunks":["client5"],"name":""}
В то время как SSR используется только один раз для первоначального рендеринга, серверные компоненты могут быть повторно извлечены несколько раз для повторного рендеринга данных (в случае демонстрации - сообщения уценки).
Заключение
Серверные компоненты React - это новая захватывающая функция, которая может изменить способ написания приложений React разработчиками. Он позволяет приложениям React импортировать пакеты, не влияя на размер клиентского пакета, создавая статическое представление приложения, которое можно сделать интерактивным с помощью клиентских компонентов.
Разработчики также могут использовать как серверные, так и клиентские компоненты в одном дереве DOM, что позволяет повторно получать серверные компоненты без нарушения состояния клиентских компонентов.
Но поскольку эта функция все еще экспериментальная, трудно определить, насколько она действительно будет полезна в реальных условиях. Во-первых, эта функция в настоящее время может использоваться только в серверной среде Node.js.
Команда React в настоящее время сосредоточена на внедрении этой функции в мета-фреймворки, такие как Next.js и Gatbsy, а это значит, что может пройти некоторое время (если вообще когда-либо), прежде чем мы увидим поддержку других серверных языков, таких как PHP, Python, Go или Рубин.
Напомним, что React на стороне клиента никуда не денется. React на стороне сервера не является обязательным.
Кроме того, я поделился своими мыслями по поводу Стоит ли создавать дизайн-систему для компонентов React Server? которые могут вас заинтересовать.
Создавайте отличные дизайнерские системы и микро-интерфейсы
Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.
