Стратегия рендеринга HTML NodeJS

Мы хотим создать готовый к производству сайт социальной сети (стиль Facebook или Instagram). Мы планируем использовать Node на стороне сервера и ищем лучшую технологию для визуализации компонентов вида на стороне сервера.Стратегия рендеринга HTML NodeJS

SEO дружелюбие является обязательным, поэтому Угловая не кажется подходящей (если никто не может защищать Prerender.io как солидный выбор).

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

Посмотрев на React, это похоже на хороший выбор, но есть одна вещь, о которой я беспокоюсь - факт, что из коробки вам нужно будет загружать все данные на уровне маршрута в противоположность компоненту уровень (с renderToString синхронно - см the discussion here

Я не очень понимаю, что будет надежной альтернативой на стороне сервера визуализации, если мы передаем на React

Если я правильно understnd, основной способ (. что позволяет выполнять асинхронную загрузку из субкомпонентов) будет примерно таким:

// The main page route 
app.get('/',function(){ 
    var html = renderBase(); 
    renderHeader(html) 
    .then(
    renderFeed(html) 
).then(
    renderFooter(html) 
); 
}) 

renderBase = function(){ 
    return = "<html><body>..." 
} 

renderHeader = function(){ 

    someIoFunction(function(){ 

    // build HTML based on data 

    }) 

}

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

Спасибо.

источник

2015-07-07 Shahar

На сервере вам всегда нужно было загружать все данные заранее. Я не видел никаких хороших альтернатив этому нигде (не жертвуя временем загрузки, конечно). – FakeRainBrigand

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

В настоящее время искатель Google [выполняет javascript] (http://googlewebmastercentral.blogspot.no/2014/05/understanding-web-pages-better.html). Какие другие сканеры являются для вас проблемой? – Jorg

В основном решения сводятся к использованию соглашения, в котором каждый компонент имеет статическую функцию, которая возвращает нужные ему данные, и она вызывает функцию с тем же именем для компонентов, которые ей нужны. Это примерно как это выглядит:

class CommentList { 
    static getData = (props) => { 
    return { 
     comments: api.getComments({page: props.page}) 
    }; 
    } 
} 

class CommentApp { 
    static getData = (props) => { 
    return { 
     user: api.getUser(), 
     stuff: CommentList.getData({page: props.commentPage}) 
    }; 
    } 
    render(){ 
    return <CommentList comments={this.props.stuff.comments} /> 
    } 
}

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

источник

2015-07-07 06:17:08 FakeRainBrigand

Стратегия рендеринга HTML NodeJS

ответ

Смежные вопросы