Чтобы помочь нам понять рендеринг на стороне сервера, мы можем начать чтение этой статьи со следующих вопросов: Что такое рендеринг на стороне сервера? Зачем использовать рендеринг на стороне сервера? Когда использовать рендеринг на стороне сервера? Как использовать рендеринг на стороне сервера?
Что такое серверный рендеринг
Чтобы понять рендеринг на стороне сервера, мы должны сначала понять концепцию рендеринга: рендеринг — это сборка данных и шаблонов в html.
Рендеринг на стороне клиента (CSR) и рендеринг на стороне сервера (SSR)
Чтобы лучше понять рендеринг на стороне сервера, мы можем сравнить рендеринг на стороне сервера с рендерингом на стороне клиента.
рендеринг на стороне клиента
Фронтенд занимается просмотром и взаимодействием, а бэкэнд только предоставляет данные интерфейса.Фронтенд запрашивает данные с сервера через ajax.Получив данные, он генерирует DOM и вставляет его в HTML-страницу через js, и, наконец, отображает его. пользователю. Код страницы не виден в исходном коде браузера.
Преимущества рендеринга на стороне клиента:
- Уменьшите вычислительную нагрузку сервера
- Front-end и back-end разделены, и команде нужно нести ответственность только за свои задачи в разработке команды, что значительно повышает эффективность разработки.
Недостатки рендеринга на стороне клиента:
- Не способствует SEO, сканеры поисковых систем не могут видеть полный исходный код программы.
- Когда количество запросов увеличивается, время ожидания пользователя увеличивается, что приводит к медленной отрисовке первого экрана.
- потребляет производительность браузера пользователя
рендеринг на стороне сервера
Прежде чем вернуть html, сервер заполняет определенную область и символ данными для генерации html, а затем отправляет их клиенту html. Клиент анализирует html и, наконец, отображает страницу пользователю. Код страницы можно увидеть в исходный код браузера.
Преимущества рендеринга на стороне сервера:
- Быстрый отклик, хороший пользовательский интерфейс, быстрый рендеринг первого экрана
- Дружественный к поисковым системам, сканеры поисковых систем могут видеть полный исходный код программы, что полезно для SEO.
Недостатки рендеринга на стороне сервера:
- Увеличивает вычислительную нагрузку сервера и потребляет производительность сервера.
- Его нелегко поддерживать.Если средний уровень узла не используется, разделение труда между интерфейсом и сервером неясно, и хорошая параллельная разработка невозможна.
Сравнение двух визуализаций
По сути, два рендеринга одинаковы, оба представляют собой сращивание строк для генерации html, и разница между ними в конечном итоге отражается на затратах времени и производительности.
Клиент делает запросы данных в разных сетевых средах, и клиенту необходимо пройти период от загрузки js до запроса данных и рендеринга страницы. Вызывает много затрат времени и производительности браузера. Серверная сторона запрашивает интрасеть, ответ данных быстрый, и нет необходимости ждать загрузки кода js.Вы можете сначала запросить данные, затем отрендерить видимую часть, а затем вернуть ее клиенту. Время отклика клиентской страницы также меньше.
Подробнее см. в дорожной карте рендеринга ниже:
Зачем использовать рендеринг на стороне сервера
Когда речь заходит о том, почему используется рендеринг на стороне сервера, первое, что приходит на ум, это то, какую проблему решает рендеринг на стороне сервера. Из вышеизложенного можно кратко резюмировать два момента.
Быстрая загрузка выше сгиба
При клиентской отрисовке помимо загрузки html необходимо дождаться загрузки js/css, а затем выполнить js для отрисовки страницы, все это время пользователь ждал, а серверу нужно только загружать содержимое текущей страницы вместо загрузки всего сразу .js файла. Время ожидания значительно сокращается, а загрузка первого экрана становится быстрее.
Выгодно для SEO-оптимизации
Страница, отображаемая сервером, помогает поисковым системам идентифицировать содержимое страницы, что полезно для SEO.Так называемая SEO относится к использованию правил поисковых систем для улучшения естественного рейтинга веб-сайтов в соответствующих поисковых системах. Современные сканеры поисковых систем, как правило, работают в режиме полнотекстового анализа.Содержимое анализа охватывает содержимое трех основных частей веб-сайта: текст, мультимедиа (в основном изображения) и внешние ссылки, которые используются для определения типа и темы. веб-сайта. Для рендеринга на стороне клиента поисковые системы не могут включать страницы, которые динамически отображаются с помощью js после сканирования данных ajax. Код страницы, отображаемый сервером, можно увидеть в исходном коде, что полезно для идентификации поисковыми системами.
Когда использовать рендеринг на стороне сервера
Мы уже знаем, что двумя основными преимуществами рендеринга на стороне сервера являются рендеринг на первом экране и SEO-оптимизация.Если требования к пользовательскому опыту относительно высоки или требуется SEO-оптимизация, мы можем использовать рендеринг на стороне сервера. Но разве вам не нужно использовать рендеринг на стороне сервера? Ответ не обязательно, потому что стоимость рендеринга на стороне сервера дороже, чем рендеринг на стороне клиента (ресурсы сервера ограничены и ценны). боковой рендеринг Рендеринг устраняет недостатки медленной оптимизации первого экрана и неблагоприятного SEO.
- При решении вопросов SEO используйтеprerender, обновить поисковую систему.
- Белый экран может добавить эффекты загрузки и Skeleton Screen.
Одним словом: Актуальное развитие основано на реальных сценариях.
Как использовать рендеринг на стороне сервера
Фреймворк Next.js рекомендуется для разработки рендеринга на стороне сервера на основе фреймворка React.Next.js— это облегченная среда приложения для рендеринга на стороне сервера React. ... делает приложения React прощеNext.js— это облегченная среда приложения для рендеринга на стороне сервера React.
На основе рендеринга на стороне сервиса vue рекомендует среду разработки Nuxt.js.Nuxt.js — это облегченная платформа приложений, основанная на Vue.js, которая может использоваться для создания приложений рендеринга на стороне сервера (SSR), а также может выступать в качестве механизма статического сайта для создания приложений статического сайта.Он обладает характеристиками элегантного кода. наслоение конструкции и горячая загрузка.
Далее давайте создадим фреймворк рендеринга на стороне сервера на основе Typescript+Ant-Design+Redux+Next.js.
Ссылка на ссылку
Разница между рендерингом на стороне сервера и рендерингом на стороне клиента
Рендеринг на стороне сервера (SSR)
наконец
Оригинал здесь:gitHubЕсли есть какие-то упущения, пожалуйста, поправьте меня! !
Если вы найдете это полезным! Пожалуйста, не забудьте поставить лайк или подписаться!Ваше внимание будет для меня движущей силой двигаться вперед! ! Утка! ! !
"Fearless Front End" время от времени обновляет превосходные технические статьи сообщества!