10.8K ·GitHub
Что это такое?
Демонстрационное приложение, которое повторяет Hacker News на Vue 2.0, vue-router и Vuex с серверным рендерингом. Оно создано как сопутствующий проект к официальной документации Vue по SSR.
Демонстрационное приложение, которое повторяет Hacker News на Vue 2.0, vue-router и Vuex с серверным рендерингом. Оно создано как сопутствующий проект к официальной документации Vue по SSR.Это фреймворк или пример приложения?Это демонстрационное приложение-образец, а не фреймворк и не библиотека. Его нужно читать и изучать, чтобы понять, как устроить приложение с серверным рендерингом (SSR) на Vue.
Это демонстрационное приложение-образец, а не фреймворк и не библиотека. Его нужно читать и изучать, чтобы понять, как устроить приложение с серверным рендерингом (SSR) на Vue.Как мне запустить это локально?Установите зависимости через npm, затем выполните скрипт dev (npm run dev), который запускает сервер на Node.js. Для продакшена npm run build собирает клиентский и серверный бандлы, а npm start затем их раздаёт.
Установите зависимости через npm, затем выполните скрипт dev (npm run dev), который запускает сервер на Node.js. Для продакшена npm run build собирает клиентский и серверный бандлы, а npm start затем их раздаёт.Что нужно установить в первую очередь?Node.js версии 7 или выше и npm версии 4 или выше. Для сервера используется Express, для данных — API Hacker News на базе Firebase, а для SSR — vue, vue-router и vue-server-renderer.
Node.js версии 7 или выше и npm версии 4 или выше. Для сервера используется Express, для данных — API Hacker News на базе Firebase, а для SSR — vue, vue-router и vue-server-renderer.Можно ли взять это за основу для продакшен-проекта с SSR?Нет. Автор предупреждает, что это не эталон производительности: разбиение кода на части и вынесение CSS в отдельные файлы включены лишь для демонстрации возможностей, а не потому, что они оптимальны для такого небольшого приложения.
Нет. Автор предупреждает, что это не эталон производительности: разбиение кода на части и вынесение CSS в отдельные файлы включены лишь для демонстрации возможностей, а не потому, что они оптимальны для такого небольшого приложения.Откуда берутся данные Hacker News?Используется API Hacker News на базе Firebase. Автор отмечает, что оно позволяет получать обновления в реальном времени, но увеличивает размер бандла и не умеет эффективно загружать данные пакетами.
Используется API Hacker News на базе Firebase. Автор отмечает, что оно позволяет получать обновления в реальном времени, но увеличивает размер бандла и не умеет эффективно загружать данные пакетами.Это прогрессивное веб-приложение (PWA)?Да, в нём есть манифест приложения и сервис-воркер, а демо набирает 100 из 100 баллов в Lighthouse.
Да, в нём есть манифест приложения и сервис-воркер, а демо набирает 100 из 100 баллов в Lighthouse.Есть ли тут что-то необычное с маршрутизацией или обновлением списков?Есть разбиение кода по маршрутам, подсказки для загрузки ресурсов preload и prefetch, а также анимация FLIP при обновлении списков в реальном времени при переключении разделов.
Есть разбиение кода по маршрутам, подсказки для загрузки ресурсов preload и prefetch, а также анимация FLIP при обновлении списков в реальном времени при переключении разделов.Как состояние передаётся между сервером и клиентом?Состояние управляется через Vuex. Сервер заранее загружает данные, а затем клиент гидратирует DOM и состояние на основе того, что отрендерил сервер.
Состояние управляется через Vuex. Сервер заранее загружает данные, а затем клиент гидратирует DOM и состояние на основе того, что отрендерил сервер.What are similar projects?YesPlayMusic, vue2-elm, vuestic-admin, razzle, vue, vue2-happyfri, nuxt, habitica
YesPlayMusic, vue2-elm, vuestic-admin, razzle, vue, vue2-happyfri, nuxt, habiticaWhich topics is it in?service-worker, vue-router, firebase, single-page-app, vuex, express, ssr, pwa, node, vue, animation, web-app
service-worker, vue-router, firebase, single-page-app, vuex, express, ssr, pwa, node, vue, animation, web-app