предисловие
Честно говоря, я лично все еще чувствую, что написание становится все лучше и лучше. В прошлом статья была проблемой, которая была скучной до темноты, и статья была немного запутанной. Поскольку статья была слишком большой, она не было сделано за один раз, и мышление иногда было очень запутанным. Так что я также собираюсь начать писать серию статей, ха-ха, попробуйте.
Преимущество серии статей в том, что мы говорим об одном моменте за раз и стремимся быть более подробными. Надеюсь, вы дадите мне больше советов~
Next.js наступает на серию входов в яму
- (один)Hello Next.js
- (два)Добавить ИНТД && CSS
- (три)Рефакторинг каталога и повторная маршрутизация
- (Четыре)Среднесрочное наполнение Next.js
- (пять)Представляем Redux для управления состоянием
- (шесть)Рефакторинг каталога снова
- (Семь)Другие соответствующие знания
Стек технологий автора Xiaobai в настоящее время в основном реагирует. React, react-router, redux и т. д. почти используются в семейном ведре. В последнее время я хочу заняться рендерингом на стороне сервера (SSR). Когда дело доходит до серверной стороны рендеринг, много громоздкой конфигурации веб-пакета, внутренняя конфигурация маршрутизации и т. д., и т. д. сделали мою голову большой и раздражающей. Я не очень люблю открывать для себя что-то новое.Может все учатся по-разному.Мне нравится сначала использовать что-то одно,а потом изучать его принцип после того,как я его пойму.Поэтому есть ли сервис похожий на настройку в один клик или Что касается каркаса конечного фреймворка рендеринга, то, придерживаясь этой концепции, Baidu называется Next.js.
Мне очень нравится скаффолдинг create-react-app, но официалы четко заявили, что рендеринг на стороне сервера на данный момент не поддерживается, поэтому пришлось отказаться.Вообще-то на основе этого скаффолдинга его тоже можно настроить, но Я по-прежнему сначала получаю тот, который доступен, а затем возвращаюсь и заполняю его со своей собственной конфигурацией ~
рендеринг на стороне сервера
Давайте сначала поговорим о рендеринге на стороне сервера. Текущий проект действительно является рендерингом на стороне сервера, но я его не создавал. Некоторые вещи, которые я написал лично, не были рендерингом на стороне сервера, поэтому следующие выводы подытожены после многих статей. , конкретная статья ниже, знания используются для того, чтобы делиться ими и учиться, а то, что я узнал, принадлежит мне~ха-ха
рендеринг на стороне клиента
В самом примитивном интерфейсе страница начинает отображаться после того, как браузер получает такие файлы, как JavaScript и CSS, полностью на стороне клиента (то есть браузера).
рендеринг на стороне сервера
После того, как страница будет обработана сервером, html-страница напрямую возвращается во внешний интерфейс, а изменение URL-адреса обновит всю страницу, то есть предыдущие режимы php и jsp.
изоморфизм
Высококлассное слово Universal APP, почему оно должно быть изоморфным, потому что есть недостаток рендеринга на стороне клиента, то есть загрузка слишком больших файлов или слишком большого количества файлов на первом экране станет очень медленной, поэтому вы можете поставить первый экран на сервере для рендеринга для улучшения Скорость первого экрана, после загрузки первого экрана он начинает передаваться клиенту на управление, и становится SPA-приложением Весь код написан на JavaScript, и сервер использует nodejs.
Next.js
О Next.js у меня не так много ББ.Когда я писал эту статью, я впервые связался с Next.js, поэтому она называлась «Введение в майнинг-пит». официальный сайт, чтобы узнать это.Это довольно подробно--->Next.js
Создайте новое приложение Nextjs
Мы все знаем, что вводная серия — это привет, мир. Здесь я думаю, что next.js вполне удобен, потому что он действительно устраняет сложную настройку рендеринга на стороне сервера, которую мы обычно понимаем, и требует всего несколько простых шагов. новое универсальное приложение.
Первый шаг — установка зависимостей
Ну, вам просто нужно создать новую папку и выполнить следующую команду
// 初始化应用
yarn init
// 安装三个依赖
yarn add react react-dom next
// package.json配置启动
{
...
// 新增启动方式，选择使用next启动
"script": {
"dev": "next"
}
...
}
Хорошо, вы завершили строительство сервера на базе next, это действительно просто?
Далее мы запускаемyarn dev.
Что? На самом деле он сообщил об ошибке. Ну, получается, что Next.js по умолчанию выбирает страницы из каталога pages для рендеринга и возвращает их на внешний дисплей, а по умолчанию pages/index.js как домашнюю страницу система для отображения. Поэтому нам нужно создать новый каталог pages. Затем попробуйте перезапустить снова.
Второй шаг — создать новую папку и файл pages.
Поскольку 3000 часто используется другим проектом, я изменил порт запуска на 3006 и модифицировал метод запуска скрипта:
"script": {
"dev": "next -p 3006"
}
Затем мы посещаемhttp://локальный:3006:
Хорошо, у меня очень краткая страница, честно говоря, мне очень нравятся такие краткие страницы. Почему 404. Получается, что мы создали только новый каталог pages. Как я только что сказал, его корневая страница маршрутизации по умолчанию — index.js под страницами, поэтому мы создаем новый index.js.
const Home = () => (
<h1>我是Next的首页</h1>
);
export default Home;
хорошо, теперь нет проблем. Поскольку next.js по умолчанию включает рендеринг на стороне сервера, нам не нужно выполнять какую-либо настройку, поэтому теперь это чрезвычайно простое приложение является универсальным приложением React. Из элементов страницы мы также можем увидеть:
Третий шаг Следующая маршрутизация
Увидев это, друзья-новички должны вздохнуть так же, как и я, что Next.js мощный, но также возникнет вопрос, подождите, а почему он рендерится? по крайней мере Перескакивание страниц можно сделать только настроив маршрутизацию.Здесь маршрутизация не настроена.Выходит домашняя страница а у меня другие страницы.Что делать?
Оказывается, эти вещи все же настраиваются за нас Next.Я лишь сказал, что Next.js соответствует index.js каталога pages как корневому пути / по умолчанию, и другие пути также совпадают по имени файла.
И наши различные переходы маршрутизации больше полагаются не на react-router, а на маршруты, инкапсулированные next.js (на самом деле, redux тоже, о чем будет сказано позже).
/pages/index.js页面 ----> /
import React, { Fragment } from 'react';
import Link from 'next/link';
const Home = () => (
<Fragment>
<h1>我是Next的首页</h1>
<Link href='/userList'>
<a>用户列表页</a>
</Link>
</Fragment>
);
export default Home;
/pages/userList.js ----> /userList
const UserList = () => (
<h2>我是用户列表页</h2>
);
export default UserList;
Круто мой брат, не только прыжок прошел успешно, но и соответствующая история запакована для нас, и обратная тоже нормальная, и вы можете видеть, что нам не нужно настраивать какую-либо маршрутизацию, связанную со стороны переднего конца или узла, просто следуйте его Просто напишите шаблон. И переход на главную страницу тоже не обновляется~
Однако у редиски и капусты есть своя любовь.Хотя лично я считаю, что это очень мощно, все равно странно не видеть маршрут, да и метод записи тоже изменился, то есть маршрут должен быть под путем страниц, так что это будет очень запутанно после того, как проект будет большим., и что делать с редуксом, когда страница и маршрутизация интегрированы, он чувствует себя очень раздутым.Как человеку, который только что перешел с чистого фронтенда SPA, это должно быть неудобно Я думаю, что быть таким низким невозможно, определенно нет, и я изучу это позже.
Справочная статья
Рендеринг на стороне сервера и универсальное приложение React
D2 — Создайте высоконадежное и производительное изоморфное решение React
Группа QQ: 641113448 (Примечание: Next.js)