Разделение клиентской части и серверной части является основной тенденцией в веб-разработке последнего времени.В настоящее время большое количество компаний используют метод разработки с разделением внешней и внутренней части. Тогда давайте поговорим о нескольких концепциях, которые необходимо понять и затронуть при разработке разделения front-end и back-end: SPA, SEO и SSR. Прежде чем говорить об этих концепциях, давайте поговорим о разделении интерфейсной и серверной частей, которое я понимаю.

Разделение переда и задка как я понимаю

задний план

Впервые я столкнулся с фронтендом и бэкендом веба более года назад, тогда я планировал участвовать в конкурсе, так как бэкенд и веб-интерфейс никто не писал, я начал изучать это сам, а затем я научился, делая это. Кроме того, в нашем проекте в то время также был мобильный терминал, поэтому серверная часть должна была предоставлять интерфейс для мобильного терминала в дополнение к предоставлению данных для отображения веб-интерфейсных страниц.На самом деле, большая часть данных на обоих концах мы одинаковы.
В традиционной веб-разработке внешнего и внутреннего интерфейса большинство страниц пишется внешним интерфейсом, а затем перебрасывается на серверную часть, чтобы серверная часть могла интегрировать страницы в проект. Существует проблема сопряжения фронтенда и бэкенда, в первую очередь для бэкенда нужно писать не только логику бэкенда, но и интегрировать фронтенд-страницу (если есть есть какие-либо проблемы со страницей, это будет еще более трагично, все слезы~~), а для внешнего интерфейса нелегко увидеть реальную визуализацию страницы, отображение не способствует разработке и отладке, и эффективность здесь, естественно, становится проблемой.
Именно из-за сильной связи между передней и задней частями изменения на одной стороне могут повлиять на другую сторону.
Для некоторых проблем, подобных вышеперечисленным, возникла идея разделения переднего и заднего концов.

основная концепция:

перед и зад согласноAJAXинтерфейс для взаимодействия с данными, в настоящее время распространено, что серверная часть напрямую преобразует данные вJSONФормат возвращается на внешний интерфейс, и внешний интерфейс работает в соответствии с данными, возвращенными внутренним сервером.DOM

главное преимущество

• Разделение труда четкое, фронтенд и бекенд выполняют свои обязанности, бэкенд занимается реализацией бизнес-логики и функций, а фронтенд занимается дизайном страницы.
• Интерфейс понятен и разрабатывается параллельно, до того, как будет реализован интерфейс back-end, front-end может полностью пройтиNode.jsизExpressа такжеkoaи т. д. Макет интерфейса веб-фреймворка для предоставления тестовых данных.
• Повысьте эффективность разработки и сократите фронтенд и бэкэндстоимость связимучить

При разделении переднего и заднего концов задний конец обычно обеспечиваетRESTfulAPI часто возвращают данные в формате JSON, а то, что обычно используется во внешнем интерфейсе, является одной из тем, которые мы обсуждаем: SPA.

SPA

Обзор

SPAполное имяsingle page application(существуетЭнциклопедия БайдуИ ряд статей, использующих веб-приложение одной страницы, после некоторых запросов, чтобы понять, я думаю, что это должно быть приложением одним страницей на его полное имя).
СПА - этовеб приложение(веб-приложение) модель. На традиционных веб-сайтах переключение между разными страницами означает загрузку совершенно новой страницы непосредственно с сервера, а в модели SPA — динамическое переписывание частей страницы для взаимодействия с пользователями, избегая слишком многого Обмен данными, скорость отклика естественно относительно выше.
О каштане см.Знай почтититульная страница

Неблагополучной семье
Знайте, что почти на веб-странице некоторые части почти никогда не меняются, например, панели навигации, после определенного момента мы вводим вопрос.
глупый ответ
Его навигационная панель по-прежнему не изменится, но на традиционном веб-сайте при входе на новую страницу с сервера будет запрошена полная страница, а в SPA при переходе на новую страницу требуется только перезагрузка. часть страницы, которая изменилась.

Несколько распространенных фреймворков SPA

• AngularJS
• React
• Vue.js

Преимущества СПА

По сути, он имеет преимущества упомянутого выше разделения интерфейса и сервера, а также следующие преимущества.

• Переключение между страницами происходит очень быстро
• В определенной степени снижается нагрузка на внутренний сервер (не заботьтесь о логике страницы и рендеринге).
• Серверной программе нужно только предоставить API, независимо от того, является ли клиент веб-интерфейсом или мобильным телефоном и т. д.

Недостатки СПА

• Скорость открытия первого экрана очень низкая, т.к. при первой загрузке пользователю необходимо загрузить фреймворк SPA и код приложения, а затем отрендерить страницу.
• Плохо для SEO

В соответствии с этими недостатками мы представим следующие две темы, SEO и SSR, сначала поговорим о SEO.

SEO

Обзор

Раньше я мало что знал о SEO, и только недавно у меня было некоторое базовое понимание SEO.SEO(Search Engine Optimization), китайский общий перевод: поисковая оптимизация. SEO — это метод настройки веб-сайта путем понимания правил работы поисковых систем (как сканировать страницы веб-сайта, как индексировать и сортировать результаты поиска по определенным ключевым словам и т. д.). Ранжирование результатов поиска.

Часто используемая технология

Технологии поисковой оптимизации можно условно разделить на две категории: технология «белой шляпы» и технология «черной шляпы».
SEO включает в себя множество деталей, следующиеВикипедияДля введения в некоторые методы White Hat:

• Используйте короткий, уникальный и релевантный заголовок на каждой странице.
• Отредактируйте веб-страницу в соответствии с темой страницы. Замените расплывчатые слова соответствующими конкретными терминами. Это помогает аудитории, к которой обращается сайт, правильно ориентироваться на сайт при поиске в поисковой системе.
• Добавьте на сайт изрядное количество оригинального контента.
• Используйте разумные по размеру, точно описательные синдикаты, не злоупотребляя ключевыми словами, восклицательными знаками или неуместными терминами заголовков.
• Обратите внимание на формулировку URL, чтобы помочь поисковой оптимизации.
• Убедитесь, что все страницы доступны по обычным ссылкам, а не только через приложения Java, JavaScript или Adobe Flash. Этого можно добиться, используя специальную страницу со списком всего контента на сайте (карта сайта).
• Разрабатывайте ссылки естественно: Google не беспокоится об этом несколько запутанном руководстве. Напишите электронное письмо администратору сайта и скажите ему: Вы только что опубликовали отличную статью и запросили ссылку, которая, скорее всего, будет распознана поисковыми системами.
• Участвуйте в веб-группе других сайтов — при условии, что другие сайты независимы, разделяют ту же тему и имеют сопоставимые качества.

Удалив детали, не относящиеся к разработке, мы, вероятно, сможем извлечь следующую информацию:

• Заголовок: т.е. HTML<title></title>теги, например:<title>浅谈SPA、SEO、SSR | XXX 的博客</title>, в GoogleСвязанная документацияуже заявлено в<title>Тег действует как Мета, но часто взаимодействуетdescriptionпоявляться в результатах поиска

While technically not a meta tag, this tag is often used together with the "description". The contents of this tag are generally shown as the title in search results (and of course in the user's browser)

• Описание: т.е. HTML<meta>помеченdescription, например запись в энциклопедии Baidudescription:

<meta name="description" content="通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。...">

• Ключевые слова: т.е. HTML<meta>помеченkeywords, например

<meta name="keywords" content="META标签 META标签作用 META标签组成 META标签属性 META标签描述设计 META标签错误 META标签标签">

GoogleСвязанная документацияНет упоминания об использованииmeta keywords, Quora также обсудила, использует ли Google до сих порmeta keywordsэтовопрос, большинство ответов заключается в том, что Google больше не использует его, но некоторые другие поисковые системы, такие как Baidu, все еще используют его.meta keywords.

Конфликт между SPA и SEO

SPA, о котором мы упоминали ранее, не годится для SEO, потому что в настоящее время некоторые поисковые системы, такие как Google, bing и т. д., хотя их краулеры уже поддерживают выполнение JS и даже получают данные через AJAX, но поддержка асинхронных данных отсутствует. недостаточно. (Возможно также, что поставщик поисковой системы считает это ненужным),Vue SSRсказал в

Если ваше приложение сначала отображает гирляндную диаграмму загрузки, а затем извлекает контент с помощью Ajax, сканер не ждет завершения асинхронности, прежде чем сканировать содержимое страницы.

Как было сказано ранее, в SPA-приложениях данные обычно получаются через AJAX, и здесь сложно обеспечить правильную индексацию наших страниц поисковыми системами. И есть некоторые поисковые системы, которые не поддерживают выполнение JS и выборку данных через AJAX, не говоря уже о SEO.
Для некоторых веб-сайтов SEO очень важно, например, для тех, которые в основном основаны на выводе контента.Quora,stackoverflow,Знай почтиа такжеДубанПодождите, а как я могу нормально использовать SPA, не влияя на SEO? Лу Синь сказал:

Технические проблемы всегда решаются технологиями

В этот момент на сцену выходит SSR.

SSR

Обзор

SSRдаServer-Side RenderingАббревиатура (рендеринг на стороне сервера), в обычном SPA код фрейма и страницы веб-сайта обычно отправляется в браузер, а затем в браузере генерируется и обрабатывается DOM (это также первое посещение веб-сайта SPA в та же пропускная способность и сеть. Основная причина в том, что задержка медленнее, чем при традиционном внутреннем создании HTML и отправке в браузер), но на самом деле также можно упаковать приложение SPA на сервере, визуализировать HTML на сервере и отправить его в браузер, такая HTML-страница еще не имеет возможности взаимодействовать, поэтому она также должна взаимодействовать с инфраструктурой SPA, чтобы «смешивать» в интерактивное приложение в браузере. Следовательно, пока технология SSR может использоваться разумно, она может не только в определенной степени решить проблему медленного первого экрана, но и улучшить SEO.

Преимущества ССР

• Более быстрое время отклика, браузер может отображать относительно полную страницу, не дожидаясь загрузки всего JS. Этот человек глубоко понимает меня.блогВ начале я использовал только Vue.js, но не занимался рендерингом на стороне сервера, к тому же сервер находился не на материке, и просмотр полной страницы занимал почти 4-5 секунд с момента первого входа в адрес, а иногда и длиннее.
• Благодаря лучшему SSR мы можем отображать ключевую информацию SEO в HTML непосредственно в фоновом режиме и гарантировать, что сканеры поисковой системы смогут сканировать ключевые данные.

Недостатки ССР

• По сравнению с сервером, который должен обслуживать только статические файлы, программа рендеринга, используемая в SSR, естественно, будет занимать больше ресурсов ЦП и памяти.
• Некоторые часто используемые браузерные API могут работать неправильно, напримерwindow,docmentа такжеalertи т. д., если вы его используете, вам нужно судить о рабочей среде
• Будут некоторые заморочки при разработке и отладке, т.к. задействованы браузер и сервер, а управление жизненным циклом некоторых компонентов SPA усложнится
• Могут быть некоторые факторы, из-за которых результаты рендеринга на стороне сервера не соответствуют результатам на стороне браузера.

Общая структура SSR

• РеагироватьNext
• Vue.jsNuxt

Не знаком с React и Next, без комментариев, мойблогОн использует Nuxt для рендеринга на стороне сервера. Я должен сказать, что использование Nuxt действительно красиво. Он имеет определенные ограничения (без правил и без круга) без потери масштабируемости. Документация на официальном сайте также очень хороша.

Суммировать

Разделение передней и задней части уменьшает связь между передней частью и задней частью и повышает эффективность разработки;
SPA — это front-end решение в разделении front-end и back-end;
SEO очень важно для многих веб-сайтов, а обычные SPA не способствуют SEO;
Появление SSR в определенной степени решает проблему медленного первого экрана в SPA и значительно снижает негативное влияние обычного SPA на SEO.

использованная литература

1. Search engine optimization - Wikipedia
2. Поисковая оптимизация - Википедия, свободная энциклопедия
3. Как работают одностраничные приложения — Пол Шерман — Medium
4. Meta tags that Google understands - Search Console Help
5. Does Google use meta keywords in 2018?-Quora
6. Руководство Vue SSR | Руководство по рендерингу на стороне сервера Vue.js

---

В этой работе используетсяCreative Commons Attribution-NonCommercial-No Derivatives 4.0 Международная лицензияЛицензия. При перепечатке указать:авторstaneyffer, впервые опубликовано вмой блог, оригинальная ссылка:chengfy.com/post/4