Как правильно реализовать работу с пользователем в изоморфном js приложении?

Question

[Роман]

Я делаю приложение с использованием react, в котором у меня первый рендеринг страницы происходит на сервере, а полседующие рендеры происходят на клиенте. Используются одни и те же компоненты как для клиента так и для сервера. Вот здесь описан такой подход:
https://medium.com/@benlu/ssr-with-create-react-ap...
https://github.com/ayroblu/ssr-cra-v2.1

Как в таком случае нужно реализововать авторизацию и работу с пользователем ? Нужно делать проверку что Вася это Вася как на стороне сервера так и на стороне клиента ? Или нужно делать как то иначе ?

У меня есть такая вынести работу с пользователем чисто на клиентскую сторону, но я не уверен что этот подход является правильным: после авторизации выдавать пользователю JWT, и при каждом запросе на страницы которые может просматривать только авторизированный пользователь делать проверки на стороне клиента, а если эту страницу нужно отрендерить на сервере то отдавать ее как не авторизованному пользователю, а дальше если пользователь авторизован то перерисовывать страницу на клиенте (страницы которые может видеть только авторизированный пользователь для SEO не важны).

Comments

[Тимофей]

Я так понимаю, SSR нужен чисто для SEO?

[Роман]

Тимофей, для SEO и для того чтобы не ждать пока загрузится весь банл при первой загрузке чтобы увидеть контент.

Answer 1

[Тимофей]

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

Comments

[Роман]

Спасибо Тимофей! Мне казалось это не правильным потому что я делаю проверку что скрипт выполняется не на node а в браузере и уже потом проверять пользователя допустим и если все ок то отдавать страницу для авторизованных. Получается такой момент, что если обновить страницу, которая предназначена для зарегистрированных пользователей, под уже зашедшим юзером, с очисткой кэша, то redux state очищается, и сначала видно страницу как для не авторизированного а потом уже перерисовывается как для залогиненого после того как достается persisted state из localstorage. И вот как то костыльно оно выглядит. Или я что то деляю не так ?

[Тимофей]

Роман, я не знаю, как это сделать лучше в реакт, но на vue у каждого компонента vue есть т.н. lifecycle hooks. Как минимум 2 из них вызываются только на клиенте - beforeMount и mounted. То есть ничего проверять не надо, просто пишем код в тех местах, которые в принципе выполняются только в браузере.

С состоянием понимаю проблему. На примере загрузки данных пользователя я решал это примерно так: у поля user в хранилище может быть 3 значения - null, false или, собственно, объект юзера. По умолчанию значение null, то есть как бы неопределённое. Если анонимус, то user = false.

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

[Роман]

Тимофей спасибо за ответ!
Да, в реакте тоже есть похожий метод, буду пробовать!

Answer 2

[Антон]

Рендер отдельно, API отдельно.
SSR - это просто proxy между клиентом и API.
Делаем обертку над http клиентом (если это fetch, или создаем новый если axios), и на клиенте используем как есть, а на сервере передаем туда заголовки (req.headers) от клиента. JWT придется сохранять в куки.

Comments

[Роман]

Антон, спасибо за ответ!
Не совсем понял по поводу обертки, можете пожалуйста подсказать детальнее или указать где почитать ?