Перейти к содержанию

Простой/клиентский SSR

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

В этом разделе мы обсудим рендеринг на стороне сервера, что он означает, как Solid его реализует, как его использовать и каковы его ограничения. Для получения более подробного объяснения от Райана посмотрите видеоролик выше.

Что такое рендеринг на стороне сервера?

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

Рендеринг на стороне сервера полезен для поисковых систем, поскольку они не могут выполнять Javascript-код, поэтому если ваше приложение отображается на клиенте (браузере), то поисковые системы не смогут просмотреть его.

Как Solid реализует SSR?

Solid.js реализует SSR тремя различными способами в зависимости от типа приложения, которое вы создаете. Эти три способа следующие:

  • renderToString: Используется для рендеринга компонента в строку HTML.
  • renderToStringAsync: Используется для асинхронного преобразования компонента в строку HTML.
  • renderToStream: Используется для рендеринга компонента в поток HTML.

В этом разделе мы будем говорить только о самой простой из этих трех функций - renderToString. Остальные две будут рассмотрены в следующих разделах.

Как работает renderToString?

Концепция renderToString очень проста. Он принимает компонент и преобразует его в строку HTML. Компонент, который передается, называется корневым компонентом. Он отображает на сервере все, что может (элементы за границей suspense), а на клиенте - компоненты верхнего уровня. Асинхронные данные извлекаются и отображаются на клиенте без гидратации.

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

renderToString - это функция, которая принимает компонент и преобразует его в строку HTML.

1
2
3
4
5
6
7
import { renderToString } from 'solid-js/web';

function App() {
    return <h1>Hello World</h1>;
}

const html = renderToString(() => <App />);

В приведенном примере компонент App будет преобразован в строку HTML, <h1>Hello World</h1>. Эта строка HTML может быть отправлена клиенту и отображена на нем.

Как использовать renderToString?

Для того чтобы правильно использовать renderToString, необходимо, чтобы она выполнялась на сервере. Это можно сделать, создав сервер с помощью одного из многочисленных серверных фреймворков Node.js. Наиболее популярным из них является Express.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import express from 'express';
import { renderToString } from 'solid-js/web';

function App() {
    return <h1>Hello World</h1>;
}

const app = express();

app.get('/', (req, res) => {
    const html = renderToString(() => <App />);
    res.send(html);
});

app.listen(3000, () => {
    console.log('Server started on port 3000');
});

В приведенном примере с помощью Express будет создан сервер, на котором компонент App будет преобразован в строку HTML. Затем эта строка HTML будет отправлена клиенту и отображена на нем.

Следует иметь в виду, что для сборки приложения потребуется пакетный компоновщик, например Vite, Webpack или Rollup. Вот полнофункциональный пример с использованием rollup и express. solid-ssr-workbench. Это репозиторий содержит примеры использования Solid со всеми тремя формами SSR.

Ограничения и преимущества renderToString

У renderToString есть несколько ограничений. Первое из них заключается в том, что он является синхронным. Это означает, что если в вашем приложении есть асинхронный код, то его придется выполнять на стороне клиента. Это связано с тем, что renderToString не будет ждать завершения работы асинхронного кода перед рендерингом приложения. Эту проблему можно решить, используя вместо этого renderToStringAsync.

Приятным преимуществом такого подхода к SSR является то, что он очень прост в реализации. Достаточно создать сервер и использовать renderToString для рендеринга приложения в строку HTML. Затем эта строка HTML может быть отправлена на клиент и отрисована там.

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

Ссылки

Комментарии