Next.js Шагая в яму, серия «Начало работы» (4) — заполнение ямы в среднесрочной перспективе

внешний интерфейс JavaScript
Next.js Шагая в яму, серия «Начало работы» (4) — заполнение ямы в среднесрочной перспективе

Next.js Шагая в яму, серия «Начало работы»

заполнить яму

Первая яма - параметры формы маршрутизации

В предыдущей статье, когда дело дошло до маршрутизации параметров и маршрутизации запросов, осталась яма, поэтому давайте решим ее здесь.Получается, как я и думал, можно использовать кастомный сервер и потом заново сопоставить страницу, отрендеренную по маршруту. Однако будет небольшая проблема, то есть перед рендерингом пересоответствующей страницы при слишком низкой скорости сети в консоли появится ошибка, а после повторного рендеринга она исчезнет. Сначала это как страница 302, 404, а потом перенаправление на другую, лол

Вы можете посмотреть в консоли, появится ошибка, но это действительно будет успешно использовать маршрут params. И я обнаружил проблему. Когда я впервые захожу на новую страницу, рендеринг Next.js будет очень медленным. Я не знаю, то ли это ошибка, то ли что-то не так с тем, что я написал. больше исследований~

ошибка

Что ж, я зашел на официальный сайт github, чтобы проверить, и кто-то также поднял ту же проблему, что и я. Наконец, я посмотрел и обнаружил, что была проблема с исходным методом записи. Хотя он может быть выполнен нормально, он будет ниже 404, прежде чем появится правильная страница. Дева, я не могу этого вынести или изменить обратно~

// 路由应该这么写
<Link href={`/user/userDetail?username=${text}`} as={`/user/userDetail/${text}`}>
  <a>{text}</a>
</Link>
// server.js
 server.get('/user/userDetail', (req, res) => {
  return app.render(req, res, `/user/userDetail/${req.query.username}`);
});

Вышеупомянутого достаточно, конкретный код ниже ~

Вторая яма - загрузка антд в первый раз в режиме разработки не показывает стиль

В конце концов, я все же изменил форму CSS antd на форму less.С одной стороны, это связано с необходимостью настройки цвета темы и других стилей наложения, а с другой стороны, это ключевой момент. в режиме разработки next.js открывает новую страницу Время ожидания слишком велико, и это слишком долгое время ожидания приводит к тому, что стиль antd не загружается в первый раз. Хотя режим смены на меньше тоже очень медленный, стиль не изменится, поэтому я все равно переключаюсь на меньше.

  • antd-css режим

  • antd-less режим

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

Производственная среда next.js по-прежнему относительно быстра, а среда разработки действительно немного медленно открывает новую страницу в первый раз, в основном это занимает около 10 секунд...

производственный режим

Скриншот выше также показывает, что первое время ожидания Next.js в режиме разработки очень долгое, в основном около 10 с. Конечно, может быть проблема с кодом, который я написал? Тем не менее, я зашел на официальную демо-версию и случайно использовал ее, и она была очень медленной.

Я не мог не думать, если онлайн-проект так медленно загружается в первый раз, как это возможно? Когда раздумывал, бросить ли на полпути, попробовал запаковать в продакшн режиме, если первая загрузка продакшена очень медленная после упаковки, разве это не бред? До свидания~

Поскольку я использую custom-server, скрипты становятся такими:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "set NODE_ENV=production && node server.js"
  },

После упаковки это также нормальный доступ.Следующее действие доступа после упаковки.

Видно, что независимо от того, загружается ли страница в первый раз или впервые заходит на другие страницы, скорость очень высокая.Так что прощаю медленную скорость разработки, продолжим учиться, О(∩_∩)О ха-ха

Сводка && Предварительный просмотр

Эта статья немного водянистая, но я думаю, что она вполне необходима, потому что с этой проблемой может столкнуться не только я, но и многие люди, если ее не решить, то она может бросить на полпути, поэтому я хочу добавить это статья посередине Шагнуть в яму и найти решение~
кодовый адрес

Далее: Знакомство с State Management Redux+redux-saga

Категории