Hellas

не во всех
https://www.w3schools.com/css/css3_fonts.asp
https://caniuse.com/#search=font-face

А в чем у вас собственно трудность?
Допустим, я бы переписал как-то так.

function getTopicsData(tids, Uid) {

  const result = tids.map(async tid => {
      // если hgetall возвращает промис
        const topics = await redis.hgetall(`topic:${tid}`).catch(err => console.error(err));
      // если sismebmer вовзращает промис
        const subscriber = await redis.sismember(`topic:${tid}:subscribers`, Uid).catch(err => console.error(err));
        topics.subscriber = !!subscriber
        return topics; // или что вам там надо в результате? В общем, то что надо нужно вернуть тут.
    })
  
  return Promise.all(result); 
}

Например, так:
в коде страницы пишете

<script>
var globalData = '<%=JSON.stringify(this.props.globalData)%>';
</script>

Это код для ejs. Потом на клиенте в своем скрипте превращаете строку в объект.
var data = JSON.parse(window.globalData);

в base64 я бы не стал хранить. Ответ от сервера будет очень много весить, если картинок будет много. Когда-то попробовал так. Всё становится гараздо проще. В браузере конвертнул и в базу. А вот если нужно получить список товаров, например 50, и все картинки в base64, то ответ от сервера будет громадного размера.

Лучше хранить в папке, в базе путь к этой папке. Всё как всегда. Так и пришлось сделать.

Картинку проще вставить фоном, если они все разные и применить background-size: cover; Так многие делают. Например, всеми любимый vk делает точно также со всеми изображениями. Просто ограничивайте размер картинки, и всё.

Либо уже на сервере делайте обрезание картинки для нужного раздела. Так хуже, ибо нужно будет где-то хранить эти обрезанные картинки. Мне по душе фоном

https://jsfiddle.net/bs4yy1zm/

var incoming = 'test2';
var ar = [{
  name: 'test1',
  avatar: 'url1'
},
{
  name: 'test2',
  avatar: 'url2'
},
{
  name: 'test3',
  avatar: 'url3'
}];

for (var i =0; i<ar.length; i++){
    if (ar[i].name == incoming){
    	ar.push(ar.splice(i,1)[0]);
    }
}

Делаете для каждого сайта свой блок (обычно делают два - для http и https) server {}, внутри которого можете указать разные сертификаты.

Два виртуальных хоста, в каждом из которых свой сертификат.

Так заиспользуйте redux и бросайте в Main action, а в Header смотрите за изменением нужного вам поля в store. Я, конечно, не спец по react, но через роутер никто ничо не передает между компонентами. Это если компоненты не в разных ветках дерева, а если один родитель другого, то можно написать метод изменения state в родительском компоненте, передать его через props в дочерний и вызывать этот метот в дочернем, когда вам надо. Как-то так.

Тут описывается общий подход к данному вопросу.
Но он применим в академических проектах или при крохотных приложениях.

В реальности надо использовать dataflow пакеты. Прошу любить и жаловать - Redux.

Можно посмотреть в сторону:
https://reacttraining.com/react-router/#context.router
https://reacttraining.com/react-router/#history

- Проще составить правила для роутинга (!!!)
- Кто сидит на Медиуме, скорее всего пользуется Твиттером или понимает, что @smth = это отсылка к пользователю

Попадалось мне, что на форум кто-то вставил картинку с внешнего ресурса, а потом её на том ресурсе прикрыли запросом логина-пароля. Т.е. картина такая - заходит человек в тему на форуме (где была та картинка вставлена), а ему окошко всплывает с запросом логина-пароля. На заголовок многие внимания не обращают, и могут ввести что угодно - пароль для интернета (от adsl например), пароль для почты, и пароль от своей учётки на форуме, конечно! А потом начнутся вопли, что Ваш сайт такой-сякой плохой, занимается нехорошими вещами... Так что небезопасно, по меньшей мере, для посетителей.

Второй вариант возможен только при наличии babel-plugin-transform-class-properties.

Второй вариант мне удобнее, ибо не надо писать конструкторы.
Так же, благодаря этому плагину можно писать функции с сохранением контекста, которые потом передавать дочерним компонентам. Такой способ очень хорош, ибо нам не надо передавать коллбэки в виде () => this.someCallback() - это сохранит эквивалентность props и React не будет лишний раз вызывать render. Например

class MyComponent extends React.Component {
  onBtnClick = (event) => {
    // correct this
  };

  onBtnMouseUp() {
    // invalid this
  }

  render() {
    return <button onClick={this.onBtnClick} onMouseUp={this.onBtnMouseUp}>hello</button>;
  }
}

Разбить строку на массив строк, нужные из которых заменить на элементы React.

Можно с помощь RegExp - пример на JSBbin.

Рабочий пример (jsfiddle)

Основная логика находится в компоненте SearchResults:

class SearchResults  extends React.PureComponent {

  render() {
	const { target, results } = this.props

  	return (
    	<div className="SearchResults">
    	  {_
        	.chain(results)
        	.map(word => word.split(target))
                .map(parts => _.reduce(
              	  parts,
                  (res, part) => res.length > 0
                   ? [ ...res, <span className="highlight">{target}</span>, part ]
                   : [ part ]
          	  ,
                  []
        	))
                .map(word => <span className="word">{word}</span>)
                .value()
          }
    	</div>
    )
  }
}

Разбиваем слова на массив (пример 'Mathieu'.split('th') => ['Ma', 'eu'])
.map(word => word.split(target))

Затем собираем их обратно, при этом слева от каждого "кусочка" слова вставляем наш разделитель (то, что нужно выделить цветом), попутно оборачивая его в span:

.map(parts => _.reduce(
  parts,
  (res, part) => res.length > 0
    ? [ ...res, <span className="highlight">{target}</span>, part ]
    : [ part ]
  ,
  []
))

Ну и затем оборачиваем получившийся массив в span, который будет являться контейнером для слова (результата поиска):
.map(word => <span className="word">{word}</span>)

Да
В любой момент ресурс, на котором лежит картинка заменит картинку на что угодно и может сделать с твоей страницей что попало

АПД, по просьбам трудящихся
Что могли сделать в 13 (и не исключено, что и сейчас будет)
security.stackexchange.com/questions/36447/img-tag...

нет. это не опасно. но это влечет за собой проблему того, что если изображение удалят - у вас его тоже не станет.
как вариант посоветую через vk api грузить изображения в вк. а оттуда уже к себе.
p.s. а еще говорят что для сео это плохо. что из за кучи ссылок на другие ресурсы понижается вес страницы.

Доставать что-то из ноды - это не совсем react-way (т.к. реакт инкапсулирует работу с DOM).

Сделайте отдельный компонент под это дело:

class ListItem extends React.PureComponent {
  handleClick = () => {
    const { src, label, onClick } = this.props

    return onClick(src, label)
  }

  render() {
    const { src, label, onClick } = this.props

    return (
      <li onClick={onClick && this.handleClick}>
        <img src={src} />
        <span>{label}</span>
      </li>
    )
  }
}

И передавайте в этот компонент нужные значения:

<ListItem src="/uploads/0.png" label="Test" onClick={this.select} />

В обработчике события перебирайте любым удобным способом e.target.children, где e - параметр функции обработчика.