На протяжении многих лет я работал над несколькими проектами SPA с разными фреймворками React. В большинстве случаев мои проекты начинались с одного из шаблонов, созданных многими замечательными разработчиками по всему миру, или приложения create-react-app и добавляли все необходимые инструменты поверх. В моем последнем проекте я начал изучать более простой подход к созданию одностраничного приложения (SPA) с рендерингом на стороне сервера (SSR). Я наткнулся на Next.js, простой пакет для создания SPA с SSR, и material-ui, блестящую реализацию Google Material Design в React.
В этом руководстве я покажу вам, как создать очень простое приложение для блога с использованием вышеупомянутых технологий. Код, упомянутый в этой статье, доступен по адресу https://github.com/aduyng/blog-spa.
Прежде чем мы начнем, ознакомьтесь со следующими ссылками:
Создайте новый проект и установите начальные зависимости для веб-приложения.
Создайте новую папку и простой package.json
Отредактируйте ./web/package.json, чтобы включить сценарии npm:
Создание домашней страницы
В Next.js каждый файл в ./web/pages является маршрутом. Создайте ./web/pages/index.js и добавьте следующий фрагмент:
Запустите приложение и откройте его в браузере, используя команды, указанные ниже в разделе ./web. Вы должны увидеть содержимое выше по адресу http: // localhost: 3000.
npm run dev
Добавление библиотек material-ui
На терминале в ./web folder введите следующую команду, чтобы добавить @material-ui/core и @material-ui/icons
npm install --save @material-ui/core @material-ui/icons
Нам нужно перезаписать ./web/pages/_app.js в Next.js по умолчанию, чтобы включить в него шрифт Roboto из шрифта Google:
Запустите приложение сейчас, и вы должны увидеть, как в браузере загружаются шрифты в стиле material-ui и Roboto.
Измените наш ./web/pages/index.js, чтобы включить кнопки из material-ui:
Снова запустите npm run dev и проверьте, как мы продвигаемся:
Красиво, а!
Рендеринг некоторых постов
Давайте внесем изменения в наш ./web/pages/index.js, чтобы отображать некоторые сообщения:
Теперь проверяем прогресс в браузере:
Довольно просто, правда?
Давайте сделаем магию рендеринга на стороне сервера
Функция getInitialProps выполняется на стороне сервера. В этом случае нам нужно получить список сообщений с https://jsonplaceholder.typicode.com/posts или с любой другой вашей конечной точки.
Но сначала давайте установим isomorphic-fetch
Затем измените наш ./web/pages/index.js на следующий:
Проверьте приложение в браузере:
Если вы проверите источник страницы прямо сейчас, будет возвращено намного больше контента по сравнению с предыдущей версией. Это потому, что в ответ теперь включена вся разметка, созданная на стороне сервера.
Реализуйте ссылку «Продолжить чтение ..».
Как видите, мы используем пакет next/link, чтобы связать «Продолжить чтение…» с /post/?postId=${post.id}. Давайте реализуем эту страницу.
Мы создадим новую страницу в ./web/pages/post.js, которая будет извлекать сведения о публикации и отображать их для пользователя.
Проверьте страницу сообщения:
Заключение
С помощью набора простых шагов мы можем создать простое, но мощное приложение для блога с прочной основой. Отсюда вы можете выполнить сборку с npm run build, развернуть приложение на своей любимой платформе NodeJS и запустить его с npm start.
Также очень легко добавить дополнительные страницы или элементы пользовательского интерфейса благодаря очень обширной документации по material-ui на https://material-ui.com (спасибо вам). С помощью этой библиотеки можно без особых усилий создать красивый СПА.
Наслаждаться!
