#reactjs #server-side-rendering
#reactjs #рендеринг на стороне сервера
Вопрос:
Я использую create-react-app и настроил SSR с помощью экспресс-сервера.
Когда я отключаю JavaScript, все работает отлично (ресурсы загружаются и отображаются).
Когда я включаю JavaScript, веб-сайт загружается с сервера, как и ожидалось, но затем hydrate запускает повторную загрузку ресурсов (каким-то образом эти ресурсы не кэшируются Firefox).).
Вот заголовки для /static/media/fonts/open-sans-latin-400.woff2 (оба запроса кажутся идентичными, за исключением Accept-Encoding: gzip, deflate vs Accept-Encoding: identity ).
Что может вызвать такое поведение?
Комментарии:
1. С каких именно URL-адресов загружаются ресурсы? Возьмите один шрифт, который загружается дважды, и сравните их. Возможно, они объединены в два разных пакета? По вашему скриншоту трудно сказать
2. Привет, @Dominik, спасибо за помощь… URL-адреса идентичны. Я так озадачен.
3. Можете ли вы предоставить подробный скриншот для одного шрифта для обеих загрузок?
4. @Dominik, да, над этим!
5. @Dominik, готово!
Ответ №1:
Обнаружена проблема…
Я использую Express для обслуживания статических ресурсов.
По умолчанию для express.static установлено значение not cache assets ( Cache-Control: public, max-age=0 ) .
Следующее решило проблему кэширования, из-за которой шрифты и изображения загружались дважды.
$ cat .env
EXPRESS_MAX_AGE=60000
const expressStaticOptions = {
maxAge: process.env.EXPRESS_MAX_AGE ?? 0,
}
app.use(express.static(join(__dirname, "build"), expressStaticOptions))
Причина, по которой я не устанавливаю 60000 по умолчанию, заключается в обработке конфигурации кэширования с использованием Nginx в рабочей среде.