016. Рендеринг на стороне сервера (на примере React) - Евгений Шпилевский

Несмотря на высокий порог вхождения и дороговизну разработки, серверный рендеринг набирает популярность. Я расскажу, как с помощью React создать приложение с серверным рендерингом и какие подводные камни можно при этом встретить. Также разберёмся, как подготовить среду разработки, заставить клиент и сервер работать вместе и как решать типичные проблемы.

[@ambraxia]

Не слышно вопросы из зала. За видео спасибо!

[@nodkz]

Очень мощный доклад! Сколько жениных слез, боли и потерянного времени под капотом... Могу добавить нового челленджа на месяц: - дожать Code Splitting с помощью react-loadable и будет огонь!

[@nodkz]

34:58 при использовании null-loader: в сгенерированном html на сервере у html-элементов не будут прописаны css классы. Будет битая верстка, если гидрация не пройдет. Или я не прав?

[@dmitrysvetlov6001]

где послушать лекцию по вебпаку?

[@user-pq3ss9ry8f]

Очень круто!

[@user-xy1ff4yq6r]

почему так сложно

[@nodkz]

36:41 А почему не юзать вебпак в multi-compiller mode? js``` const bundler = webpack([clientConfig, serverConfig]); await run(frontendServer, bundler.compilers[0]); await run(backendServer, bundler.compilers[1]); ``` Все же пилим isomorphic app. И если frontendServer сгенерит файлик с ассетами и положит рядом с server.js. То серверная сбока, которая стартует следом, безболезнено подцепит нужные ассеты для SSR. Ассеты можно вот таким самопальным плагином для вебпака генерить: { apply(compiler) { compiler.hooks.afterEmit.tapAsync('CustomAssetsWriter', (compilation, callback) => { const stats = compilation.getStats().toJson({ hash: true, publicPath: true, assets: true, chunks: false, modules: false, source: false, errorDetails: false, timings: false, children: false, }); fs.writeFileSync( path.join(__dirname, '../build', process.env.NODE_ENV, 'stats.client.json'), JSON.stringify(stats, null, 2) ); fs.writeFileSync( path.join(__dirname, '../build', process.env.NODE_ENV, 'revision.txt'), REVISION ); callback(); }); }, },

[@newlife8699]

Ребята а если сервер не на node, например на другом платформе это код будет работать?

[@ch-co]

Доклад супер. Помог переписать существующий проект на работе под ssr

[@TheZionjke]

а можно ссылку на доклад по Вебпаку? :)

[@MaxNaruto1000]

quantum-router'a больше нет(

[@nodkz]

46:55 Запятую? Без висячих запятых!

[@i_am_5_percent]

next.js?

[@Mike37373]

nuxt ?

[@pro100skm]

​@@Mike37373 universal ?

[@nodkz]

1:13:10 Дырка XSS. Юзайте github.com/yahoo/serialize-javascript для сериализации data. Простая проверка: вставьте '' куда-нибуть в тексте в переменную data, и скрипт в браузере упадет.

[@nodkz]

Упс, не досмотрел. Там есть replace(/

[@nodkz]

Гы и опять не досмотрел. На клиенте обратно декодят < в

[@user-td4yy8zt5u]

КТО!!! Кто хранит в редаксе функции?)))