Vue SSR отправляется в пит-тур

предисловие

Эта статья неVue SSRруководство по началу работы, без пошагового введенияVue SSRНачни, если хочешьVue SSRВводный урок, рекомендуемое чтениеVue"Официальный сайт"Vue SSRРуководство, которое должно быть максимально подробнымVue SSRРуководство по началу работы. Значение этой статьи состоит главным образом в том, чтобы представить, какSSRСамые популярные, используемые в рендеринге на стороне сервераvue uiбиблиотекаelement-uiбиблиотека компонентов иechartsплагины, и примеры, представленные в этой статье, преодолеваютHackerNews DemoЗадача, которую нужно через стенку бегать, читает новичокSSRВ официальной документации, если у вас возникнут сомнения, вы можете напрямую выполнить соответствующие экспериментальные проверки на основе примеров в этой статье, чтобы развеять сомнения. примеры этогоgithubАдрес:GitHub.com/ревматизм123/…(приветственная звезда)

1. Что такое рендеринг на стороне сервера (SSR)?

Объяснение, данное на официальном сайте:

Vue.js — это фреймворк для создания клиентских приложений. По умолчанию компоненты Vue могут выводиться в браузере для создания DOM и управления DOM. Однако также возможно отображать тот же компонент в виде строк HTML на стороне сервера, отправлять их непосредственно в браузер и, наконец, «активировать» эти статические теги как полностью интерактивное приложение на стороне клиента.

То есть: SSR примерно означает, что vue рендерит весь HTML-фрагмент тега на стороне клиента, чтобы завершить работу на стороне сервера, а процесс возврата HTML-фрагмента, сформированного на стороне сервера, непосредственно клиенту называется server- боковой рендеринг.

Во-вторых, преимущества и недостатки рендеринга на стороне сервера.

2.1. Преимущества рендеринга на стороне сервера:

(1) лучшеSEO: так какSPAСодержание страницыAjaxfetch, и сканеры поисковых систем не ждутAjaxПосле асинхронного завершения захватите содержимое страницы, поэтому вSPAMedium не сканирует страницуAjaxполученный контент;SSRЭто возврат обработанной страницы непосредственно с сервера (данные уже включены в страницу), чтобы поисковый робот мог сканировать отображаемую страницу;

(2) Более быстрое время доставки контента (более быстрая загрузка в верхней части страницы):SPAБудет ждать, пока все vue скомпилируетсяjsПосле загрузки файлов начинается рендеринг страницы, а загрузка файла занимает определенное время, поэтому рендеринг первого экрана занимает определенное время;SSRСтраница отображается непосредственно сервером и возвращается к отображению напрямую, не дожидаясь загрузки.jsфайл, а затем перейти к рендерингу и т. д., поэтомуSSRиметь более быстрое время доставки контента;

2.2. Недостатки рендеринга на стороне сервера:

(1) Дополнительные условия разработки: например, рендеринг на стороне сервера поддерживает толькоbeforCreateиcreatedДве функции-ловушки, из-за которых некоторые внешние библиотеки расширений требуют специальной обработки для запуска в приложениях, отображаемых на сервере, и полностью статическое одностраничное приложение, которое можно развернуть на любом статическом файловом сервере.SPAРазличные серверные приложения рендеринга должны бытьNode.js serverрабочая среда;

(2) Большая нагрузка на сервер: вNode.jsОтрисовка полного приложения вserverболее занят CPUресурс (CPU-intensive - CPUплотно), поэтому, если вы ожидаете среду с высоким трафиком (high traffic), подготовьтесь к соответствующей нагрузке на сервер и разумно используйте стратегию кэширования.

3. Введение в демонстрацию vue-ssr

Примеры в этой статье основаны на примерах, приведенных Юдой.HackerNews DemoСделайте ремонт, чтобы устранить необходимость в доступе через стену

https://hacker-news.firebaseio.comотносится кapi, то проект использует самые популярныеvue ui библиотекаelement-ui, и исследовалecharts.js Возможность рендеринга подключаемых модулей на стороне сервера; структура каталогов экземпляра и рендеринг экземпляра следующие:

Логика соответствующего кода каждого файла подробно описана в коде, поэтому здесь подробно описываться не будет.githubвыше clone Посмотрите, вот основной вид VueПринципиальная схема рендеринга на стороне сервера на официальном сайте

Как видно из рисунка,ssrЕсть два входных файла,client.js и server.js, оба содержат код приложения,webpackДва входных файла упакованы отдельно для сервера.server bundleи для клиента client bundle, Когда сервер получает запрос от клиента, он создает средство визуализацииbundleRenderer,этоbundleRenderer будет читать сгенерированный выше server bundle файл, выполнить его код и отправить сгенерированныйhtml в браузер, дождитесь загрузки клиентаclient bundleПосле этого он будет сгенерирован серверомDOM провестиHydration(судя по этомуDOMи твой собственныйDOMЭто то же самое, если это то же самое, клиентvueэкземпляр, смонтированный на этомDOM, иначе будет выдано предупреждение).

4. Резюме наступления на яму в этом примере

4.1. Ссылкиvueфайл сообщит, что файл не найден

проблема:если цитируется vueфайл не добавлен.vue суффикс, он сообщит, что файл не найден, то есть:

import adminContent from './views/adminContent';

Будет сообщено о следующей ошибке:

решать:Цитироватьvueфайл добавлен .vueсуффикс, то есть:

import adminContent from './views/adminContent.vue';

4.2 Введениеelement-uiстиле, сообщается об ошибке

проблема:Внедрить в проектelement-uiстиль, то есть:

import 'element-ui/lib/theme-chalk/index.css';

Будут сообщены следующие ошибки, и никаких ошибок не будет сообщено, если файл стиля не будет введен:

ReferenceError: window is not defined

решать:Требуется конфигурация синтаксического анализа файла стиля:

(1) Установите плагин для разбора стилей:

npm install css-loader --save

(2) вwebpack.base.config.jsнастроить вcss-loader:

{ 
 test: /\.css$/,  
 loader: ["css-loader"]
}

4.3 Введение element-ui стиле, сообщается об ошибке

проблема:Внедрить в проект element-ui стиль, то есть:

import 'element-ui/lib/theme-chalk/index.css';

Будут сообщены следующие ошибки, и никаких ошибок не будет сообщено, если файл стиля не будет введен:

Module parse failed: Unexpected character '@' (1:0) You may need an 
appropriate loader to handle this file type.

решать:Требуется конфигурация синтаксического анализа файла стиля:

(1) Установите плагин для разбора стилей:

npm install style-loader --save

(2) вwebpack.base.config.jsСвязанная конфигурация в:

{  
 test: /\.css$/,  
 loader: ["vue-style-loader", "css-loader"]
},
{  
 test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,  
 loader: 'file-loader'
},

4.4,element-uis компонент el-table Рендеринг на стороне сервиса

проблема:Если отображаемая сервером страница содержитel-tableкомпонент на странице, возвращенной с сервераel-tableДанные в компоненте пусты, причина el-tableкомпонент вmountИнициализировать в функции ловушкиtableданные, которые не поддерживаются при рендеринге на стороне сервераmountфункция крючка.

решать:githubвышеelment-ui Есть ветки, которые это исправляют,GitHub.com/E?Fe/Голодный…; скомпилировать исходный код этой ветки, а потом заменить вnode_modulesзаменить в element-ui изlibПросто скомпилируйте пакет.

4,5,el-tableПосле рендеринга на стороне сервера ширина таблицы не равна 100%.

проблема:el-tableПосле рендеринга на стороне сервера ширина таблицы не задана в коде на 100%, и ширина таблицы относительно мала.

решать:Сделайте дополнительные настройки стиля:

.el-table__header{ 
 width: 100%;
}
.el-table__body{ 
 width: 100%;
}
.el-table-column--selection{
 width: 48px;
}

4,6,echartsКак плагин поддерживает рендеринг на стороне сервера?

решать:использоватьnode-canvasПлагин, для конкретного использования, вы можете просмотреть написание этого примера, или вы можете просмотретьnode-canvas существуетgithubВведение выше:GitHub.com/automat предлагает/…

Существует проблема:пример используетnode-canvasСоздайте соответствующее изображение, а затем обратитесь к изображению на странице, есть проблема: сгенерированное изображение не имеет динамического эффекта. (Данный вопрос дальше не изучался, т.к.: картинка не имеет текстового содержания,seo Это не обязательно, тогда изображение генерируется на стороне сервера, а изображение загружается и рендерится на странице, будет ли рендеринг непосредственно на клиенте экономить больше ресурсов? )

V. Резюме

SSRесть лучшеSEOОн также имеет преимущества в более быстром времени поступления контента, но также имеет недостатки, такие как ограниченные условия разработки, высокое потребление ресурсов сервера и сложность для начинающих.Поэтому, требуется ли вашему проекту рендеринг на стороне сервера, вам необходимо соответствующие показатели в сочетании с вашим проектом. , не следуйте их примеру, дляSSRиSSR.

Примеры в этой статье в основном основаны наHackerNews DemoСделайте ремонт, чтобы устранить необходимость в доступе через стенуhttps://hacker-news.firebaseio.comотносится кapi , то проект использует самые популярныеvue uiбиблиотекаelement-ui , и исследовалecharts.jsВозможность рендеринга подключаемых модулей на стороне сервера помогает новичкам лучше и быстрее приступить к работе.ssr, если читать официальнуюSSRВ процессе документирования, если есть какие-то сомнения, можно провести соответствующие тестовые проверки на примере этой статьи, а потом помочь развеять сомнения. Если вы считаете, что эта статья иgithubВам поможет пример из этой статьи, помогите пожалуйста поставить звезду, пример из этой статьиgithubАдрес:GitHub.com/ревматизм123/…