Что выбрать для server side rendering react?

Question

[Олег Гамега]

Здравсвуйте, что выбрать для ssr ?
поитал статей на хабре и вопросов стало только больше
как ssr повлияет на разработку spa ? тоесть можно ли начать разработку обычного spa а потом прикручивать ssr ?
заране спасибо

Answer 1

[Антон Спирин]

Лучше сразу писать изоморфный проект, так как есть множество ньюансов которые стоит учитывать при разработке таких приложений. На github можно найти готовые боилерплейты. На написание своего может уйти от пары часов до пары дней, в зависимости от требуемого набора инструментов. Так же вы можете посмотреть в сторону таких инструментов как next.js, razzle, after . Но точно не знаю, насколько легко, при необходимости, мигрировать с таких решений.

Comments

[Олег Гамега]

а какой бы боилерплейт вы посоветовали ? у нас сейчас используется cra и в ччем самая большая боль нет node.js разраба - думаю asp переучить на node.js

[Антон Спирин]

Олег Гамега, тут зависит от инструментов которые предпочитаете. Кто-то использует SASS, а кто-то пишет css-in-js вроде StyledComponents. Кто-то использует Flow или TypeScript, а кто-то вообще не заморачивается с типизацией. Кто-то ставит Eslint, Prettier и LintStaged, а кто-то полагается на внимательность и аккуратность. И так со всем набором инструментов и библиотек.

По структуре так же тут можно и file type first, и feature first и ducks pattern. Сам предпочитаю структуру feature first + ducks.

Я когда свой делал, сгенерировал для анализа проект razle, посмотрел пару боилерплейтов на github, почитал пару статей на тему react ssr hmr и написал в итоге свой, с предпочитаемым набором инструментов и структурой проекта.

[Максим]

Антон Спирин, может поделитесь ссылкой на свою реализацию?

[Антон Спирин]

Максим, пока не выкладывал. Хочу сделать варианты
react ssr hmr,
react redux ssr hmr,
react flow ssr hmr,
react redux flow ssr hmr.
Тут есть сырая версия https://github.com/rockon404/react-ssr-hmr-boilerplate с голым react + react router
Но я начал на его основе делать react redux ssr hmr и что-то уже переделал. Например, в конфигах теперь переменные вроде:

new webpack.DefinePlugin({
      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: true,
    }),

которые гораздо удобней и прочее.
Ну и по структуре app добавлены файлы:
redux saga в сборку добавлять не стал, чтобы можно было выбрать при необходимости любой аналог.
Идея такая, что любая добавленная feature должна легко прокидываться в rootReducer(еще в rootSaga при ее использовании) и на страницy приложения и так же легко при необходимости выпиливаться.

Даже не знаю когда с этим всем закончу, времени последнее время мало.
Еще 12 марта перехожу в большой живой проект, где используется ssr. Потом неделя отпуска, может за это время все версии напишу и причешу.

[Максим]

Антон Спирин, супер! Буду ждать, если есть желание пообщаться - черканите на почту, может как-то смогу помочь или ускорить процесс.

[Олег Гамега]

Антон Спирин, даже на мой неискушенный взгяд выглядит приятно и понятно (учитыая что я больше мобильный разраотчик и бекенд код на ноде не пишу это много), а как дела обстоят с дела с кешируемыми частями ?
в статье https://habrahabr.ru/post/323458/ пишут что

Next.js автоматически создает отдельный chunk для каждой страницы

но в нем мне не нравится странный роутинг
есть ли какое то решение с подобным функционалом но с нормаьным ротингом ?

Answer 2

[Klein Maximus]

Я забил на Реакт и использую Vue (вместе с SSR).
https://ru.vuejs.org/
https://ssr.vuejs.org/ru/
https://nuxtjs.org/