Недавно я разрабатываю инструмент рендеринга на стороне сервера.В небольшой статье я кратко представляю рендеринг на стороне сервера и методы и способы рендеринга на стороне сервера. В конце этой статьи есть два метода рендеринга на стороне сервера.С учетом плюсов и минусов рендеринга на стороне сервера, какой метод рендеринга на стороне сервера вы бы выбрали?
Что такое рендеринг на стороне сервера
Используйте React для создания клиентских приложений. По умолчанию вы можете выводить компоненты React в браузере для создания DOM и управления DOM. React также может быть преобразован в HTML через Node.js на стороне сервера, а обработанная строка HTML может быть «отрисована» непосредственно на стороне браузера.Этот процесс можно считать «изоморфным», поскольку большая часть кода приложения может храниться на на сервере и запустить на клиенте.
Зачем использовать рендеринг на стороне сервера
По сравнению с традиционным SPA (одностраничным приложением) преимущества рендеринга на стороне сервера (SSR) в основном заключаются в следующем:
- Лучшее SEO, так как сканеры поисковых систем могут напрямую просматривать полностью обработанные страницы.
- Лучшее взаимодействие с пользователем, для медленных сетевых условий или медленных устройств, браузер отображает сразу после загрузки ресурса, не дожидаясь завершения всего JavaScript.полная загрузкаа такжевоплощать в жизнь, отображается HTML-код, отображаемый сервером.
Недостатки рендеринга на стороне сервера
-
Из-за разницы между серверной и клиентской средой браузера вам необходимо обратить внимание на выбор некоторых библиотек с открытым исходным кодом.Некоторые библиотеки не могут быть выполнены на сервере.Например, если у вас есть операции получения объекта, такие как документ и окно, на сервере будет сообщено об ошибке, поэтому вВыбранная библиотека с открытым исходным кодом должна быть проверена.
-
Используя рендеринг на стороне сервера, например, для создания службы, которая специально визуализируется на стороне сервера, а до этого различались только статические ресурсы, необходимые клиенту, вам также потребуются знания сервера и работы Node.js и развертывание технического обслуживания,Попросите больше очков знаний, которые вам нужно освоить
-
На сервер нужно больше нагрузки, а рендеринг делается в Node.js, и много ресурсов процессора будет занято из-за Node.js.
-
Ниже описывается «операция» рендеринга на стороне сервера, в новой ОС есть новые проблемы, такие как двойной запрос API, различные проблемы с сервером, вы ничего не можете сделать, потому что этот новый инструмент Golang напишет вашей команде или вам нужно знать о golang, вы говорите, что газ не газ, люди должны учиться.
Два способа рендеринга сервера
Согласно приведенному выше введению, у нас есть понимание плюсов и минусов рендеринга на стороне сервера.Мы можем взвесить все за и против.Недавно мы работали над проектами рендеринга на стороне сервера и обнаружили множество вариантов рендеринга на стороне сервера. решения, которые можно условно разделить на две категории.
первый способ
Традиционный способ рендеринга на стороне сервера, чтобы улучшить взаимодействие с пользователем и улучшить SEO, существует множество инструментов, которые используют этот способ, например, React (Next.js), Вью (Nuxt.js)Ждать.
Некоторые инструменты будутwebpackЗапуск в производственной среде на стороне сервера, компиляция в реальном времени и кэширование результатов компиляции по-прежнему являются традиционными методами, ноwebpackВыполнение компиляции в реальном времени на сервере по-прежнему является проблемой предварительной компиляции в среде разработки.
я решилwebpackПоместите его в среду разработки, выполните только функцию разработки и упаковки, упаковкиклиентский пакет,комплект серверов, файл сопоставления ресурсовassets.json,CSSи другие ресурсы для развертывания.
- комплект серверовДля рендеринга на стороне сервера (SSR)
- клиентский пакетЗагрузите его в браузер, и браузер загрузит больше других модулей (чанков) js через пакет
-
файл сопоставления ресурсов
assets.jsonявляется,комплект серверовПри подготовке необходимого HTML нужно предварительно вставить те модули (chunk) js и CSS, которые как раз улучшают пользовательский опыт.
Для конкретного использования вы можете увидеть колесо, которое я недавно построил.kkt-ssr, это колесо инкапсулирует часть инструмента. Вам нужно только написать бизнес-код и небольшое количество кода рендеринга на стороне сервера. Он также поставляется с дюжиной примеров плюс относительно полный пример.react-router+rematch, похожий наnext.js, но есть существенная разница.
второй способ
Это инновационный метод, внешнее одностраничное приложение, как играть раньше, как играть сейчас, еще один шаг - вам нужно посетитьRendoraДля служб перехватите, требуется ли рендеринг на стороне сервера в начале. Следующее изображение является официальным изображением:
Изначально этот метод был всего лишь идеей.Идея в том, что интерфейсу не нужно заботиться о рендеринге на стороне сервера, разве это не просто решение SEO? , Когда эти краулеры приходят, они могут судить по информации заголовка, писать сервис, а потом давать краулерам нужный им контент.Вчера он оказался в тренд-листе GitHub, и я случайно увиделRendoraЭтот инструмент, так совпало, просто имеет ту же идею, этот инструмент в основном обеспечивает рендеринг на стороне сервера с нулевой конфигурацией для веб-сканеров, чтобы легко улучшать современные среды Javascript (такие как React.js, Vue.js, Angular.js, и т. д.) Вопросы SEO для веб-сайтов, разработанных в.
Этот способ очень хорош тем, что не нужно менять предложение ранее написанного проекта, достаточно запустить сервис Rendora. Для каждого запроса с внешнего сервера или внешнего (краулер Baidu Google) Rendora будет обнаруживать или фильтровать в соответствии с файлом конфигурации, заголовком, путем, чтобы определить, должна ли Rendora доставлять только возвращенные данные с внутреннего сервера. .исходный HTMLИли используйте безголовый HTML-код, отображаемый на стороне сервера, предоставляемый Chrome. Точнее, для каждого запроса есть 2 пути:
- Запросы заносятся в белый список как кандидаты для SSR (т. е. отфильтрованные запросы Get), и Rendora инструктирует безголовый экземпляр Chrome запрашивать соответствующую страницу, отображать ее и возвращать ответ, содержащий окончательный HTML-код, отображаемый на стороне сервера. Обычно вам нужно только внести в белый список такие инструменты веб-скрейпинга, как Baidu, Google и поисковый робот Bing.
- Не внесен в белый список (то есть запрос не является GET-запросом или не проходит никакие фильтры), Rendora будет просто действовать как обратный HTTP-прокси, просто передавая запрос и ответ как есть.
Rendora можно рассматривать как обратный прокси-сервер HTTP, который находится между вашими внутренними серверами (например, Node.js/Express.js, Python/Django и т. д.) и, возможно, вашим внешним прокси-сервером (например, nginx, traefik, apache и т. д.). ),
Rendora — это почти идеальный динамический рендерер, который я видел, предлагая рендеринг на стороне сервера с нулевой конфигурацией.
Какой рендеринг на стороне сервера мы должны выбрать?
Rendora, новый способ очень мощный и имеет много преимуществ:
- Мигрировать старые проекты удобно, а код front-end и back-end менять не нужно.
- Потенциально более высокая производительность, возможно, меньшее потребление ресурсов (ЦП), двоичные файлы, написанные на Golang.
- Несколько стратегий кэширования
- У вас уже есть контейнер для докеров
Этот инструмент, страница, отображаемая сервером, должна быть кэширована, и небольшая проблема, вызванная кешем,
- Из-за кэширования проблема производительности и проблема двойного вызова API, рендеринг на стороне сервера, рендеринг на стороне клиента обычно вызывают API один раз, но теперь вызывают его дважды.
- Кэшированные страницы не могут быть своевременно очищены.Например, если веб-сайт обнаружит, что пользователь отправил неверную информацию и нуждается в очистке, кешированные страницы необходимо очистить.
- Если вы хотите улучшить взаимодействие с пользователем, некоторые страницы на стороне браузера должны быть обработаны на стороне сервера.В это время серверная сторона должна запрашивать API, могут возникнуть проблемы с разрешениями или чтение HTML непосредственно из кеш может обслуживаться на стороне клиента браузера Несовместимая ошибка между боковой и браузерной визуализацией.
Если вы не рассматриваете два вышеупомянутых метода, то Rendora станет вашим идеальным решением для рендеринга на стороне сервера.
Суммировать
почувствуй мои колесаkkt-ssrВроде зря написал.После анализа выяснилось,что эффект от него все-таки небольшой.По крайней мере решает проблему несогласованности в рендеринге,вызванную не однократным вызовом API,и проблему разрешений вызовов API. Но я предпочитаю путь Рендора, за которым будет будущее.
В любом случае, колеса все равно нужны от Star. 😂