Чистый способ визуализации и повторного использования компонентов / шаблонов RactiveJS

Хорошо. Я обременен причинами SEO, чтобы изменить приложение, выполненное в expressjs/Ractive для поддержки рендеринга на стороне сервера.

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

Есть ли способ использовать большинство из того, что имеется, чтобы также отобразить некоторые из этих компонентов на сервере? Я взломал ractive-render, но документация оставляет желать лучшего, и, честно говоря, я боюсь, что в конце концов меня покинут.

Мои компоненты, по большей части, содержат слишком много шаблонов, чтобы вставлять их в определение компонента. Они организованы в иерархию папок, причем самым низким уровнем является папка с отдельным компонентом, содержащая определение компонента index.js и файл шаблона template.html. Я использую ractivate для процесса gulp / browserify, чтобы вытащить эти файлы шаблона.html при сборке.

Я ищу решение, которое позволит мне упаковать компоненты для использования как с browserify / gulp, так и с чем-то вроде ractive-render для рендеринга их в экспресс.

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

Источник

1 ответ

Это возможно - сайт http://examples.ractivejs.org/ представляет собой приложение Express, которое отображает компоненты Ractive на сервере. (FWIW репо здесь, хотя это постоянная незавершенная работа и, возможно, не особенно освещает, кроме как показать, что это возможно - shared папка содержит некоторые компоненты, которые отображаются на сервере и клиенте).

По сути, вы просто создаете экземпляр Ractive точно так же, как в браузере, за исключением того, что вы не предоставляете el собственность или звонок ractive.render(el), Вместо этого вы звоните ractive.toHTML(),

Таким образом, фрагмент вашего экспресс-приложения может выглядеть так:

var Article = require( './components/Article' );
var fetchArticle = require( './utils/fetchArticle' );

var page = `
  <!DOCTYPE html>
  <html>
  <head>...</head>
  <body>
    <@content@>
    <script src='app.js'></script>
  </body>
  </html>`;

app.get( '/articles/:slug', function ( req, res ) {
  var slug = req.params.slug;

  fetchArticle( slug )
    .then( articleData => {
      var ractive = new Article({
        data: {
          article: articleData,
          user: userData
        }
      });

      var html = page
        .replace( '<@content@>', ractive.toHTML() );

      res.send( html );
    });
  });
});

Конечно, вы также можете повторно использовать один и тот же экземпляр каждый раз, просто сбрасывая данные.

В настоящее время Ractive не имеет никакого способа для постепенного улучшения HTML-кода, отображаемого на сервере - другими словами, когда вы рендерите компонент на стороне клиента, вы уничтожаете существующий DOM. Это то, что мы планируем рассмотреть в будущем выпуске.

Источник
Другие вопросы по тегам