แแ แงแแแแแแแแก แแแแแขแแ แแกแแแแ, แ แแแแ แแ แแก แกแขแ แฃแฅแขแฃแ แแ แแแฃแแ Habr แจแแแแแแแ, แ แแแแ แแ แแก แกแขแ แฃแฅแขแฃแ แแ แแแฃแแ แกแแแฃแจแแ แแ แแชแแกแ, แ แแแแ แแ แแก แกแขแ แฃแฅแขแฃแ แแ แแแฃแแ แแแแฃแแแแแชแแแแ, แ แ แกแขแแแแแ แขแแแ แแแแแแงแแแแแ แแ แแแแแแแ แ แแแแ แแฌแแ แแแ แแแแ แแฅ. แกแแแแแแแแ แแ, แแ แแแแแฆแ แแกแแแ แจแแกแแซแแแแแแแ, แ แแแแแ แแฎแแแฎแแ แแแแฎแแ แฐแแแ แ แแฃแแแแก แฌแแแ แ. แแแแแแฃแ แ แแแ แกแแแก แแชแแ แ แ แแคแแฅแขแแ แแ แแแแก แแแแแแแแแก แแแแแงแแแแแแ, แจแแแแชแแแแ แแฃแแแกแฃแฎแ แแแแฎแแแก: แ แแแแ แแ แแฅ แแฃแจแแแแ แฌแแแ แแฎแแ แแก. แแ แแแ แแแแจแ: Node, Vue, Vuex แแ SSR แกแแฃแกแแ Habr-แจแ แแแ แแแ แแแแแชแแแแแแแก แจแแกแแฎแแ แฉแแแแฌแแ แแแแแแ.
แแแ แแแแ แ แแช แแฅแแแ แฃแแแ แแชแแแแ แแแแแแแแแ แแแแก แแฃแแแแก แจแแกแแฎแแ แแ แแก แแก, แ แแ แฉแแแ แชแแขแแแ แแแ แ. แกแแแแแ แแกแ แแ แแ แแก - แแก แแ แแก แกแแแ แคแ แแแขแ, แแ แ แฃแแแแ แแ แงแแแแ แฐแแแ แแก แขแแฅแแแแฃแ แ แแแแแ แ - แแแฅแกแแ. แแ แแก, แ แ แแฅแแ แฃแแแ, แขแแกแขแแ แ, แแแแแแแแ แ, แกแแแ แแแแแแ, แกแแกแฌแแฃแแ แชแแชแฎแ, แแแ แแแขแแแแแก แกแแแชแแแแแกแขแ แแ แกแฎแแ แแฃแแแฃแ แฃแแ. แแแแ แแ แฐแแแ แแก แฌแงแแ แแแแจแ แแฎแแแแ แแฅแแกแ แฃแจแฃแแแ แแแแแฌแแแแ. แแก แกแแแแแแ แแจแแแแแแ - แแ แแแฅแขแ แแ แแแแแแแแแแแแแแ แแฃแแแขแแ แแแ, แ แแแแแแช แแแ แแแแ แแแแแแขแฃแ แกแแฌแแ แแแก แฐแแแแก, แกแแแแแแแแแแจแ แฃแคแ แ แแงแฃแแ แ แกแขแแ แขแแแก แฐแแแแก แงแแแแแแ แแ แขแงแแแ แแ แแแแแแแชแแฃแแ แกแขแ แฃแฅแขแฃแ แแ.
แแแแ แ แกแฎแแ IT แแแแแแแแแก แแกแแแแกแแ, Habr แแกแฌแแแแแก Agile แแแแแแก, CI แแ แแฅแขแแแแก แแ แแก แงแแแแแคแแ แแ. แแแแ แแ แฉแแแ แแ แซแแแแแแแก แแแฎแแแแแ, แฐแแแ แ, แ แแแแ แช แแ แแแฃแฅแขแ, แฃแคแ แ แขแแแฆแแแแ แแแแแ แแแแ, แแแแ แ แแแแฃแฌแงแแแขแแแ. แแกแ แ แแ, แแแแแแแ แ แแแแแแแแ แกแแ แแแขแ แแฃแแแแแแแแแ แแแแแแแ แแแ แ แแฆแแชแแก, แแฅแแแแ แแ แฎแแแแฎแแ แแฅแแแแ, แแแแขแแ แแแ แแ แแแกแฌแแ แแแ, แแฎแกแแแ แแแแแแแแก แแ แแฅแแแแ แแฎแแแแก, แแแแแฏแแแ แแ แคแแฎแแแจแ แแแกแ แแแแ, แ แแแ แกแแแแแแแ แแแแแแแแแกแฃแคแแแ แคแฃแแฅแชแแ แฌแแ แแแแแ. แแ แจแแแแแ แแแแแก แแแ แแแแฃแแ แกแแแจแแแแ, แฎแแแแฎแแแ แแแแแแแแ แแแแก แแแ แแแแ, แแ แ, แ แแ แแแแแแแแแ แแก, แ แแช แแ แแก "แแแแจแแแแแแแแแ แแ แแ แ แแแแแฃแแแแแแ" แแแแแ แแขแจแ.
แกแฌแแ แแ แแก "แกแแแแแแก แแแ แแ" แกแแ แแแขแ แแฅแแแแ แแแแฎแแแฃแแ แฅแแแแแ. แแแฏแแ แแ แแก แแแแชแแแแ Habr-แแก แแแแแแฃแ แ แแแ แกแแแก แ แแคแแฅแขแแ แแ แแแแก. แแแแแแแ, แแแแแแแแ แแแกแแ แแแ แแแแแแแก แแแงแแ แแแก แแ แแแแแแแแจแ แแแ แฃแแแ แจแแชแแแแแก แฐแแแ แแก แแแแแ แแแชแแแแแก แแแแแ แแแแแแ แแ แแ แแแฎแแแก แฃแแแแแ แกแแแฃแ แ แแ แแก-แแแแขแคแแ แแฃแแ แแแแแฌแงแแแขแ. แแแแกแแ แแฅแแแแ แแแแแขแฃแ แ แแแแแแแแแ, PWA, แแคแแแแ แ แแแแแ, แแแแฎแแแ แแแแแก แแแ แแแแ แแ แแแแ แ แกแฎแแ แกแแแแขแแ แแกแ แ แแ.
แแแแกแแแ แแแแแแแแ
แแ แแฎแแ, แฉแแแฃแแแแ แแ แกแขแแแแแ, แแ แ-แแ แแแ แฌแแแแแแ แแแแแ แแกแแฃแแ แ แแแแแแฃแ แ แแแ แกแแแก แแแแแแขแแ แแแแก แแแแแแแแแขแแก แแ แฅแแขแแฅแขแฃแ แแจแ แแ แกแแแฃแ แแ แแแแแแแแแ. แแแแก แแแแแแแแกแฌแแแแแแ แแแแแฌแงแแแ แแแแ แ-แจแแฎแแแแ แ แฏแแฃแคแฃแ แ แคแกแแฅแแแแ แแแแแก แคแแ แแแขแจแ. แงแแแแ แแแ แแแแแแแ แแแแแแแ, แกแแ แแขแแแแ, แงแแแแแคแแ แ แฅแแฆแแแแแ แฉแแฌแแ แแก, แแแแแฃแแ แซแแแแแแแ, แแแฎแแแแแ, แแแ แแ แแแแกแ, แ แแ แขแแจแ แแ แแแแก แแแฃแแ แ. แจแแแแแ แแงแ 20 แแ แแแแแแแก แกแแ, แ แแแแช แชแฎแแแงแ, แ แแ แแแแแแฃแ แฐแแแ แก แฏแแ แแแแแ แแ แซแแแ แแ แแแแแแแ แแแ แฐแฅแแแแ แฌแแ แแแขแแแแกแแแ.
แแ, แแแ แแแ แ แแแจแ, แแแฌแฃแฎแแแแ แ แแกแฃแ แกแแแแก แแแแแงแแแแแแก แแคแแฅแขแฃแ แแแ แแ แ แแกแแช แแแฃแแ แแแขแแ แคแแแกแ แฐแฅแแแ. แงแแแแแแฆแ, แกแแฎแแ-แกแแแฃแจแแ-แกแแฎแแแก แแแ แจแ แฃแขแแ แแฎแแแแแแ แฉแแแก แซแแแ แขแแแแคแแแก, แ แแแแแแช แกแแกแแฌแแ แแแแแแแ แชแแแแแแแ 20 แกแแแแฃแ แแก แฉแแแแแแแก แแ แฎแจแ. แแกแ แแแแแแงแฃแ แแแแแ:
แแแแแแฃแ แ Habr แแแขแแ แคแแแกแ แ แแคแแฅแขแแ แแ แแแแแแ
แฒ แ แฎแแแแ แแฅ? แแแแแแ, แกแแ แแแ แ แงแแแแแก แแ แแแแแ แแ แแแกแแฎแฃแ แแแแแ HTML แแแแ แแก, แแแฃแฎแแแแแแ แแแแกแ, แแงแ แแฃ แแ แ แแแแฎแแแ แแแแแ แจแแกแฃแแ. แจแแแแแ แแแแแแขแ JS แแขแแแ แแแแ แแ แแแแแ แแแฎแแแก แกแแญแแ แ แแแแแชแแแแแก, แแแแ แแ แแแ แแแแฃแแแ แแแขแแ แแแแชแแแกแแแแก. แแแฃ แ แแแแฃแ แแ แแ แแ แแ แแแแแ แกแแแฃแจแแ แแ แฏแแ แแแแแแแแแ. แแแขแแ แคแแแกแ แชแแแชแแแแ แแ แแแแฎแแแ แแแแแแ แฉแแแแขแแแ แแ แแกแ แแแแแขแแแแแ แแแแแแแแขแ. แแแขแแแฃแ แแ แงแแแแแคแแ แ แแแแแ แฃแคแ แ แกแแจแแแแแ แฉแแแแ.
แซแแแแ SSR-CSR แกแฅแแแ. แแแขแแ แแแแชแแ แจแแกแแซแแแแแแแ แแฎแแแแ C3 แแ C4 แแขแแแแแแ, แ แแแแกแแช Node JS แแ แแ แแก แแแแแแแแฃแแ HTML-แแก แแแแแ แแ แแแแ แแ แจแแฃแซแแแ API-แแ แแ แแฅแกแแก แแแแฎแแแแ.
แฉแแแแ แแแแ แแแแแแแ แแ แฅแแขแแฅแขแฃแ แ แซแแแแแ แแฃแกแขแแ แแงแ แแฆแฌแแ แแแ Habr-แแก แแ แ-แแ แแแ แแแแฎแแแ แแแแแแ:
แแแแแแฃแ แ แแแ แกแแ แกแแกแฃแแแแแ. แแ แแแแแแ แแกแ แ แแแแ แช แแ แแก. SSR-แแกแ แแ CSR-แแก แกแแจแแแแแ แแแแแแแแชแแ.
แฃแแแ แแแแฆแแแ แแแแแ, แ แแช แแ แฃแแแ แกแแแฌแฃแฎแแ แ แงแแคแแแแงแ.
แแ แจแแแแคแแกแ แแแ แแแแขแแแ, แจแแแฅแแแแ แแแแแแ แฏแแ แแจแ แแฆแฌแแ แแ "แแฎแแ แชแฃแแแ, แแแแแแแ แกแฌแแ แแ" แแ แแแแแจแแแ แคแแ แแ แจแขแ แแฎแแแแ:
- แแแแแชแแแแแแก แฎแแแแฎแแ แแแแแงแแแแแ,
- แจแแแชแแ แแแแก แ แแแแแแแแแก แจแแแชแแ แแแ,
- แแฃแแแแแแขแ แแแแฎแแแแแแแก แแฆแแแคแฎแแ แ,
- แแแฎแแแแ แแแขแแแ แแแแก แแ แแชแแกแ แฃแคแ แ แแจแแแ แ.
แแแแแ แฎแแแแฎแแ แแแแแแแงแแแแ แแแแแชแแแแแ
แแแแ แแฃแแแ, แกแแ แแแ แแก แแฎแ แแแแ แ แแแแแ แ แจแแฅแแแแแแ แแ แ แแ แแแแแแแก แแแแแกแแญแ แแแแ: แแ แแแแแ แแแแแก แกแแซแแแแ แกแแกแขแแแแก แจแแแฆแฃแแแแแ.
แแแแกแแ แแแฃแฎแแแแแแ, แ แแ แขแแฅแแแแแแแแก แแแแแกแแแแแแ แแฅแแก แฌแแแแ แแแขแ แแแแแแ แแ แแ แฎแแแก แแแแแแแแแแแจแ แฎแแแแก แฅแแแจ แแแ แแแแช แแแแ แ แฌแงแแแ แแแคแ แแแแ แฌแแแ แกแแแงแแ แแจแ, แแ แแแแแ แแแแแแแแแ แแกแแแแก แแก แแแแ แฏแแ แแแแแ แกแแแแฃแแแแแแแ แแ แแก แแแชแฃแแ. แฉแแแ แแ แแแแแแฅแแ แแแแแ แแ แแแแแแแฅแแแงแแแ Vue แแแแแแแชแแ SSR แแฎแแ แแแญแแ แแ แฌแแ แแแแแแจแ, แแแแแแแ แฉแ แแ แแ แแแขแแ แ แแแขแแแ: แฉแแแ แแ แแแแฃแแแแแแแ แกแแฌแงแแกแ แแแแแแแ แแแแ แแแแแแขแก.
แ แแขแแ? แแ แแแแฎแแแแ แแฃแกแขแ แแแกแฃแฎแ แแ แแ แกแแแแแก. แแ แแแ แแ แกแฃแ แแแ แกแแ แแแ แแก แแแกแฃแฎแแก แแแแแก แแแแ แแ, แแ แกแฎแแ แแ แฅแแขแแฅแขแฃแ แฃแแ แแ แแแแแแแแแก แแแแ, แแ แฃแแ แแแแ แแ แแแฆแ. แแแ แแฃ แแ แแแแ, แแแแแแแ แแแแแก แแแแแ แแแ แแ แงแแแแแคแ แแก แฎแแแแฎแแ แแแแแงแแแแแ, แ แแช แกแแ แแแ แแ แแแแแแแ, แกแแแแแแ แกแแแแแแแ แแ แกแแกแแ แแแแแ แฉแแแก. แแแแชแแแ แ แแแแฃแ แแ แขแ แแแแแแฃแ แแ - window.__INITIAL_STATE__
.
แแ แ-แแ แแ แแ แแแแแแ, แ แแแแแแช แฌแแ แแแแจแแ, แแ แแก แชแแแแฃแ แ แกแขแ แฃแฅแขแฃแ แแแแก JSON-แแ แแแแแฅแชแแแแก แจแแฃแซแแแแแแแ (
แแแ แแ แแแแกแ, UGC แแแแขแแแขแแแ แฃแ แแแแ แแแแแกแแก แฃแแแ แแแฎแกแแแแแ, แ แแ แแแแแชแแแแแ แฃแแแ แแแแแแแแแแก HTML แแ แแแฃแแแแแ, แ แแแ แแ แแแแ แฆแแแก HTML. แแ แแแแแแแแกแแแแก แฉแแแ แแแงแแแแแ
แแแแแฎแแแแแก แแแแแแแแแชแแ
แ แแแแ แช แแแแแ แแแงแแแแแแ แแแแแ แแแแแแ แฎแแแแแ, แฉแแแแก แจแแแแฎแแแแแจแ, แแ แแ Node JS แแแกแขแแแชแแ แแกแ แฃแแแแก แแ แคแฃแแฅแชแแแก: SSR แแ โproxyโ API-แจแ, แกแแแแช แฎแแแแ แแแแฎแแแ แแแแแก แแแขแแ แแแแชแแ. แแก แแแ แแแแแแ แจแแฃแซแแแแแแก แฎแแแก แแแขแแ แแแแชแแแก, แกแแแแ JS แแแแ แแฃแจแแแแก แกแแ แแแ แแ, แแแแแแแแ แแแแแซแ แแ แแแแแแแแแแแ แแ SSR แคแฃแแฅแชแแ แกแแแฅแ แแแฃแแแ. แแแฃ แกแแ แแแ แ แฃแแ แแแแ แแแ แแแแแแแแก แแฎแแแแแแก แกแแแฃแแแ แแแแก, แกแแแแ แฅแแแกแขแแแ แ แแฆแแชแแ แแ แแก แแแแแแแแฃแแ. แแฆแแแฉแแแ, แ แแ แฉแแแ แแแแแแแฎแแแ แแแแแแแ แแแแ, แแแแ แแ แแแขแแ แคแแแกแแ แแ แจแแฌแงแแแขแ แขแ แแแแ, แ แแแแแ แแแแแแขแแ แแแแแชแแแแแ แฃแแแ แแแแแฎแแแแฃแแแงแ แแแแฎแแแ แแแแแก แกแแกแแแก แแแแแแแแกแฌแแแแแแ. แฉแแแ แฃแแแ แแแแกแฌแแแแแแแแ แฉแแแแก แแแแแแแชแแแก แกแฌแแ แ แแแแแชแแแแแแก แกแแฌแงแแก แแแแแแแ แแแแแจแ แแแแแแกแแแ, แแแแฎแแแ แแแแแก แจแแกแแแแก แแแแแแแแกแฌแแแแแแ.
แแ แแแแแแแก แแฎแแแแ แแ แ แแแแแกแแแแแ แแงแ:
- แแแฃแ แแแ แแแขแแ แแแแชแแแก แแแแแชแแแแแ แแ แแกแกแแ แแแ แแก แแแแฎแแแแแแก;
- แแแงแแแแ Node JS แคแแแแแ แแ แชแแแแแฃแ แแแกแขแแแชแแแ.
แแแ แแแแ แแแแแกแแแแแ แแแแแฎแแแแ แกแแ แแแ แแ แแแแแแแฃแ แ แชแแแแแแแแก แแแแแงแแแแแแก, แฎแแแ แแแแ แแ แแแแชแแแแก แจแแกแ แฃแแแแแก แแแแ แแแแแแฃแ แแ แแ แแแแ แแแแฎแแแแ แซแแแแ.
แ แแแแ แแแแแแแแแ แแ แฉแแแแแ? แฐแแแ แ แฎแจแแ แแ แแแซแ แแแแก แแแแแแแแฃแ แ แฌแแแแแฆแแแแแแแแก แแแแแ. แแ แแคแแ แแแแฃแ แแ, แแ แกแแแแแก แแแแแแ แกแฃแ แแแแ, แ แแ แชแแแแ แแแแแแแ แแ แแขแแขแแแแแแ แแแแแแฃแแแแแ แจแแแชแแ แแแก. แแ แแแฃแฅแขแแกแแแแ แแแแแแแแแแฃแแแแแก แแแแแแ แแแ แแแแฃแแฌแแแแ แแแแแแแแแแแก booking.com-แแก แแแกแขแฃแแแขแแแก, แแ แแแแแ แแ แแแแกแฎแแแแแแ แแกแแ, แ แแ Habr แฃแคแ แ แกแแ แแแแฃแแแ แแแแแแแ แแแแฎแแแ แแแแแก แแแแแฎแแแฃแ แแแแก แแ แแแแแแ แแฅแแแ, แ แแแแ แช แแแแแแแแแ แก, แแกแแแ แแแแแฌแงแแแขแแแแแแแแก แแแฆแแแแจแ.
แแ แแแแแแแ แแ แแ แแแแแแแก แกแฌแ แแคแแ แแแแแญแ แแก แกแแแฃแแแ แ แกแฃแ แแแแแ, แแแแ แฉแแ แแแแแแแฃแ แ แชแแแแแแแ. แแ, แ แแแแ แช แฎแจแแ แแ แฎแแแแ, แแแ แ แแฃ แแแแแ แฃแแแ แแแแแแฎแแแ แแแแแแแก. แแแแแแแฎแแแแ แแแแฅแแแก แแแจแแแแ: แแแแฃแจแแแแ แจแแแแ-แแแแ แแก, แแแแแ แแแแแ แจแแแแแแแ, แแแแฌแแ แแ
แแแแแแฃแ แ Habr แแแขแแ แคแแแกแ แ แแคแแฅแขแแ แแ แแแแก แแแ แแแแ แแขแแแแก แจแแแแแ
แกแแแแแแ แฏแแแจแ, แแแแแแฃแ แ แแแ แกแแแก SSR-CSR แแ แฅแแขแแฅแขแฃแ แ แแฌแแแแก แแ แกแฃแ แแแก:
๏ฟผ"แแ แ แแแแแซแแก" SSR-CSR แฌแ แ. Node JS API แงแแแแแแแแก แแแแ แแ แแก แแกแแแฅแ แแแฃแแ I/O-แกแแแแก แแ แแ แแ แแก แแแแแแแแแ SSR แคแฃแแฅแชแแแ, แ แแแแแ แแก แฃแแแแแกแแแแแ แแแแแแแแแฃแแแ แชแแแแแฃแ แแแกแขแแแชแแแจแ. แจแแแแแฎแแแก แฏแแญแแ #3 แแ แแ แแก แกแแญแแ แ.
แแฃแแแแแแขแ แแแแฎแแแแแแแก แแฆแแแคแฎแแ แ
แแแแแแฃแแแชแแแแแก แฉแแขแแ แแแแก แจแแแแแ แแแแ แแแก แแแแแแแแ แแแแแ แ แแแแแ แแ แแแแแแคแกแแแก แแ แแแแชแแ แแแ แแฆแแ แแแแแแฌแแแ. แแแแ แแ Habr-แแก แจแแแแแแแแ แแแแแงแแแแแแ SPA แ แแแแแจแ แแแแแช แแแแแแฌแแแ แแแแแแฃแแแแ.
แแแแแแแแ แแแแฎแแแ แแแแแก แแแแแแแก แกแแคแฃแซแแแแแ แคแแ แแแก แแแแแกแแแแแ แกแขแแขแแแแแก แกแแ โ แกแขแแขแแ โ แแแแแแขแแ แแแ แแ แแแ แแฅแแ, แแแ แแแ แ แแแจแ แแแแจแแแแแแแแแ แแงแ แแ แฏแแญแแแก แ แแกแฃแ แกแแแแก แแแฎแแแ แแแแก แแแขแแแแแแชแแ.
แแแกแขแแก แแ แฎแแ แแแแ แฃแแแแ แแฌแแแแก แแแแแชแแแแ แแฎแแแ แแแแฎแแแแแก แแ แแแแชแแ แแแแก
แแ แแงแ แกแแญแแ แ แฆแ แแ แแฎแ แ. แแแแแ แแแงแแแแแ แกแแ แแแแแกแขแจแ แฎแแแแแ, แ แแ แแแแแแแชแแ แฎแแแแฎแแ แแแฎแแแก แกแขแแขแแแแแก แกแแแก แฃแแแ แแแแแกแแแแกแแก แแ แแแแฎแแแแแกแแก แฉแแแ แแแ แแฎแแแแแ แกแขแแขแแแแก, แ แแช แแแจแแแแก, แ แแ แฌแแแ แแแแแชแแแแแ แกแแแฆแแช แฅแ แแแ. แ แแแแ แช แฉแแแก, แกแขแแขแแแแแก แกแแแก แแแแแแแแแขแ แแงแแแแแก แแแแแแฃแ แแแแแแแ แแแแแก แแ แแแ แแแแก แแแก แแแแแแแฃแ แแแแกแแก. แคแแฅแขแแแ แแแแ, แแแแแแแชแแ แแงแแแแแแ แแแแแแแฃแ แแแแแแแ แแแแแก, แแแแ แแ Vuex แแ แฅแแขแแฅแขแฃแ แ แแจแแแแ แแแ แแแแแ : แแแแฃแแแแ แแแแแฃแแ แแงแ แแแแ แแแแแ, แ แแแแแแแช, แแแแแก แแฎแ แแ, แแแแแฃแแแ แแแ แจแ แฃแขแแแแแ. แฃแคแ แ แแแขแแช, แงแแแแ แแแแฃแแ แแ แแก "แแ แแฏแแ แแแ" - แแแแ แแแ แงแแแแแ แแแแแแแแ แแแแแขแ แแแแแฌแแ แก แแแแ แแแแฃแแก:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
แกแแแ แแ แฏแแแจแ, แฉแแแ แแแฅแแแแ แแแแฃแแ แกแขแแขแแแแแก แกแแ, แ แแแแแแช แจแแแชแแแก แขแแแแก แแแแแฅแขแแแก แแฃแฎแแ แแ แแแแฃแแ PageArticle, แ แแแแแแช แแงแ แแแแแฅแขแแก แแแคแแ แแแแแฃแแ แแแ แกแแ แแฃแฎแแ, แกแแฎแแก แกแขแแขแแ แกแ แฃแแ. แแแแแแแ, แแก แแแแฎแแ แชแแแแแแ แแแแแกแแแแแ แกแแจแแแแแแแแก แแ แจแแแชแแแก - แแก แซแแแแแ แแแ แขแแแแ, แจแแแซแแแแ แแแฅแแแก แแฃแแฃแแ แงแแแแ, แแแแ แแ แฃแแแแฃแ แแกแแ แแแกแแแแแ. แแฃ แแแ แจแ แฃแขแแก แจแแชแแแแกแแก แแแแฃแแก แแแแแขแแแ แแแแ, แแแจแแ แแแกแแแ แแ แแแ แชแฎแแแ แแแแช แแ แจแแแแซแแแแ. แแฃแแชแ, แแแแแแแแแ, แกแขแแขแแแแแก แแ แฎแแแก แจแแ แแก แแแแแแแแแแแแ /แแแแแ โ /แงแแแแ, แแแ แแแขแแ แแแฃแแแ แแแแแงแแ แแ แงแแแแแคแแ แ, แ แแช แแแ แแ แแแแแแกแแแ แแ แแก แแแแแแจแแ แแแฃแแ, แ แแแแแ แฉแแแ แแฎแแแแ แแ แแ แแแแฅแแก แกแขแแขแแแแแก แกแแ, แ แแแแแจแแช แกแแญแแ แแ แแฎแแแ แแแแแชแแแแแแก แฉแแกแแ. แแก แแแแแ แแแแแแงแแแแก แแแแฎแแแแแแแก แแแแ แแแแแแแแแ.
แจแแแแแ แแแ แงแแแแแคแแ แ, แ แแกแ แแแแฎแ แแช แแแแแฎแแ แฎแ แแ แแแแแแ, แฉแแแแแแงแแแแแ แแฎแแแ แกแแฎแแแแฌแแคแ แกแขแ แฃแฅแขแฃแ แ แแ แฌแแ แแฃแแแแแ แฉแแแก แแแแแแแแก. แแแกแแฃแกแแแแ แฎแแแแ แซแแแแ แแงแ, แแแแ แแ แกแแแแแแแ แกแแกแแ แแแแแ แแ แแฃแแแแขแแแแ แแแแแฌแแแ แแญแแแแ แแ แแแแแฌแงแ แแแแฎแแ แชแแแแแแ.
แแแแฎแกแแแก แแแแแแ แกแแฃแแแแแกแแ แแแแแแแแ แแ แแแแแฏแจแ. แแแ แแแ แ แแแจแ, แฉแแแ แแชแแแแแแ Vuex แแแแฃแแแก แแแแแงแแคแแก แแแแ แแแแแแแ แแ แแแ แแแแแ แแแ แจแ แฃแขแแแแแ แแแแแแจแแ แแแแก. แแแแฎ, แแแฆแแแแแจแ แชแแขแ แแแขแ แแแแแชแแแ แแฅแแแแ, แแแแฆแแแแแ แชแแขแ แฃแคแ แ แ แแฃแแ แแแฎแแแแ, แแแแ แแ แกแขแแขแแแแก แแ แฏแแ แแ แฉแแแขแแแ แแแแ. แแแแแแฃแ แ แแแ แกแแแกแแแแก, แแก แแแแแ แงแแแแแแ แซแแแแ แ แแ แแฃแแแแขแแ. แแก แแแแฎแแแแแแ แแกแ แแแแแแงแฃแ แแแ:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
แแแแ แแ แ แ แแแฎแแแแ, แแฃ แกแขแแขแแแแแก แกแแแแ แจแแแซแแแแ แแแแแคแแ แแแก แแ แแแแ แแแ แจแ แฃแขแก แจแแ แแก แแ แ แ แแแฎแแแแ, แแฃ แฉแแแ แแแแแแ แฎแแแแฎแแ แแแแแแแงแแแแ แแแแแฅแขแแก แแแแแชแแแแแ แแฃแฎแแ แแแกแขแแก แแแแ แแแก แแแกแแคแแ แแแแแแ, แแแก แแแแแฅแชแแแแ แกแขแแขแแ แกแ แฃแแ? แแ แจแแแแฎแแแแแจแ, แฃแคแ แ แแแแแแฃแ แ แแฅแแแแ แแกแแแ แกแขแ แฃแฅแขแฃแ แแก แแแแแงแแแแแ:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
แกแขแแขแแแแแก แกแแ แแฅ แแก แแฎแแแแ แกแขแแขแแแแแก แแ แแแแแ แ แกแแชแแแแ. แงแแแแ แกแขแแขแแ, แ แแแแแแช แแแแแแฌแแ แแแ แแงแ แแแแฎแแแ แแแแแก แกแแกแแแก แแ แแก. แฉแแแ แแแ แแแแกแแแฃแแ แแแฃแแ แกแแคแ แแฎแแแแ แแแแงแ แแแแ, แ แแแแแ แแก แแ แแก แขแ แแคแแแ, แ แแแแแแช แจแแแซแแแแ แแแแแแฌแแ แแแ แแงแแก แขแแแแแแแ แกแแแฆแแช แแแขแ แแจแ แกแแแแฃแ แแแก แจแแ แแก, แแ แฉแแแ แแแแแแแแแ แแ แแแแแแ, แ แแ แแก แขแแแแแแ แแแแแ แแ แแฎแแ แแแแชแแ แแแแฎแแแ แแแแแก แแแแ, แ แแ แแแแซแฃแแแ แฉแแขแแแ แแแก แแก แแแแแชแแแแแ, แ แแแแแแแช แแแก แฃแแแ แแฅแแก. แแแแแแฌแแ แแแ. แฒกแแแแแ แกแขแแขแแแแแก ID แฃแแ แแแแ แแ แแก ID-แแแแก แแแกแแแ (แแแแฅแแก โแแแฃแแแแโ) แแแแแฅแขแแแแแ แแฃแฎแแ. แแก แกแขแ แฃแฅแขแฃแ แ แกแแจแฃแแแแแแก แแแซแแแแ แแแแแแแ แแแชแแแแ แแแ แจแ แฃแขแแแแก แกแแแ แแ แแแแแชแแแแแแก แแฃแแแแ แแแ แแ แแแแแฅแขแแก แฎแแแแฎแแ แแแแแงแแแแแ แแฃแฎแแ แแแกแขแแก แแแแ แแแก แแแคแแ แแแแแกแแก แแแกแจแ แแแคแแ แแแแแฃแแ แแแแแชแแแแแแก แแแแ แแแแแแแแ.
แกแขแแขแแแแแก แกแแแก แแแแแแแแแแ แแกแแแ แแแฎแแ แฃแคแ แ แแแแญแแแ แแแแ: iterator แแแแแแแแแขแ แแแแแ แแแก แแแกแแแแก แแแจแแแแแแ แกแขแแขแแแก ID-แแแแ แแ แฎแแขแแแก แกแขแแขแแแก teaser แแแแแแแแแขแก, แแแแแกแชแแแก Id-แก แกแแงแ แแแแแ, แฎแแแ แจแแแแ แแแแแแแแแขแ, แแแแแก แแฎแ แแ, แแฆแแแก แกแแญแแ แ แแแแแชแแแแแก. แกแขแแขแแแแแก แกแแ. แ แแแแกแแช แแแแแฎแแ แ แแฃแแแแแแชแแแก แแแแ แแแ, แแแฆแแแ แฃแแแ แแ แกแแแฃแ แแแ แแฆแก แกแขแแขแแแแแก แกแแ, แแแฎแแแ แแแแแขแแแแแฃแแ แแแแแชแแแแแแก แแแแแแแแแก แแ แฃแแ แแแแ แแแแแแแขแแแ แแ แกแแแฃแ แแแแแฅแขแก.
แ แแขแแ แแ แแก แแก แแแแแแแ แฃแแแแแกแ? แ แแแแ แช แแแแแ แแแแฌแแ แ, แแก แแแแแแแ แฃแคแ แ แแแแแ แแแแแแฌแแ แแแ แแแแแชแแแแแแก แแแแแ แ แแ แกแแจแฃแแแแแแก แแแซแแแแ แฎแแแแฎแแ แแแแแแงแแแแ แแแ. แแแแ แแ แแแแก แแแ แแ, แแก แแแแก แฃแฎแกแแแก แแฎแแ แจแแกแแซแแแแแแแแแก, แ แแแแแแแช แจแแกแแแแจแแแแแ แฏแแแแ แแกแแ แแ แฅแแขแแฅแขแฃแ แแจแ. แแแแแแแแแ, แแแแแแแแฎแแ แแ แกแขแแขแแแแแก แฉแแขแแแ แแแ แแ แฎแจแ, แ แแแแ แช แแกแแแ แแแแแฉแแแแแ. แฉแแแ แจแแแแแซแแแ แฃแแ แแแแ แแแแแแแแแกแแ แฃแแฎแแแกแ แแแกแขแแแ โแกแแชแแแจแโ แกแขแแขแแแแแก แกแแแจแแแแแฎแแ แแฎแแแ ID-แแแแก แชแแแแ แกแแ แกแขแแขแแแแแก ID แแ แจแแแขแงแแแแแแ แแแแฎแแแ แแแแแก แแแแก แจแแกแแฎแแ. แ แแแแกแแช แแแฌแแแแฃแแแแ แฆแแแแแแ โแแฎแแแ แแฃแแแแแแชแแแแแก แฉแแแแแแโ, แฉแแแ แฃแแ แแแแ แฉแแแกแแแ แแฎแแแ ID-แแแ แกแขแแขแแแแแก แแแแแแแแ แ แกแแแก แแแกแแแแก แแแกแแฌแงแแกแจแ แแ แงแแแแแคแแ แ แแแแฅแแแก แฏแแแแกแแฃแ แแ แแแฃแจแแแแแก.
แฉแแแแขแแแ แแแ แฃแคแ แ แกแแกแแแแแแแแก แแแฎแแแก
แ แแคแแฅแขแแ แฃแแ แขแแ แขแแก แแแ แซแ แแ แแก แฉแแแฉแฎแแก แแแแชแแคแชแแ, แ แแช แแแแ แแแขแแ แแแขแแ แจแแแแแ แกแแก แฉแแแแขแแแ แแแแก แแ แแชแแกแก แชแแขแ แแแแแแแแ แแแแแ แแแแก แฎแแแก. แแ แกแแแแแฎแแ แแแกแแฃแกแแ แแ แงแแคแแแ; แแแแแแแ แแ แแขแแขแแแแแแ แแแแก แคแแฅแขแแฃแ แแ แแ แ แกแแแแ แแแกแญแแ แแ. แแแแแแแ แแ แแฅแขแแแฃแแแ แแแแแกแแแแแ แแงแ แแแฎแแขแฃแแ แแ แฉแแแ แแแกแฌแแแแแ แฉแแแแก แแแแแแแแแขแแแก แแแ แขแแแ, แซแแแแก แแแแฃแขแแแ div แแแแแแแแก แแแแแชแแแ แแแแแชแแแแ แแแแแแแแจแ. แกแฃแแแแฅแขแฃแ แแ, แแแขแแแ แแแแกแแแแ แแก แแแแแแแ แ แแแแฃแ แแ แแแชแแ แแแก แกแขแ แแกแแก แฐแแ แแแแแแแก แ แแแแแแแแแก แแแแฎแแแ แแแแแก แกแฎแแฃแแจแ. แฉแแแฉแฎแ แแกแ แแแแแแงแฃแ แแแ:
แฐแแแ แ แแแขแแแ แแแ
แแกแแฎแแแก
แแ แแฅแแกแ แแแแ แแแฃแจแแแ แฐแแแ แแจแ แแ แฉแแแ แแแแแแ แแแ แแแแแ แแแแแแฎแแแแแ: แแแ, แ แแแแ แแแแฌแแแก แแฅ? แแแ แแ, แแแแคแแ แขแฃแแ - แแแแฎ. แแแแ แแ แแ แแก แ แแฆแแช, แ แแช แแแแแกแฎแแแแแแก แแ แแแแฃแจแแแแ แก แกแฎแแแแแกแแแ. แแแฃแจแแแแแ แแฃแแแแแจแ, แ แแแแแแแช แกแ แฃแแแแ แแฃแแแ แแแแแ แแงแแแแ แแแแแแแแ แแ แแแฃแฅแขแแก แแแแแ แ, แแ แแชแแแแแ แแ แแ แแกแแแ แแแ แแงแแแแ แแแแ แแแแฎแแแ แแแแแแ. แแแแ แแ แแฅ แงแแแแแคแแ แ แกแฎแแแแแแ แแแแ. แแฅ แแ แซแแแแ แแแกแฃแฎแแกแแแแแแแแแก แแแแแ, แ แแกแแช แแแแแแแ. แคแฃแแฅแชแแแก แจแแแฃแจแแแแแแก แแ แแชแแกแจแ แแฅแแแ แแแฌแแแแแ แแ แฎแแแแแ แแแกแ แแคแแแแแแ, แแฆแแแ แแแแแฌแแแแแแแก แงแแแแ แแ แแแฃแฅแขแแก แจแแฎแแแแ แแจแ, แ แแแแแแช แแแแแแจแแ แแแฃแแแ แแฅแแแแก แคแฃแแฅแชแแแแแ แแแแกแแแ, แแแแแแแ แฌแแแแแแแแแแแก แแ แแแแแ แแฆแแแ แแแแแฌแงแแแขแแแแแแแก. แแ แแแฃแฅแขแแก แจแแฅแแแ, แ แแแแแกแแช แจแแ แแแแแแ แแงแแแแ แงแแแแแแฆแ, แซแแแแแ แแแแแ แแ, แแแแ แแ แแแแแก แแแฌแแ แ แแ แแแแแแแแแแแกแแแแก, แ แแแแแแแช แแแแแ แจแแแแ แฃแแแแแกแแแ แแ แแแ, แฃแแ แแแแ แฌแแ แแแฃแแแแแแแ แแ แซแแแแแ (แกแแ แแแแแแก แแแ แแจแ).
แงแแแแ แแ แชแแแแแแแแก แแแแแฅแแแงแแแแแก แจแแแแแ, แฉแแแ แแแแแฆแแ แแแแแแแแ แแแแแฎแแแฃแ แแแ แแ แแก แซแแแแแ, แซแแแแแ แกแแกแแแแแแแ แแงแ. แแก แจแแแแแแแแแแแแแ. แฒแแแแแแแ! แแแฌแแ แ แแแขแ.
แจแแแแฎแกแแแแแ, แ แแ แแแแแแแฃแ แ แชแแแแแแแแก แจแแแแแ แฉแแแ แแแแแแฌแงแแแขแแ แจแแแแแชแแแแ แแ แฅแแขแแฅแขแฃแ แ แแ แแแแแแงแแ แแ แแฅแกแ แคแแแ แชแแแแ แแแกแขแแแชแแแจแ. "แแ แ แแแแแซแแก" แแ แฅแแขแแฅแขแฃแ แแ แฃแแแ แแแแฆแฌแแ แแแแแจแแแแแก แกแแฏแแ แ แแแขแ แขแแกแขแแ แแแแก แกแแฎแแ. แแฎแแ แแแแแกแแแแ แก แจแแฃแซแแแ แแแกแแ แแแแแกแแแ แแ แแแแแแฎแแแ แแก แแแแแแฃแ แ Habr-แแก แแแฃแแฏแแแแกแแแแจแ. แแฆแแแกแแแแก แกแฃแ แแกแแ. แกแแแแแแแแแแ แแฃแแแกแฃแฎแแ แแฅแแแแก แงแแแแ แแแแฎแแแก แแแแแแขแแ แแแจแ.
แฌแงแแ แ: www.habr.com