Быстро внедрить ssr (рендеринг на стороне сервера) в ваше приложение vue/react.

внешний интерфейс Vue.js

предисловие

мы все знаем,Vueа такжеReactЯвляется основой для строительства клиентских приложений. По умолчанию пользовательские компоненты могут быть выведены в браузере для генерацииDOMи операцияDOM, что мы часто называем рендерингом на стороне клиента, и большинство наших основных сценSPA(одностраничное) приложение, а сSPAособенноReact,Vue,AngularПредставленный популярностью интерфейсных фреймворков, все больше и большеWeb AppИспользуется рендеринг на стороне клиента.

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

Итак, чтобы решитьSPAЭти проблемы, с которыми сталкивается приложение, мы должны учитыватьSSR:

Рендеринг на стороне сервера (ssr), который относится к завершению страницы серверомHTMLСращивание структуры и непосредственное сращиваниеHTMLОтправьте его в браузер, а затем привяжите к нему состояние и события, став технологией обработки полностью интерактивных страниц.

Для страниц, отображаемых сервером, сервер может напрямую возвращать содержимое с данными в виде текста HTML.поисковый роботСодержимое страницы можно легко получить, а для клиентских приложений рендеринга клиент должен выполнитьJavascriptчтобы получить правильный веб-контент. В настоящее время, кромеGoogle,Bingслужба поддержкиJavascriptКроме того (также будут некоторые ограничения), большинство других поисковых систем не поддерживаютJavascript, он не сможет получить правильный контент страницы. Техническое решение, которое будет обсуждаться в этой статье, как раз и состоит в том, чтобы решитьSPAвнизSSRТехническая дилемма Далее, давайте взглянем на общую реализацию технологии SSR.

Резюме

схема реализации технологии ssr (server-side rendering)

Далее я перечислю некоторые часто используемыеvue/reactСхема рендеринга на стороне сервера выглядит следующим образом:

  • Схема рендеринга на стороне сервера с использованием next.js/nuxt.js
  • Используйте node+vue-server-renderer для реализации серверного рендеринга проектов vue.
  • Использование Node + Render RendertostaticMarkUp для реализации серверного рендеринга проекта React
  • Традиционные веб-сайты реализуют ssr с помощью механизмов шаблонов (таких как ejs, jade, pug и т. д.).
  • Рендеринг SPA-проектов на стороне сервера с использованием rendertron

Выше приведены схемы, которые автор практиковал ранее, а последнюю схему я подробно представлю в следующем разделе, т.к.next/nuxtЭто существующее решение для рендеринга на стороне сервера. Документ написан более подробно. Автор не будет вводить его здесь слишком подробно. Здесь мы кратко представляем второе и третье решения.

1. Используйте node+vue-server-renderer для реализации серверного рендеринга проектов vue.

Во-первых, vue-server-renderer полагается на API узла, поэтому он может работать только в среде узла, нам нужно сначала установить его:

npm install vue vue-server-renderer --save

Используется в узле, код выглядит следующим образом:

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>趣谈前端： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

Конечно, реальная ситуация намного сложнее, чем в случае выше.Мы можем специально написать template.html, а затем импортировать внутренние данные через разницу в шаблоне, чтобы реализовать рендеринг на стороне сервера.При использовании этого метода мы по-прежнему должны поддерживать два набора кодов.

2. Используйте node + React renderToStaticMarkup для реализации рендеринга на стороне сервера реагирующих проектов.

Использование этой схемы похоже на схему vue, но здесь мы используем API, который поставляется с реакцией для реализации ssr, Простой код реализации выглядит следующим образом:

var express = require('express');
var app = express();
 
var React = require('react'),
    ReactDOMServer = require('react-dom/server');
 
var App = React.createFactory(require('./App'));
 
app.get('/', function(req, res) {
    var html = ReactDOMServer.renderToStaticMarkup(
        React.DOM.body(
            null,
            React.DOM.div({id: 'root',
                dangerouslySetInnerHTML: {
                    __html: ReactDOMServer.renderToStaticMarkup(App())
                }
            })
        )
    );
 
    res.end(html);
});
 
app.listen(80, function() {
    console.log('running on port ' + 80);
});

Вышеупомянутое использовалосьrenderToStaticMarkup, мы все знаем, что react-dom предоставляет две функции рендеринга на стороне сервера, а именно:

  1. renderToString: Преобразуйте компонент React в строку HTML, и сгенерированный HTML DOM будет иметь дополнительные атрибуты: каждый DOM будет иметь атрибут data-react-id, а первый DOM будет иметь атрибут data-checksum.

  2. renderToStaticMarkup: Преобразование компонента React в строку HTML, но модель DOM, генерирующая HTML, не будет иметь дополнительных атрибутов, что позволит сохранить размер строки HTML.

Так что здесь мы обычно используемrenderToStaticMarkupТочно так же в реальном бизнес-сценарии мы также напишем 2 набора кодов для достиженияssr.

Рендеринг на стороне сервера с использованием Google rendertron

GoogleРелизRendertronсделатьSPAтакже может выполняться без поддержкиJavascriptПоисковая система сканирует отображаемый контент. Принцип в основном заключается в использованииHeadless Chromeвыполнять в памятиJavascript, и после получения полного содержимого вернуть его клиенту.

мы, как правилоRendertronРазвернуть как автономныйHTTPобслуживание, то дляWebКонфигурация платформы приложенияGoogleОфициально предоставленное промежуточное ПО или добавление соответствующих правил маршрутизации к обратному прокси-серверу, чтобы можно было обнаружить поисковый робот.UA, запрос может быть проксированRendertronСлужить. Автор резюмирует принципиальную принципиальную схему его базовой реализации для вашего удобства:

RendertronПредоставляются два основных API:

  • RenderИспользуется для отображения содержимого веб-сайта.
  • ScreenshotДелайте скриншоты содержимого веб-сайта

В сценарии мы используем SEORenderинтерфейс.

Например, когда клиент запрашивает наш веб-сайт, наш сервер может использовать заголовок запросаUser AgentУзнайте, содержит ли онBaiduspider/2.0ключевое слово, если оно есть, то можно считать, что текущий клиент является краулером Baidu и может проксировать этот запрос на сервис Rendertron./render/客户端请求地址маршрут, пустьRendertronпомочь с выполнением на страницеJavascriptИ вернуть окончательный контент в поисковую систему Reptile.

использоватьRendertronПреимущество в том, что мы можем игнорировать часть рендеринга на стороне сервера и полностью следоватьSPAрежиме разработки проектов, и нет необходимости писать избыточный совместимый код, чтобы быть совместимым с рендерингом на стороне сервера.

Реализация

Сначала нам нужно установить Rendertron, который можно найти по адресуgithubУзнайте, как его установить и использовать, лучше всего установить его перед установкойdocker, В настоящее времяdockerПоследняя версия для поддержки установки Jool, установка очень легко начать.

1. Запуск локально

После установки докера мы сначала устанавливаем рендертрон глобально:

npm install -g rendertron

Затем нам нужно установить Google Chrome (поскольку квалифицированные разработчики должны иметь Google Chrome~), а затем мы можем использовать его cli для запуска службы, нам просто нужно выполнить следующую команду в командной строке:

rendertron

Затем консоль напечатает адрес, по которому запущена локальная служба, напримерlocalhost:3000На данный момент нам нужно только ввести веб-сайт, который мы хотим отобразить после адреса:localhost:3000:render/你的网站地址, Как показано ниже:

В это время нашrendertronСервис построен, и теперь мы можем реализовать ssr на стороне сервера Код выглядит следующим образом:

const koa = require('koa');
const app = new koa();
app.use(async (ctx, next) => {
    ctx.type = "html";
    if(/Baiduspider\/2\.0/g.ctx.header['user-agent']) {
      // 是百度爬虫,则转发到rendertron服务中
      ctx.redirect(`http://localhost:3000/render/${ctx.url}`)
    }else {
        // 渲染正常的路由页面
    }

    await next();
    })

app.listen('80');

Конечно, если наш стек фоновых технологий используетexpress, rendertron имеет специальное промежуточное программное обеспечение, которое можно использовать, оно не только может перехватывать поисковые роботы Baidu, конкретное использование заключается в следующем:

const express = require('express');
const rendertron = require('rendertron-middleware');

const app = express();

app.use(rendertron.makeMiddleware({
  proxyUrl: 'http://your-rendertron-instance/render',
}));

// 正常的路由和页面渲染逻辑
app.use(...);
app.listen(81);

Поэтому для удешевления разработки автор предлагаетrendertron, развернуть набор серверов отдельно для реализацииssrОднако нам необходимо учитывать проблему расширения при увеличении трафика веб-сайта, а также настраивать и создавать вспомогательные службы, такие как обратный прокси-сервер или балансировка нагрузки.

Более поздняя перспектива

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

наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реального боя, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории