-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SSR prod и dev режимы #59
Conversation
appType: 'custom', | ||
}); | ||
|
||
app.use(vite!.middlewares); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Зачем тут восклицательный знак? По идее это важная ошибка и ее бы обрабатывать
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Здесь нет ошибки. В режиме isDev
у нас vite
гарантированно есть (он определяется строкой выше), но TS об этом не знает, восклицательным знаком мы ему говорим напрямую, что здесь есть значение.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Я имел в виде, что важная ошибка, если его нет, и ее бы не игнорировать)
После инициализаци можно подмешать существование vite
в значение isDev
и избавиться здесь и дальше от игнорирование через восклицательный знак
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Я имел в виде, что важная ошибка, если его нет, и ее бы не игнорировать)
Я выше писал, что vite
не может не быть в isDev
, т.к он в этом контексте и создаётся. Поэтому проверка внутри isDev избыточна.
После инициализаци можно подмешать существование
Приведёшь пример кода как это сделать?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Делаешь
isDev
let
а неconst
(правда, по логике дальше создать бы другую переменную, что будет логичней) - Когда инициализируешь
vite
, подмешиваешь ее в переменную вышеisDev &&= !!vite
- Дальше делаешь проверки на эту новую переменную
- Если
vite
не проиницилизировался, но он он нужен в дев среде, то нужно отлавливать ошибку. Вероятность мала, но она может быть
setHasMounted(true); | ||
}, []); | ||
|
||
if (!hasMounted) return null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
А этот код разве не отрабатывает раньше, чем useEffect
? Это метод работает корректно весь?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Отрабатывает раньше, в этом и задумка. Это обёртка для компонентов, которые не должны рендериться на сервере.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
И как он узнает, что он не на сервере, если у него всегда hasMounted === false
? На клиенте он так же получит false
, я не вижу никаких других зависимостей в компоненте, чтобы дойти до рендера компонентов
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
На клиенте сработает useEffect хук после первого монтирования, hasMounted
станет true
(7 строчка), компонент обновится и отрендерит children
.
На сервере компонент не смонтируется и вернёт null
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
оки
appType: 'custom', | ||
}); | ||
|
||
app.use(vite!.middlewares); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Я имел в виде, что важная ошибка, если его нет, и ее бы не игнорировать)
После инициализаци можно подмешать существование vite
в значение isDev
и избавиться здесь и дальше от игнорирование через восклицательный знак
setHasMounted(true); | ||
}, []); | ||
|
||
if (!hasMounted) return null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
И как он узнает, что он не на сервере, если у него всегда hasMounted === false
? На клиенте он так же получит false
, я не вижу никаких других зависимостей в компоненте, чтобы дойти до рендера компонентов
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Все ок, комменты не значительны для принятия
Сделана сборка для прод и дев режимов
Запуск ssr в дев режиме
yarn dev:server
Запуск ssr в прод режиме
yarn build && yarn build:ssr && yarn start
Чтобы корректно подгружать данные на сервере при рендере клиента, необходимо в роуте добавить необходимый запрос в loader
Переместил хранение выбранной пользователем цветовой темы в кукисы, чтобы сервер мог сразу отдавать HTML с нужным цветом.
Заменил
eslint-config-node
наeslint-config-n
(форк) т.к первый больше не поддерживаетсяЗаменил сборку сервера с commonjs на esm