что такое однопоточный рендеринг
Что такое рендер-фермы и рендер-станции — для чего они нужны
Содержание
Содержание
За несколько последних лет возрастает потребность пользователей в визуальном контенте. Это не только графика для игр или фильмов, а еще и разнообразные архитектурные, дизайнерские проекты, анимация для бизнес-идей и многое другое. Причем визуализация постоянно усложняется и для процесса рендеринга требуется немалое количество ресурсов. Вот здесь-то и приходит на помощь рендер-ферма или рендер-станция.
Что такое рендеринг
Рендеринг — это процесс, который не смогут обойти стороной те, кто работает с двухмерной или трехмерной графикой, анимацией. В переводе с английского рендеринг означает «визуализация». В ходе рендеринга происходит преобразование трехмерной сцены в статическое изображение (рендер) или же в последовательность кадров. Скажем проще: созданный в специальной программе набросок изображения превращается непосредственно в само изображение со своими цветами, тенями, освещением и т.п. А еще проще и банальнее – это процесс получения изображения с помощью специальной компьютерной программы.
Как работает рендеринг и что для него необходимо
Рендеринг — это довольно трудоемкий и сложный процесс, в ходе которого происходит множество математических вычислений. Проходит просчет и определение теней, текстур, отражения и многого другого.
Разработчики специальных программ для 3D-моделирования и рендеринга позаботились о том, чтобы пользователи не утруждали себя многочисленными просчетами и работали с привычными для них настройками.
Естественно, что для рендеринга требуется один или несколько компьютеров, программы для 3D-моделирования и визуализации (с соответствующими плагинами), программы для работы с графикой. Чаще всего рендер-движки уже встраиваются в графические программы, например, в такие как 3ds Max, Maya. Помимо этого, есть самостоятельные профессиональные системы для рендера, например, V-ray, Mental ray, Corona Renderer. Такие программы часто именуют рендерером.
Если говорить о значимости «начинки» компьютера для рендеринга, то здесь мы встретим подразделение на CPU Rendering и GPU Rendering. Первый вариант при просчете использует ресурсы процессора и оперативной памяти, а в случае с GPU, основная задача по визуализации ложится на видеокарту (графический процессор). Чему именно будет отдано предпочтение, зависит от используемой системы рендеринга.
Время просчета будет зависеть от массы факторов. Сюда входят сложность сцены, прозрачность или отражающие свойства материалов, текстуры, тени и освещенность, высокополигональность моделей и вычислительная мощь оборудования. Также есть зависимость и от того, какой метод использует система рендеринга.
Сколько же времени может занять рендеринг? В зависимости от всего вышеперечисленного от нескольких секунд до нескольких часов и даже дней.
Возьмем простой калькулятор на рендер-ферме и попробуем рассчитать стоимость и приблизительное время, выбрав примерные настройки. Результаты видны на трех скринах, причем выделено время просчета на домашнем компьютере и на ферме.
Что такое рендер-ферма
Рендер-ферма — это множество компьютеров, объединенных в единую вычислительную сеть. Такие сети или системы обычно именуют узлами. В зависимости от фермы, число таких узлов может доходить до нескольких тысяч.
Ферма как правило бывает двух типов: собственная (частная) и облачная (коммерческая). Первая создается под нужды какой-либо фирмы занимающейся, например, выпуском фильмов. Или же когда у отдельного дизайнера, фрилансера имеется несколько компьютеров с соответствующим программным обеспечением, и он использует их для рендеринга.
Облачные фермы предлагают услуги всем желающим пользователям. Данные фермы имеют на вооружении десятки серверов, необходимое оборудование, обслуживающий персонал. По сути это сложные профессиональные системы, располагающие мощнейшими, современными ресурсами для процедуры рендеринга.
Стоят профессиональные фермы довольно дорого. В стоимость входит не только цена на оборудование, софт, но и его обслуживание, охлаждение и т.п.
Что такое рендер-станция
Если ферма представляет собой несколько компьютеров объединенных в узлы, то рендер-станция (графическая станция) является отдельной машиной, предназначенной для работы с графикой, видео, дизайном. Такие станции базируются на различных платформах и комплектуются мощным «железом», которое чаще всего создается именно для работы с графикой. В пример можно привести профессиональную (и доступную рядовому пользователю) графическую карту Nvidia Quadro.
Как работают коммерческие рендер-фермы
Загруженные на фермы сцены могут рассчитываться на нескольких десятках и сотен рендер-узлах, что максимально сокращает время визуализации. Благодаря этому, несколько дней рендеринга возможно сократить до нескольких часов. Чтобы объяснить еще проще принцип работы ферм, сравним их с видеомонтажом.
Представьте, что у вас есть масса памятных видеокадров, которые вы хотели бы объединить в единый фильм с музыкальными вставками и по возможности, со спецэффектами. Чтобы это сделать, нужен компьютер, программное обеспечение и умение делать монтаж. Если же у вас что-либо из этого отсутствует, то вы естественно отдадите свои видеозаписи профессионалу, который за определенную сумму сделает для вас фильм. Тоже самое можно сказать и о рендере.
Работа рендер-фирм строится практически по одинаковому сценарию. Пользователь проходит процесс регистрации, пополняет счет (многие фермы предлагают попробовать бесплатно) и приступает к процессу. Для этого необходимо загрузить 3D-сцены на ферму, задать желаемые настройки и запустить процесс.
Важным моментом является загрузка с сайта программы или плагина, который встраивается в используемую пользователем программу (например, 3ds Max). Его задача — проверить все сцены и экспортировать их в ферму, сохраняя заданные пользователем настройки. Стоит отметить, что все фермы поддерживают наиболее часто используемые программы, приложения и плагины.
Рендерить на ферме или у себя дома?
На этот вопрос должен ответить сам пользователь, который делает статичные изображения, анимацию, спецэффекты и многое другое. Чтобы выполнять рендеринг дома необходим мощный компьютер, в котором главную роль будут играть процессор (архитектура, количество ядер, кэш) и количество оперативной памяти. Можно сказать, чем мощнее будет сборка, тем лучше для процесса.
В домашней ферме также используют несколько компьютеров, объединив их в локальную сеть. Также многое зависит от объемов работы. При больших объемах и сложных проектах, пользователю может не хватить одной или нескольких машин и в любом случае придется собирать свою ферму или же обратиться за помощью к коммерческой ферме. В сравнении с этим у рендер-ферм есть несколько существенных преимуществ.
1. Простота и поддержка. Пользоваться фермами довольно легко, к тому же на каждой из них пользователь сможет обратиться в службу поддержки.
2. Экономия средств и времени. В первом случае пользователь, которому нужен рендеринг, заплатит только за процесс на ферме и будет избавлен от закупки «железа» для собственной фермы и ее обслуживания. Ну и конечно же экономия времени, которое так необходимо, когда, например, у фрилансера масса заказов. Не стоит забывать о том, что дома на последних часах и минутах может отключиться электричество и все многочасовые труды пропадут.
Особенности рендеринга на рендер-ферме
Остановимся на некоторых особенностях, которые желательно знать и помнить всем посетителям ферм.
Онлайн-калькулятор.
Он есть на каждой ферме и с его помощью пользователь сможет рассчитать и оценить время и стоимость рендеринга. Однако, все это примерно и условно, так как до сих пор нет четкого и реального метода оценки времени рендеринга.
Совместимость ПО
Прежде чем приступить к работе, необходимо определить совместимость ПО, на котором был сделан проект и ПО имеющегося на ферме. Хотя, выше уже указывалось на то, что многие фермы имеют все последние версии ПО, плагины и загружают для пользователя свои плагины для проверки проекта. Несмотря на это, нужно быть внимательным, так как в некоторых ситуациях потраченные деньги фермы могут не вернуть.
Хранение данных
Фермы осуществляют хранение проектов и всех данных, однако через какой-то промежуток времени они могут быть удалены. Через какой промежуток именно, нужно узнавать на самой ферме.
Правила пользования
Прежде чем начинать работу на той или иной ферме, необходимо детально ознакомиться с правилами пользования фермой. Узнать каким образом она предоставляет кредиты, можно ли вернуть деньги и т.п. Для разрешения всех спорных или непонятных вопросов на каждой из ферм должна работать служба поддержки в режиме 24/7.
Что такое рендеринг? И что такое рендер? Словарь разработчиков компьютерных игр!
В продолжении ликбеза по компьютерной графике как для программистов, так и для художников хочу поговорить о том что такое рендеринг. Вопрос не так сложен как кажется, под катом подробное и доступное объяснение!
Я начал писать статьи, которые являются ликбезом для разработчика игр. И поторопился, написав статью про шейдеры, не рассказав что же такое рендеринг. Поэтому эта статья будет приквелом к введению в шейдеры и отправным пунктом в нашем ликбезе.
Что такое рендеринг? (для программистов)
Итак, Википедия дает такое определение: Ре́ндеринг (англ. rendering — «визуализация») — термин в компьютерной графике, обозначающий процесс получения изображения по модели с помощью компьютерной программы.
Довольно неплохое определение, продолжим с ним. Рендеринг – это визуализация. В компьютерной графике и 3д-художники и программисты под рендерингом понимают создание плоской картинки — цифрового растрового изображения из 3д сцены.
То есть, неформальный ответ на наш вопрос “Что такое рендеринг?” – это получение 2д картинки (на экране или в файле не важно). А компьютерная программа, производящая рендеринг, называется рендером (англ. render) или рендерером (англ. renderer).
Рендер
В свою очередь словом “рендер” называют чаще всего результат рендеринга. Но иногда и процесс называют так же (просто в английском глагол – render перенесся в русский, он короче и удобнее). Вы, наверняка, встречали различные картинки в интернете, с подписью “Угадай рендер или фото?”. Имеется ввиду это 3D-визуализация или реальная фотография (уж настолько компьютерная графика продвинулась, что порой и не разберешься).
Виды рендеринга
В зависимости от возможности сделать вычисления параллельными существуют:
Существует много алгоритмов рендеринга, но все их можно разделить на две группы по принципу получения изображения: растеризация 3д моделей и трасировка лучей. Оба способа используются в видеоиграх. Но трасировка лучей чаще используется не для получения изображений в режиме реального времени, а для подготовки так называемых лайтмапов – световых карт, которые предрасчитываются во время разработки, а после результаты предрасчета используются во время выполнения.
В чем суть методов? Как работает растеризация и трасировка лучей? Начнем с растеризация.
Растеризация полигональной модели
Сцена состоит из моделей, расположенных на ней. В свою очередь каждая модель состоит из примитивов.
Это могут быть точки, отрезки, треугольники и некоторые другие примитивы, такие как квады например. Но если мы рендерим не точки и не отрезки, любые примитивы превращаются в треугольники.
Задача растеризатора (программа, которая выполняет растеризацию) получить из этих примитивов пиксели результирующего изображения. Растеризация в разрезе графического пайплайна, происходит после вершинного шейдера и до фрагментного (Статья про шейдеры).
*возможно следующей статьёй будет обещанный мной разбор графического пайплайна, напишите в комментариях нужен ли такой разбор, мне будет приятно и полезно узнать скольким людям интересно это всё. Я сделал отдельную страничку где есть список разобранных тем и будущих – Для разработчиков игр
В случае с отрезком нужно получить пиксели линии соединяющей две точки, в случае с треугольником пиксели которые внутри него. Для первой задачи применяется алгоритм Брезенхема, для второй может применяться алгоритм заметания прямыми или проверки барицентрических координат.
Сложная модель персонажа состоит из мельчайших треугольников и растеризатор генерирует из неё вполне достоверную картинку. Почему тогда заморачиваться с трассировкой лучей? Почему не растеризовать и все? А смысл вот в чем, растеризатор знает только своё рутинное дело, треугольники – в пиксели. Он ничего не знает об объектах рядом с треугольником.
А это значит что все физические процессы которые происходят в реальном мире он учесть не в состоянии. Эти процессы прямым образом влияют на изображение. Отражения, рефлексы, тени, подповерхностное рассеивание и так далее! Все без чего мы будем видеть просто пластмассовые модельки в вакууме…
А игроки хотят графоний! Игрокам нужен фотореализм!
И приходится графическим программистам изобретать различные техники, чтобы достичь близости к фотореализму. Для этого шейдерные программы используют текстуры, в которых предрассчитаны разные данные света, отражения, теней и подповерхностного рассеивания.
В свою очередь трассировка лучей позволяет рассчитать эти данные, но ценой большего времени рассчета, которое не может быть произведено во время выполнения. Рассмотрим, что из себя представляет этот метод.
Трасировка лучей (англ. ray tracing)
Помните о корпускулярно волновом дуализме? Напомню в чем суть: свет ведёт себя и как волны и как поток частиц – фотонов. Так вот трассировка (от англ “trace” прослеживать путь), это симуляция лучей света, грубо говоря. Но трассирование каждого луча света в сцене непрактично и занимает неприемлемо долгое время.
Мы ограничимся относительно малым количеством, и будем трассировать лучи по нужным нам направлениям.
А какие направления нам нужны? Нам надо определять какие цвета будут иметь пиксели в результирующей картинке. Тоесть количество лучей мы знаем, оно равно количеству пикселей в изображении.
Что с направлением? Все просто, мы будем трассировать лучи в соответствии с точкой наблюдения (то как наша виртуальная камера направлена). Луч встретится в какой-то точке с объектом сцены (если не встретится, значит там темный пиксель или пиксель неба из скайбокса, например).
При встрече с объектом луч не прекращает своё распространение, а разделяется на три луча-компонента, каждый из которых вносит свой вклад в цвет пикселя на двумерном экране: отражённый, теневой и преломлённый. Количество таких компонентов определяет глубину трассировки и влияет на качество и фотореалистичность изображения. Благодаря своим концептуальным особенностям, метод позволяет получить очень фотореалистичные изображения, однако из-за большой ресурсоёмкости процесс визуализации занимает значительное время.
Рендеринг для художников
Но рендеринг это не только программная визуализация! Хитрые художники тоже используют его. Так что такое рендеринг с точки зрения художника? Примерно то же самое, что и для программистов, только концепт-художники выполняют его сами. Руками. Точно так же как рендерер в видео-игре или V-ray в Maya художники учитывают освещение, подповерхностное рассеивание, туман и др. факторы, влияющие на конечный цвет поверхности.
К примеру картинка выше, поэтапно прорабатывается таким образом: Грубый скетч – Лайн – Цвет – Объем – Рендер материалов.
Рендер материалов включает в себя текстурирование, проработку бликов – металлы, например, чаще всего очень гладкие поверхности, которые имеют четкие блики на гранях. Помимо всего этого художники сталкиваются с растеризацией векторной графики, это примерно то же самое, что и растеризация 3д-модели.
Растеризация векторной графики
Суть примерно такая же, есть данные 2д кривых, это те контуры, которыми заданы объекты. У нас есть конечное растровое изображение и растеризатор переводит данные кривых в пиксели. После этого у нас нет возможности масштабировать картинку без потери качества.
Читайте дальше
Статьи из рубрики “Ликбез для начинающих разработчиков игр“, скорее всего окажутся очень для Вас полезными, позвольте-с отрекомендовать:
Послесловие
В этой статье, я надеюсь, вы осили столько букв, вы получили представление о том, что такое рендеринг, какие виды рендеринга существуют. Если какие-то вопросы остались – смело задавайте их в комментариях, я обязательно отвечу. Буду благодарен за уточнения и указания на какие-то неточности и ошибки.
Рендеринг в веб
о переводе
Наше понимание в этой области основано на нашей работе с Chrome, и контактировании с большими сайтами в течение последних нескольких лет. В общем, мы хотим вдохновить разработчиков рассмотреть использование серверного рендеринга или статического рендеринга с полноценной регидратацией.
Чтобы лучше понимать архитектуры, из которых мы выбираем, когда принимаем решение, нам необходимо иметь четкое понимание каждого подхода и последовательную терминологию, которую мы будем использовать, когда говорим о них. Различия между этими подходами помогают проиллюстрировать компромиссы при рендеринге в вебе через призму производительности.
Терминология
Рендеринг
Rehydration (регидратация): «загрузка» JavaScript отображениий на клиенте таким образом, чтобы они повторно использовали отрендеренное на сервере DOM-дерево и данные HTML-а
Prerendering (пре-рендеринг): выполнение клиентского приложения во время сборки для захвата его начального состояния в виде статического HTML.
Performance
Server Rendering (Серверный рендеринг)
Серверный рендеринг генерирует полный HTML страницы на сервере в ответ на навигацию. Это позволяет избежать дополнительных проходов для получения данных и шаблонов на клиенте, так как это выполняется до того, как браузер получает ответ..
Серверный рендеринг обычно даёт быстрый First Paint (FP) и First Contentful Paint (FCP). Выполнение логики страницы и её рендеринг на сервере позволяют избежать отправки большого количества JavaScript клиенту, что помогает достичь быстрого Time to Interactive (TTI). Это имеет смысл потому, что при серверном рендеринге вы на самом деле просто посылаете текст и ссылки в браузер пользователя. Такой подход может хорошо работать для широкого спектра устройств и сетевых условий и открывает интересные возможности для оптимизации браузера, например можно выполнять разбор потоковых (streaming) документов.
При серверном рендеринге пользователи вряд ли будут вынуждены ждать, пока CPU-зависимый JavaScript будет выполнен, прежде чем они смогут использовать ваш сайт. Даже когда стороннего JS не избежать, использование серверного рендеринга для уменьшения собственных JS costs (JS затрат) может дать вам больше «budget» (бюжета) для остального. Однако, есть один основной недостаток такого подхода: генерация страниц на сервере занимает время, что часто может привести к замедлению Time to First Byte (TTFB).
Достаточно ли серверного рендеринга для вашего приложения, во многом зависит от того, какое приложение вы строите. Существует давняя дискуссия о правильности применения серверного рендеринга вместо клиентского рендеринга, но важно помнить, что вы можете использовать серверный рендеринг для одних страниц, а для других нет. Некоторые сайты с успехом переняли гибридный рендеринг. Netflix делает серверный рендеринг своих относительно статических страниц, в то время как делает prefetching JS для страниц с тяжелым взаимодействием, давая этим более тяжелым отрендеренным на клиенте страницам больше шансов на быструю загрузку.
Многие современные фреймворки, библиотеки и архитектуры позволяют отрисовывать одно и то же приложение как на клиенте, так и на сервере. Эти инструменты могут быть использованы для Server Rendering, однако важно отметить, что архитектуры, где рендеринг происходит как на сервере, так и на клиенте, являются собственным классом решений с очень различными характеристиками производительности и компромисами. React пользователи могут использовать для серверного рендеринга renderToString() или решения, построенные на нем, такие как Next.js. Пользователи Vue могут ознакомиться с руководством по серверному рендерингу Vue или познакомиться с Nuxt. В Angular есть Universal. Однако большинство популярных решений используют ту или иную форму гидратации (hydration), поэтому перед выбором инструмента следует ознакомиться с используемыми подходами.
Static Rendering (Статический рендеринг)
Решения для статического рендеринга бывают разных форм и размеров. Такие инструменты как Gatsby разработаны для того, чтобы разработчики чувствовали, что их приложение отрисовывается динамически, а не генерируется на этапе сборки. Другие, такие как Jekyll и Metalsmith, принимают их статическую природу, предоставляя подход более заточенный на шаблоны.
Одним из недостатков статического рендеринга является то, что отдельные HTML-файлы должны быть сгенерированы для каждого возможного URL. Это может быть сложно или даже невозможно, когда вы не можете предсказать, какими будут эти URL заранее, или если на сайте большое количество уникальных страниц.
Если вы не уверены, является ли решение статическим рендерингом или пре-рендерингом, попробуйте такой тест: отключите JavaScript и загрузите созданные веб-страницы. У статически отрендеренных страниц бОльшая часть функционала все равно будет существовать и без включённого JavaScript. У пре-рендеренных страниц все еще может быть некоторая базовая функциональность, такая как ссылки, но бОльшая часть страницы будет неживой.
Серверный рендеринг против статического
Серверный рендеринг генерирует HTML по требованию для каждого URL, но это может быть медленнее, чем просто обслуживание статически отрендереного контента. Если вы готовы сделать дополнительные усилия, то серверный рендеринг + [HTML кеширование] (https://freecontent.manning.com/caching-in-react/) может значительно сократить время серверного рендеринга. Положительной стороной серверного рендеринга является возможность получать более «живые» данные и отвечать на более полный набор запросов, чем это возможно при статическом рендеринге. Страницы, требующие персонализации, являются хорошим примером типа запроса, который плохо работает со статическим рендерингом.
Серверный рендеринг также может представлять интересные решения при построении PWA. Лучше ли использовать full-page service worker кеширование, или просто рендерить на сервере отдельные фрагменты контента?
Client-Side Rendering (CSR)
Рендеринг на стороне клиента (CSR) означает рендеринг страниц непосредственно в браузере с использованием JavaScript. Вся логика, сбор данных, шаблонирование и маршрутизация обрабатываются на клиенте, а не на сервере.
Для тех, кто создает одностраничное приложение, определение основных частей пользовательского интерфейса, разделяемого большинством страниц, означает возможность применить технику Application Shell caching. В сочетании с service workers это может драматически повысить воспринимаемую производительность при повторных визитах.
Комбинация серверного рендеринга и клиентского через регидратацию
Часто называемый Universal Rendering или просто «SSR», этот подход пытается сгладить компромиссы клиентского и серверного редеринга, делая и то, и другое. Навигационные запросы, такие как полная загрузка страницы или перезагрузка, обрабатываются сервером, который рендерит приложение в HTML, затем JavaScript и данные, используемые для рендеринга, встраиваются в результирующий документ. При тщательной реализации, это даёт быстрый FCP (First Contentful Paint) такой же, как Server Rendering, а далее «усиливает это» путем рендеринга опять же на клиенте с помощью техники, называемой (re)hydration ((ре)гидратация). Это новое решение, но оно может иметь некоторые существенные недостатки в производительности.
Основной недостаток SSR с регидратацией (rehydration) заключается в том, что она может оказать значительное негативное влияние на TTI (Time To Interactive), даже если она улучшает FP (First Paint). SSR-страницы часто выглядят обманчиво полностью загруженными и интерактивными, но на самом деле не могут реагировать на ввод, пока не будет выполнен JS на стороне клиента и не будут прикреплены обработчики событий. Это может занять секунды или даже минуты на мобильном устройстве.
= Проблема регидратации: Одно приложение по цене двух
Проблемы с регидратацией часто могут быть хуже, чем задержка интерактивности из-за JS. Для того, чтобы JavaScript на стороне клиента мог точно «определить» («pick up») то место, где остановился сервер, без необходимости повторно запрашивать все данные, использованные сервером для рендеринга этого HTML, текущие SSR решения обычно сериализуют ответ из зависимых данных UI в документ в виде тегов script. Полученный HTML-документ содержит высокий уровень дублирования:
Как вы видите, сервер возвращает описание пользовательского интерфейса приложения в ответ на навигационный запрос, но также возвращает исходные данные, использованные для составления этого интерфейса, и полную копию реализации интерфейса, которая затем загружается на клиенте. Только после того, как bundle.js завершит загрузку и выполнение, этот пользовательский интерфейс станет интерактивным.
Показатели производительности, собранные с реальных веб-сайтов, использующих SSR регидратацию, указывают на то, что их использование должно приводить в уныние. В конце концов, причина сводится к Пользовательскому Опыту: очень легко оставить пользователей в «жуткой долине».
Но всё же надежда на SSR с регидратацией есть. В краткосрочной перспективе, только использование SSR для высоко кешируемого содержимого может уменьшить задержку TTFB (Time to First Byte), давая результаты, схожие с пре-рендерингом. Регидратация инкрементальная, прогрессивная или частичная, может быть ключом к тому, чтобы сделать эту технику более жизнеспособной в будущем.
Потоковый серверный рендеринг и прогрессивная регидратация
Серверный рендеринг за последние несколько лет претерпел ряд изменений.
= Частичная регидратация
Частичная регидратация оказалась трудной для осуществления. Этот подход является продолжением идеи прогрессивной регидратации, когда отдельные части (компоненты / виджеты / деревья), подлежащие прогрессивной регидратации, анализируются, а те, которые обладают низкой интерактивностью или не обладают реактивностью помечаются. Для каждой из этих наиболее статических частей соответствующий код JavaScript затем трансформируется в инертные ссылки и декоративную функциональность, уменьшая их влияние на стороне клиента до почти нулевого уровня. Подход, основанный на частичной гидратации, имеет свои собственные проблемы и компромиссы. Он создает некоторые интересные вызовы для кеширования, а навигация на стороне клиента означает, что мы не можем иметь HTML рендерящийся на сервере для инертных частей приложения и доступный без полной загрузки страницы.
= Трисоморфный рендеринг (Trisomorphic Rendering)
Если service workers, являются подходящим вариантом для вас, то «трисоморфный» рендеринг также может быть вам интересен. Это метод, при котором вы можете использовать потоковый серверный рендеринг для начальных/не-JS навигаций, а затем попросить ваш service worker взять на себя рендеринг HTML для навигации после того как он будет смонтирован. Это может поддерживать кешированные компоненты и шаблоны в актуальном состоянии и позволяет использовать навигацию в стиле SPA для рендеринга новых UI-частей в той же сессии. Такой подход лучше всего работает, когда вы можете поделиться одним и тем же шаблоном и кодом маршрутизации между сервером, клиентской страницей и service worker.
SEO соображения
Команды часто учитывают влияние SEO при выборе стратегии для рендеринга в вебе. Серверный рендеринг часто выбирается для обеспечения поисковым роботам возможности лёгкого «полного поиска». Поисковые роботы могут понимать JavaScript, но часто существуют ограничения, о которых стоит знать в части того как они рендерят. Рендеринг на стороне клиента может работать, но часто не без дополнительного тестирования и трудной работы. В последнее время динамический рендеринг также стал вариантом, заслуживающим внимания, если ваша архитектура в значительной степени ориентирована на клиентский JavaScript.
В случае сомнений, инструмент Mobile Friendly Test бесценен для проверки, что выбранный вами подход делает то, что бы вы хотели. Он показывает визуальный предварительный просмотр того, как какую-либо страницу видет поисковый робот Google, сериализованный HTML контент, найденный (после выполнения JavaScript), и любые ошибки, обнаруженные во время рендеринга.
Заключение.
При принятии решения о подходе к рендерингу, измеряйте и понимайте, каковы ваши «узкие места». Подумайте, может ли статический рендеринг или серверный рендеринг дать вам хотя бы 90% возможностей. Совершенно нормально обычно отправлять HTML с минимальным количеством JS, чтобы получить интерактивный опыт. Вот удобная инфографика, показывающая спектр возможностей в разрезе сервер-клиент:
Благодарности
Спасибо всем этим людям за отзывы и вдохновение:
Jeffrey Posnick, Houssein Djirdeh, Shubhie Panicker, Chris Harrelson, and Sebastian Markbåge