React.js: можно ли сделать определенные компоненты только SSR-рендерингом?

Исходя из некоторых классических языков шаблонов на стороне сервера (php, jsp), у меня есть общий архитектурный вопрос по React.js:

Могу ли я ограничить отображение определенных компонентов страницы только на стороне сервера? И соответственно уменьшить пакет javascript на стороне клиента?

* Я нахожу это часто смехотворно большим. Одна причина (afaik): у каждого компонента должна быть возможность повторно визуализироваться при изменении состояния и навигации по SPA- (также известной как soft, virtual ..), поскольку все изменения поступают в виде данных, а не в виде предварительно отрисованных фрагментов HTML (afaik). .

React.js: можно ли сделать определенные компоненты только SSR-рендерингом?

По сути, я вижу 2 разных типа разделов контента почти во всех своих веб-проектах:

1) высокодинамичные интерактивные разделы "facebook-ish" Персональные приветствия, сообщения и счетчики сообщений, лайки и ответы… здесь поведение React по умолчанию является наилучшим: поступают новые данные, изменяется глобальное состояние (хранилище redux), и все затронутые компоненты повторно отрисовываются. Это было бы непростой задачей без разумных принципов реагирования и сокращения. И, конечно же, рендеринг / обновления на стороне клиента - это путь.

Часто это область входа пользователя вверху («Привет, Джо, 5 непрочитанных сообщений»), некоторые текущие данные (акции, погода,…) посередине и комментарии ближе к нижней части.

2) «Статический» контент SSR (думаю, PHP)

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

Рендеринга их только на стороне сервера было бы достаточно. Часто блок основного контента также может работать только с SSR. (И все подкомпоненты макета, необходимые для рендеринга его html)

Тем не менее, я должен передать все компоненты клиентскому пакету, чтобы также работала виртуальная / программная навигация по страницам ... (которая передает новые данные, но не предварительно обработанные разделы)


Вы могли бы сказать мне в качестве обходного пути просто убрать нижний колонтитул из точки установки контейнера реакции, но это не моя точка зрения ... "статические", иначе говоря, разделы, которые могут работать с чистым SSR, могут быть в другом месте, между динамическим заголовком и нижним ответы / отзывы / понравившиеся разделы…


Я хотел бы отметить компоненты типа 2 как «SSR-достаточно» (а также их подкомпоненты - если дерево зависимостей веб-пакетов не выяснится, они также используются в компонентах Type1-CSR…).

Так что отправьте его как отдельный HTML-объект. Кроме того, необходимо будет получить его "предварительно обработанный" при навигации по виртуальным страницам в стиле SPA. (поскольку знания о компонентах будут отсутствовать в клиентском пакете)

Есть ли способ сделать это? Кто-нибудь задумывался об этой общей, имхо распространенной проблеме раньше ...?

Привет, Фрэнк, Вы нашли способ решения этой проблемы?

Nestor 01.05.2019 03:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
1
567
0

Другие вопросы по теме