Асинхронный SSR¶

Что такое асинхронный SSR?¶

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

Solid.js предлагает аналогичную технику с помощью функции renderToStringAsync. Эта функция позволяет выполнить рендеринг приложения на сервере и отправить HTML клиенту вместе с уже полученными асинхронными данными. Это позволит вашему приложению быть полностью независимым от клиента и не беспокоиться о получении данных на стороне клиента.

Как работает renderToStringAsync?¶

renderToStringAsync работает следующим образом: берется компонент и возвращается промис, который разрешается в строку HTML. Эта строка HTML является рендерингом компонента со всеми асинхронными данными, которые уже извлечены и сериализованы. Таким образом, к моменту передачи клиенту все приложение уже готово к работе.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { renderToStringAsync } from 'solid-js/web';
import { createResource } from 'solid-js';

const App = () => {
    const [data] = createResource(getAsyncData);

    async function getAsyncData() {
        const response = await fetch(
            'https://jsonplaceholder.typicode.com/todos/1'
        );
        const json = await response.json();

        return json;
    }

    return (
        <div>
            <h1>Async SSR</h1>
            <p>{data().title}</p>
        </div>
    );
};

renderToStringAsync(App).then((html) => {
    console.log(html);
});

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

1
2
3
4

<div>
    <h1>Async SSR</h1>
    <p>delectus aut autem</p>
</div>

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

Для использования renderToStringAsync вам потребуется сервер, на котором может выполняться javascript. Вы можете использовать любой сервер, но для данного примера мы будем использовать Express.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// server.js
import express from 'express';
import { renderToStringAsync } from 'solid-js/web';
import App from './App';

const app = express();

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// App.js
import { createResource } from 'solid-js';

export default function App() {
    const [data] = createResource(() =>
        fetch(
            'https://jsonplaceholder.typicode.com/todos/1'
        ).then((res) => res.json())
    );

    return (
        <div>
            <h1>Async SSR</h1>
            <p>{data().title}</p>
        </div>
    );
}

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

Ограничения¶

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

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

Преимущества¶

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

Ссылки¶

• Async SSR

Комментарии