ReactJS-рендеринг на стороне сервера и рендеринг на стороне клиента

Ответ 1

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

Клиентский

Здесь вы полностью запускаете ReactJS в браузере. Это самая простая настройка и включает в себя большинство примеров (в том числе на http://reactjs.org). Исходный HTML-код, отображаемый сервером, является заполнителем, а весь пользовательский интерфейс отображается в браузере после загрузки всех ваших сценариев.

Серверное

Думайте о ReactJS как о серверном шаблонизаторе (например, о нефрите, руле и т.д.). HTML-код, отображаемый сервером, содержит пользовательский интерфейс, как и должно быть, и вы не ожидаете загрузки скриптов. Ваша страница может быть проиндексирована поисковой системой (если не выполняется ни один javascript).

Поскольку пользовательский интерфейс отображается на сервере, ни один из ваших обработчиков событий не будет работать, а интерактивность отсутствует (у вас есть статическая страница).

Оба

Здесь начальный рендер находится на сервере. Следовательно, HTML, полученный браузером, имеет пользовательский интерфейс, как и должно быть. После загрузки сценариев виртуальный DOM повторно визуализируется для настройки обработчиков событий ваших компонентов.

Здесь вам необходимо убедиться, что вы заново визуализируете тот же виртуальный DOM (корневой компонент ReactJS) с тем же props, который вы использовали для визуализации на сервере. В противном случае ReactJS будет жаловаться, что виртуальные DOM на стороне сервера и на стороне клиента не совпадают.

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

Ответ 2

Источник изображения: Инженерный блог Walmart Labs

NB: SSR (рендеринг на стороне сервера), CSR (рендеринг на стороне клиента).

Основное различие заключается в том, что с SSR ответ сервера для браузера клиентов включает HTML-страницу страницы, которая будет отображаться. Также важно отметить, что, хотя с помощью SSR страница становится быстрее. Страница не будет готова для взаимодействия с пользователем, пока файлы JS не будут загружены и браузер не выполнит React.

Один недостаток заключается в том, что SSR TTFB (время до первого байта) может быть немного длиннее. Понятно, потому что сервер занимает некоторое время, создавая HTML-документ, что, в свою очередь, увеличивает размер ответа сервера.

Ответ 3

Я действительно задавался вопросом о том же исследовании довольно много, и хотя ответ, который вы ищете, был дан в комментариях, но я считаю, что он должен быть более заметным, поэтому я пишу этот пост (который я обновлю, когда смогу приехать с лучшим способом, поскольку я нахожу решение архитектурно по крайней мере сомнительным).

Вам нужно будет написать свои компоненты с обеими способами, в результате, в основном, чтобы установить if везде, чтобы определить, находитесь ли вы на клиенте или сервере, а затем выполняете либо запрос БД (или независимо от того, что подходит на сервере) или вызов REST (на клиенте). Тогда вам придется писать конечные точки, которые генерируют ваши данные и выставляют их клиенту, и там вы идете.

Снова, с удовольствием узнаем о более чистом решении.

Ответ 4

  Это 2 отдельных способа создания приложения или их можно использовать вместе?

Их можно использовать вместе.

Если мы можем использовать это вместе, как это сделать - нужно ли нам дублировать одни и те же элементы на стороне сервера и на стороне клиента? Или мы можем просто построить статические части нашего приложения на сервере, и динамические части на стороне клиента, без подключения к серверу сторона, которая уже была предварительно обработана?

Лучше иметь один и тот же макет, который будет отображаться, чтобы избежать операций перекомпоновки и перекраски, меньше мерцания/миганий, ваша страница будет более гладкой. Впрочем, это не ограничение. Вы могли бы очень хорошо кэшировать html SSR (что Электрод делает для сокращения времени отклика)/отправить статический html, который перезаписывается CSR (рендеринг на стороне клиента).

Если вы только начинаете с SSR, я бы порекомендовал начать с простого, SSR может очень быстро усложниться. Создание html на сервере означает потерю доступа к таким объектам, как окно, документ (у вас они есть на клиенте), потерю способности включать асинхронные операции (из коробки) и, как правило, множество изменений кода для обеспечения совместимости вашего кода с SSR ( так как вам придется использовать webpack для упаковки вашего bundle.js). Такие вещи, как импорт CSS, требуют, чтобы vs import внезапно начал кусаться (это не так в приложении React по умолчанию без веб-пакета).

Общая схема ССР выглядит следующим образом. Сервер Express, обслуживающий запросы:

const app = Express();
const port = 8092;

// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);

    const urlToRender = req.url;
    // Render the component to a string
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={{}}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

Моим предложением людям, начинающим с SSR, было бы предоставить статический HTML. Вы можете получить статический html, запустив приложение CSR SPA:

document.getElementById('root').innerHTML

Не забывайте, единственными причинами использования SSR должны быть:

1. SEO
2. Более быстрые нагрузки (я бы обесценил это)

Взломать: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

Ответ 5

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

Вы получите более подробную информацию по этой ссылке. Нажмите здесь