ืืื ืืื ืฉืืขื ืืืง ืืขืืืขื ืืื ืืขืจืขืกืืจื ืืื ืืื Habr ืืื ืกืืจืึทืงืืฉืขืจื ืคืื ืื ืืื ืขืืืืื ืืง, ืืื ืื ืืืึธืจืงืคืืึธืื ืืื ืกืืจืึทืงืืฉืขืจื, ืืื ืงืึธืืื ืืงืึทืฆืืข ืืื ืกืืจืึทืงืืฉืขืจื, ืืืึธืก ืกืืึทื ืืึทืจืืก ืืขื ืขื ืืขื ืืฆื ืืื ืืื ืงืึธื ืืื ืืืื ืืขืฉืจืืื ืืึธ. ืฆืื ืืืืง, ืืื ืืึทื ืึทืืึท ืึท ืืขืืขืื ืืืื, ืืืืึทื ืืื ืืขืฆืื ืก ืืขืืืืจื ืึท ืืืื ืคืื ืื ืืึทืืจืึท ืืึทื ืฉืึทืคึฟื. ื ืืฆื ืืขื ืืืืฉืคึผืื ืคืื ืึท ืงืืืื ืจืืคืึทืงืืขืจืื ื ืคืื ืื ืจืืจืขืืืืืง ืืืขืจืกืืข, ืืื ืืืขื ืคึผืจืืืืจื ืฆื ืขื ืืคึฟืขืจื ืื ืงืฉืื: ืืืึธืก ืืื ืขืก ืืื ืฆื ืึทืจืืขืื ืืึธ ืืื ืื ืคืจืึธื ื. ืืื ืืขื ืคึผืจืึธืืจืึทื: Node, Vue, Vuex ืืื SSR ืืื ืกืึธืืก ืคึฟืื ืืขืจืืช ืืืขืื ืคืขืจืืขื ืืขืืข ืืขืจืคืึทืจืื ื ืืื Habr.
ืืขืจ ืขืจืฉืืขืจ ืืึทื ืืืจ ืืึทืจืคึฟื ืฆื ืืืืกื ืืืขืื ืื ืึทื ืืืืืงืืื ื ืืึทื ืฉืึทืคึฟื ืืื ืึทื ืขืก ืืขื ืขื ืืืืื ืืง ืคืื ืืื ืื. ื ืื ืืขื ืื - ืืึธืก ืืขื ืขื ืืจืืึท ืคืจืึทื ืฅ, ืฆืืืื ืืึทืงืก ืืื ืื ืืขืื ืืฉ ืคืืจื ืคืื ืึทืืข ืืึทืืจ - ืืึทืงืกืื. ืขืก ืืื ืืึธื ืืืื ืึท ืืขืกืืขืจ, ืึท ืืืืืื ืขืจ, ืืจืื ืืืึทืืื, ืึท ื ืก ืืขืืขื, ืึท ืืึทืจืงืขืืื ื-ืกืคึผืขืฆืืึทืืืกื ืืื ืื ืืขืจืข ืืืืืืจืื. ืืืขืจ ืขืก ืืขื ืขื ืืืืื ืืขืงืก ืืืจืขืงื ืืืืืจืืขืืขืจืก ืฆื ืื ืงืืืืื ืคืื ืืืจ. ืืึธืก ืืื ืืึทื ืฅ ืืขืืื - ืึท ืคึผืจืืืขืงื ืืื ืึท ืืืืืืืืืืึธื-ืืึธืืืึทืจ ืืืืขื, ืืืึธืก ืคืื ืื ืึทืจืืืก ืงืืงื ืืื ืึท ืจืื ืคืึทืจื ืขืืื ื, ืืื ืคืึทืงื ืงืืงื ืืขืจ ืืื ืึท ืืืืืืฉ ืกืืึทืจืืึทืคึผ ืืื ืื ืคืืึทืืึทืกื ืึธืจืืึทื ืึทืืืืฉืึทื ืึทื ืกืืจืืงืืืจ ืืขืืืขื.
ืืื ืคืืืข ืื ืืขืจืข IT ืงืึธืืคึผืึทื ืืขืก, Habr ืคึผืจืึทืคืขืกืื ืคืืื ืง ืืขืืื ืงืขื, ืกื ืคึผืจืึทืงืืืกืื, ืืื ืืึธืก ืืื ืึทืืข. ืืืขืจ ืืืื ืืืื ืืขืคืืื, Habr ืืื ืึท ืคึผืจืึธืืืงื ืืื ืืขืืืขืืึธืคึผืื ื ืืขืจ ืืื ืืืืืืืขืก ืืื ืงืขืกืืืืขืจ. ืึทืืื, ืคึฟืึทืจ ืขืืืขืืข ืกืคึผืจืื ืฅ ืืื ืึท ืจืืืขืจื, ืืืจ ืคืืืืกืืง ืงืึธื ืขืคึผืขืก, ืคึผืืึทื ืืื ืจืืืืืืื, ืืจืขืื ืขืคึผืขืก ืืื ืคืึทืจืจืืืื ืขืก, ืืึทืฉืืืกื ืืืงืืฅ ืืื ืฉืึทืคึฟื ื ืืึทืข ืึธื ืขืก, ืืจืขืื ืืืืฃ ืึท ืืจืึทืืืืข ืืื ืืจืืืขื ืืื ืืื ืื ืคึฟืืก, ืืื ืกืืจ ืฆื ืืขืกืึธืฃ ืืขืืืื ื ืื ืฉืืจืื ืืื ืคึผืจืึธืืืงืฆืืข. ืืื ืืขืจื ืึธื ืงืืื ืึท ืืขืืืืกืขืจ ืฉืืืืงืืื, ืึท ืคึผืขืจืืึธื ืคืื ืจืืืืืืขืืึทืคึผืืขื ื, ืฆืืื ืฆื ืืึธื ืืืึธืก ืืื ืืื ืืขื "ืืืืืืืงื-ื ืื ืืจืื ืืืขื" ืงืืืืืจืื ื.
ืขืก ืืื ืคึผืื ืงื ืืขื "ืึทืืืขืง-ืฆืืึทื" ืกืคึผืจืื ื ืืืึธืก ืืืขื ืืืื ืืืกืงืึทืกื ืืื ืื. ืืึธืก ืืึธื ืขืก ืื ืงืืืืขื ืึท ืจืขืคืึทืงืืึธืจืื ื ืคืื ืื ืจืืจืขืืืืืง ืืืขืจืกืืข ืคืื โโโโืืึทืืจ. ืืื ืึทืืืขืืืื, ืื ืคืืจืืข ืืื ืืืื ืืืคืขื ืื ืืขื ืคึฟืึทืจ ืขืก, ืืื ืืื ืืขืจ ืฆืืงืื ืคึฟื ืขืก ืืึธื ืคืึทืจืืืึทืื ืื ืืื ืฆืข ืืึธืึธืืึธืืืฉืขืจ ืืึธืจืื ืคืื Habr ืก ืื ืงืึทืจื ืืืฉืึทื ื ืืื ืืืขืจื ืึท ืื ืืืืขืจืกืึทื ืงืจืืึทื-ืคึผืืึทืืคืึธืจืืข ืืืืืื ื. ืึทืืึธื ืขืก ืืืขื ืืืื ืึทืืึทืคึผืืืื ืืืืกืืืื, PWA, ืึธืคืคืืื ืข ืืึธืืข, ืืึทื ืืฆืขืจ ืงืืกืืึธืืืืึทืืืึธื ืืื ืคืืืข ืื ืืขืจืข ืืฉืืงืึทืืืข ืืื ืื.
ืืื ืก ืฉืืขืื ืื ืึทืจืืขื
ืึทืืึธื, ืืื ืึท ืคึผืจืึธืกื ืกืืึทื ื-ืึทืจืืืฃ, ืืืื ืขืจ ืคืื ืื ืคืจืึธื ื ืืขืจืขืื ืืืขืื ืคึผืจืึธืืืขืืก ืืื ืื ืึทืจืงืึทืืขืงืืฉืขืจ ืคืื ืื ืืึทืืขืจืงืื ืืขื ืงืึธืืคึผืึธื ืขื ื ืคืื ืื ืจืืจืขืืืืืง ืืืขืจืกืืข. ืืื ืืขื ืืื ืืื ืขื, ืืืจ ืึธืจืืึทื ืืืืจื ืึท ืืืงืจืึธ-ืืึทืืขืืขื ืืฉ ืืื ืืขื ืคึฟืึธืจืืึทื ืคืื ืืจืืคึผืข ืกืืืงืึธืืืขืจืึทืคึผื. ืืขืืขืจ ืืื ืืื ืืืืกืืขืืจืืื ืฆื ืืืื ืืืื ืขืก ืืื ืืืื ืืขืืื, ืืขื ืืื ืืืขืก ืคืืจืฉืจืืื ืืืืฃ ืคืืคืืจ, ืืื ืืืื ืกืืืคืืืืืืจื, ืืื ืืืื ืคืืจืฉืืื ืขื, ืืืืฅ ืื ืงืืื ืขืจ ืืื ื ืืฉื ืืขืงืืืคื. ืืขืจ ืจืขืืืืืึทื ืืื ืืขืืืขื ืึท ืจืฉืืื ืคืื 20 ืคึผืจืึธืืืขืืก, ืืืึธืก ืืขืืืื ืขืก ืงืืึธืจ ืึทื ืจืืจืขืืืืืง ืืืืจ ื ืึธื ืืื ืึท ืืึทื ื ืืื ืืึธืจื ื ืืืขื ืฆื ืืฆืืื.
ืืื ืืื ืืขืืืขื ืืคึฟืจื ืืืจืื ืืืขืื ืื ืขืคืขืงืืืืืงืืึทื ืคืื ืืืื ื ืืฆื ืืื ืืืึธืก ืืื ืืขืจืืคื ืึท ืืืึทื ืฆืืืื ื. ืืขืืขืจ ืืึธื, ืืืืฃ ืืขืจ ืืืื-ืึทืจืืขื-ืืืื ืืึทืจืฉืจืื, ืืื ืืขืืขื ืืืื ืึทืื ืืขืืขืคืึธื ืืขืกืคึผืขืจืึทืืื ืืจืืื ื ืฆื ืืืืึทืื 20 ืืขืืืืื ื ืืื ืื ืคืืืขืจ. ืขืก ืืื ืืขืืืขื ืขืคึผืขืก ืืื ืืึธืก:
ืืึธืืื ืืึทืืจ ืฆืืืื ื ืืืืืขืจ ืจืืคืึทืงืืขืจืื ื
ืืืืก ืืืื ืื ืคืืจ? ืืื ืงืืจืฅ, ืืขืจ ืกืขืจืืืขืจ ืืขืืื ื ืืขื HTML ืืืึทื ืฆื ืึทืืขืืขื ืืืืฃ ืื ืืขืืืข ืืืขื, ืจืึทืืึทืจืืืึทืก ืคืื ืฆื ืืขืจ ืืึทื ืืฆืขืจ ืืื ืืึธืื ืืื ืึธืืขืจ ื ืืฉื. ืืขืจื ืึธื ืืขืจ ืงืืืขื ื JS ืืื ืืึธืืืื ืืื ืจืืงืืืขืก ืื ื ืืืืืง ืืึทืื ืืืืืขืจ, ืึธืืขืจ ืึทืืืฉืึทืกืืื ืคึฟืึทืจ ืืขืจืืืืืขื ืืฉ. ืืึธืก ืืืืกื, ืืืจ ืืึธืื ืืึทืงืข ืฆืืืื ืืึธื ืืขืืึธื ืื ืืขืืืข ืึทืจืืขื. ืื ืฆืืืื ื ืคืืืงืขืจื, ืืื ืืขืจ ืืึทื ืืฆืขืจ ืืึทืื ืืึธืืืื ืึท ืืื ืืื ืืขืจื ืขืงืกืืจืข ืงืืืืืืื. ืืื ืืขืืึทื ืึทืืฅ ืืขืงืืงื ืืคืืื ืืขืจ ืงืจืืคึผื.
ืึทืื ืกืกืจ-ืงืกืจ ืกืืขืืข. ืืขืจืืืืืขื ืืฉ ืืื ืืืืื ืืขืืืขื ืืื ืกืืึทืืขืก C3 ืืื C4, ืืืขื Node JS ืืื ื ืืฉื ืคืึทืจื ืืืขื ืืื ืืืฉืขื ืขืจืืืืื ื HTML ืืื ืงืขื ืขื ืคึผืจืึทืงืกื ืจืืงืืืขืก ืฆื ืื API.
ืืื ืืืขืจ ืึทืจืงืึทืืขืงืืฉืขืจ ืคืื ืึทื ืฆืืึทื ืืื ืืขืืืขื ืืืืขืจ ืึทืงืืขืจืึทืืื ืืืกืงืจืืืื ืืืจื ืืืื ืขืจ ืคืื ืื ืืืจ ืืึทื ืืฆืขืจ:
ืื ืจืืจืขืืืืืง ืืืขืจืกืืข ืืื ืึท ืืืกื. ืืื ืืื ืขืก ืืื ืขืก ืืื. ื ืฉืจืขืงืืขื ืงืึธืืืื ืึทืฆืืข ืคืื โโืกืกืจ ืืื ืงืกืจ.
ืืืจ ืืืื ืขืก ืืขืืืื ืืืื ืืืื, ืืื ืืจืืืขืจืืง ืขืก ืืื ื ืืฉื ืืขืืืขื.
ืืื ืึทืกืกืขืกืกืขื ืื ืึธืคึผืฆืืขืก, ืืืฉืืคื ืึท ืืืืขื ืืื Jira ืืื ืึท ืืึทืฉืจืืึทืืื ื ืืืืฃ ืืขืจ ืืืจืื ืคืื "ืขืก ืืื ืฉืืขืื ืืืฆื, ืืึธื ืขืก ืจืขืื" ืืื ืืืงืึทืืคึผืึธืืื ืื ืึทืจืืขื ืืื ืืจืืื ืกืืจืึธืงืขืก:
- ืจืื ืืฆื ืืึทืื,
- ืืื ืึทืืืื ืื ื ืืืขืจ ืคืื ืจืืืจืืืื,
- ืขืืืืื ืืจื ืืืคึผืืืงืึทื ืจืืงืืืขืก,
- ืืึทืื ืื ืืึธืืืื ื ืคึผืจืึธืฆืขืก ืืขืจ ืงืืึธืจ ืืื ืืขืจ ืืึธื.
ืืื ืก ืจืืืื ืื ืืึทืื
ืืื ืืขืึธืจืืข, ืกืขืจืืืขืจ-ืืืึทื ืจืขื ืืขืจืื ื ืืื ืืืืืื ื ืฆื ืกืึธืืืืข ืฆืืืื ืคึผืจืึธืืืขืืก: ื ืื ืฆื ืืืืื ืคืื ืืืื ืืึธืืึธืจ ืืืืืืืืฉืึทื ื ืืื ืืขืจืืื ืขื ืคืื
ืืจืึธืฅ ืืขืจ ืคืึทืงื ืึทื ืืขืจ ืืื ืืขืงืก ืืืจ ืืขื ืขื ืืืจืืืขืืื ืืขื ืืื ื ืื ืึทืืืืขื ื ืคืื ืื ืืขืื ืึธืืึธืืืข, ืืื ืืื ืืขื ืฆืืึทื ืึท ืคึผืืึทืฅ ืคืื ืืืึทืกืขืจ ืืื ืืึทืงืข ืคืืึธืื ืืื ืืขืจ ืื ืืจืืง ืืื ืื ืคืจืึธื ื-ืกืืฃ ืืืขืื, ืคึฟืึทืจ ืคืืืข ืืขืืืขืืึธืคึผืขืจืก ืืขื ืืขืืึทื ืง ืืื ื ืึธื ืฉืจืึทืืืื ืืื ืืขืกืึธืืืงืืึทื. ืืืจ ืืึธืื ื ืืฉื ืฉืืืื ืืึทืืื ืืขืจ ืืื ืจืึธืืื ืืืืก ืึท Vue ืึทืคึผืืึทืงืืืฉืึทื ืืื SSR ืฉืืืฆื ืฆื ืคึผืจืึธืืืงืฆืืข, ืคืขืื ืืืง ืืืื ืงืืืื ืืขืืึทื: ืืืจ ืืึธืื ื ืืฉื ืืขืฉืืงื ืื ืขืจืฉื ืฉืืึทื ืฆื ืืขื ืงืืืขื ื.
ืคืืจืืืืก? ืขืก ืืื ืงืืื ืคึผืื ืืืขื ืขื ืืคืขืจ ืฆื ืืขื ืงืฉืื. ืึธืืขืจ ืืื ืืืื ื ืืฉื ืืืขืื ืฆื ืคืึทืจืืจืขืกืขืจื ืื ืืจืืืก ืคืื ืืขื ืขื ืืคืขืจ ืคืื ืื ืกืขืจืืืขืจ, ืึธืืขืจ ืืืืึทื ืคืื ืึท ืืื ืื ืคืื ืื ืืขืจืข ืึทืจืงืึทืืขืงืืฉืขืจืึทื ืคึผืจืึธืืืขืืก, ืึธืืขืจ ืขืก ืคืฉืื ืืื ื ืืฉื ื ืขืืขื ืึทืืืขืง. ืืืื ืืืขื ืึธืืขืจ ืื ืืขืจื, ืคืืจืืืืจืคื ืื ืฉืืึทื ืืื ืจืืืืื ื ืึทืืฅ ืืืึธืก ืื ืกืขืจืืืขืจ ืืื ืืื ืืึทื ืฅ ืฆืื ืขืืขื ืืื ื ืืฆืืง. ืื ืึทืจืืขื ืืื ืคืืงืืืฉ ื ืืฉืืืง - window.__INITIAL_STATE__
.
ืืืื ืขืจ ืคืื ืื ืคืจืืืืขืืขื ืืืึธืก ืืื ืืืืคืืขืฉืืื ืขื ืืื ืื ืื ืึทืืืืืื ืฆื ืืขืจ ืกืืืงืืืง ืกืืจืึทืงืืฉืขืจื ืืื JSON (
ืืื ืึทืืืฉืึทื, ืืืขื ืืืจ ืืึทื ืืืขื ืืื UGC ืืื ืืึทืื, ืืืจ ืืึธื ืืขืืขื ืงืขื ืึทื ืื ืืึทืื ืืึธื ืืืื ืงืึธื ืืืขืจืืขื ืฆื HTML ืขื ืืืืื ืฆื ื ืืฉื ืืจืขืื ืื HTML. ืคึฟืึทืจ ืื ืฆืืืขืงื ืืืจ ื ืืฆื
ืืื ืึทืืืืืื ื ืจืืืื ืื
ืืื ืืืจ ืงืขื ืขื ืืขื ืคึฟืื ืื ืืืึทืืจืึทืืข ืืืืื, ืืื ืืื ืืืขืจ ืคืึทื, ืืืื ื ืึธืืข ืืืฉืก ืืืึทืฉืคึผืื ืคึผืขืจืคืึธืจืื ืฆืืืื ืคืึทื ืืงืฉืึทื ื: ืกืกืจ ืืื "ืคึผืจืึธืงืกื" ืืื ืื ืึทืคึผื, ืืื ืืึทื ืืฆืขืจ ืืขืจืืืืืขื ืืฉ ืึทืงืขืจื. ืืขื ืืืฉืืึทื ื ืืืื ืขืก ืืืืืขืืืขื ืฆื ืึธืืขืจืืื ืืฉืขืช ืื JS ืงืึธื ืืื ืคืืืกื ืืืง ืืืืฃ ืื ืกืขืจืืืขืจ, ืืืืึทื ืื ื ืึธืืข ืืื ืืืื-ืืจืขืืื, ืืื ืื SSR ืคืื ืงืฆืืข ืืื ืกืื ืืฉืจืึธื ืึธืืก. ืึทื ืืื, ืืขืจ ืกืขืจืืืขืจ ืคืฉืื ืงืขื ืขื ื ืืฉื ืฉืืงื ืจืืงืืืขืก ืฆื ืืื ืืฉืขืช ืื ืงืึทืืืกืืึทืง ืืื ืคืึทืจื ืืืขื ืืื ืขืคึผืขืก. ืขืก ืคืืจืงืขืจื ืืืืก ืึทื ืืืจ ืืขืจืืืึทื ืืืงื ืื ืฉืืึทื, ืึธืืขืจ ืื ืฆืืืื ื ืืื ื ืืฉื ืืึทืืื ืืืืืืฉืื ื, ืืืืึทื ืื ืืึทืื ืืืืฃ ืืขื ืงืืืขื ื ืืืื ืืืื ืืขืจืืืึทื ืืืงื ืืื ืื ืืึทื ืืฆืขืจ ืกืขืกืืข. ืืืจ ืืึทืจืคึฟื ืฆื ืืขืจื ืขื ืืื ืืืขืจ ืึทืคึผืืึทืงืืืฉืึทื ืฆื ืฉืืขืื ืื ืจืืืืืง ืืึทืื ืืื ืื ืขืจืฉื ืฉืืึทื, ืืขื ืืืขื ืืื ืืฉืืื ืื ืืึทื ืืฆืขืจ ืก ืืึธืืื.
ืขืก ืืขื ืขื ืืขืืืขื ืืืืื ืฆืืืื ืกืึทืืืฉืึทื ื ืฆื ืืขื ืคึผืจืึธืืืขื:
- ืฆืืืฉืขืคึผืขื ืืขืจืืืืืขื ืืฉ ืืึทืื ืฆื ืงืจืืึทื-ืกืขืจืืืขืจ ืจืืงืืืขืก;
- ืฉืคึผืึทืืื Node JS ืืืึทืขืจืก ืืื ืฆืืืื ืืึทืืื ืืขืจ ืื ืกืืึทื ืกืื.
ืืขืจ ืขืจืฉืืขืจ ืืืืืื ื ืคืืจืืื ืื ืื ื ืืฆื ืคืื ืืืืืืืข ืืืขืจืืึทืืึทืื ืืืืฃ ืื ืกืขืจืืืขืจ, ืืื ืื ืจืืข ืขืงืกืืขื ืืขื ืื ืืขืจืืื ืคึฟืึทืจ ืงืึทืืคึผืืืืื ื ืื ืึทืจืืขื ืืื ืืืึท ืืื ืืกืืขืจ ืึท ืืืืฉ.
ืืื ืฆื ืืึทืื ืึท ืืจืืจื? ืืืืจ ืืืืืขืื ืืื ืืคื ืืืืคื ืืืขื ืคืื ืงืืขื ืกืืขืจ ืงืขืื ืฉืืขื. ืื ืคืึธืจืืึทืืื, ืขืก ืืื ืึท ืืขื ืขืจืึทื ืคืึทืจืืึทื ื ืฆื ืจืขืืืฆืืจื ืื ืฆืืงื ืคืื ืืขืืึทื ืง ืฆื ืคึผืจืึธืืืึทืืืืคึผ ืฆื ืึท ืืื ืืืื. ืืขืจ ืืึธืืขื ืคืื ืฉืืขืืื ื ืฆื ืืขื ืคึผืจืึธืืืงื ืืื ืขืคึผืขืก ืจืขืืึทื ืืกืึทื ื ืคืื ืื ืคึผืึธืกืืืืึทืืขืก ืคืื booking.com, ืืื ืืขืจ ืืืืื ืืืืืง ืืื ืึทื Habr ื ืขืื ืืึทื ืืฆืขืจ ืืึทืืขืจืงืื ืืขื ืคืื ืืขืจ ืขืืขืก ืืื ืืจืึทืกื ืืืจ, ืืื ืึท ืืขืืืขืืึธืคึผืขืจ, ืฆื ืืึทืื ืึทืืึท ืืืกืืืฉืึทื ื.
ื ืึธื ืืขื ืืึธืืืง ืืื ืืืื ืืืืืขื ืข ืคืึทืจืืึทื ื ืฆื ืืขืฉืืืื ื ืกืึธืืืืข ืืขื ืคึผืจืึธืืืขื, ืืื ืืืืกืืขืจืืืืืื ืืืืืืืข ืืืขืจืืึทืืึทืื. ืืื, ืืื ืึธืคื ืืึทืคึผืึทื ื, ืืืจ ืืึธืื ืฆื ืืึทืฆืึธืื ืคึฟืึทืจ ืืื ืืืืขืจ ืึธืืขืจ ืฉืคึผืขืืขืจ. ืืืจ ืืึทืฆืึธืื ืึผืืขื ืืื: ืืืจ ืืขืืจืืขื ืืืืฃ ืื ืึธืคึผืจืืืขื, ืงืืืจื ืื ืงืึทื ืกืึทืงืืืขื ืกืึทื, ืืขืฉืจืืื
ืืึธืืื ืืึทืืจ ืฆืืืื ื ื ืึธื ืืขืจ ืขืจืฉืืขืจ ืืื ืข ืคืื โโืจืขืคืึทืงืืึธืจืื ื
ืืขืกืึธืฃ, ืื SSR-CSR ืึทืจืงืึทืืขืงืืฉืขืจ ืคืื ืื ืจืืจืขืืืืืง ืืืขืจืกืืข ืคืืจื ืฆื ืืขื ืืืื:
๏ฟผ"ืฆืืืื-ื ืึธืืข" ืกืกืจ-ืงืกืจ ืงืจืืึทื. ืื Node JS API ืืื ืฉืืขื ืืืง ืืจืืื ืคึฟืึทืจ ืืืกืื ืืงืจืึทื ืึทืก I / O ืืื ืืื ื ืืฉื ืืคืืขืฉืืขืื ืืืจื ืื SSR ืคืื ืงืฆืืข, ืืืืึทื ืื ืืขื ืขืจ ืืื ืืืื ืืื ืึท ืืึทืืื ืืขืจ ืืืึทืฉืคึผืื. ืึธื ืคึฟืจืขื ืงืืื #3 ืืื ื ืื ืืืจืฃ.
ืืืืืึทื ืืืืื ื ืืืคึผืืืงืึทื ืจืืงืืืขืก
ื ืึธื ืื ืืึทื ืืคึผืืึทืืืืฉืึทื ื ืืขื ืขื ืืืจืืืขืงืึธืื, ืื ืขืจืฉื ืจืขื ืืขืจืื ื ืคืื ืื ืืืึทื ืืื ื ืืฉื ืคึผืจืึทืืืึธืืงื ืขืคึผืืืขืคึผืกื. ืึธืืขืจ ืื ืืืืึทืืขืจ ื ืืฆื ืคืื Habr ืืื ืกืคึผืึท ืืึธืืข ื ืึธื ืืขืคึฟืืจื ืฆืขืืืฉืื ื.
ืืื ื ืื ืืงืขืจ ืคืื ืืึทื ืืฆืขืจ ืืืืคื ืืื ืืจืึทื ืืืฉืึทื ื ืคืื ืื ืคืึธืจืขื ืจืฉืืื ืคืื ืึทืจืืืงืืขื โ ืึทืจืืืงื โ ืืึทืืขืจืงืื ืืขื ืืื ืืืืฆืข ืืืขืจืกืึท, ืขืก ืืื ืืขืืืขื ืืืืืืืง ืฆื ืึทืคึผืืึทืืืื ืื ืืืื ืงืึทื ืกืึทืืฉืึทื ืคืื ืืขื ืงืืื ืืื ืืขืจ ืขืจืฉืืขืจ ืึธืจื.
ืฆืืจืืงืงืืืขื ืฆื ืื ืคึผืึธืกืื ืงืึธืจืืขื ืคึผืจืึทืืืึธืืงืก ืึท ื ืืึทืข ืืึทืื ืืขืื
ืืณืืื ื ืืฉื ืืขืืืจืคื ืืืฃ ืืจืืื. ืืื ืื ืกืงืจืขืขื ืงืึทืกื ืืืืื ืืืจ ืงืขื ืขื ืืขื ืึทื ืื ืึทืคึผืืึทืงืืืฉืึทื ืจืืงืืืขืกื ืื ืจืฉืืื ืคืื ืึทืจืืืงืืขื ืืืขื ืกืืืืคึผืื ื ืฆืืจืืง, ืืื ืืขืฉืึทืก ืื ืืขืื ืืืจ ืืึธื ื ืื ืืขื ืื ืึทืจืืืงืืขื, ืืืึธืก ืืืื ืึทื ืื ืคืจืืขืจืืืงืข ืืึทืื ืคืึทืจืฉืืืื ืื ืขืจืืขืฅ. ืขืก ืงืืงื ืืื ืืขืจ ืึทืจืืืงื ืจืฉืืื ืงืึธืืคึผืึธื ืขื ื ื ืืฆื ืึท ืืืืข ืฉืืึทื ืืื ืคืืจืืืจื ืขืก ืืืืฃ ืฆืขืฉืืขืจื. ืืื ืคืึทืงื, ืื ืึทืคึผืืึทืงืืืฉืึทื ืืขืืืืื ื ืึท ืืืืืืืข ืฉืืึทื, ืึธืืขืจ ืื Vuex ืึทืจืงืึทืืขืงืืฉืขืจ ืืื ืืขืืืขื ืืขืืืื-ืืื: ืืึทืืืฉืืื ืืขื ืขื ืืืื ืฆื ืืืขืืขืจ, ืืืึธืก ืืื ืงืขืจ ืืขื ืขื ืืืื ืฆื ืจืืฅ. ืืขืจืฆื, ืึทืืข ืืึทืืืฉืืื ืืขื ืขื "ืืืกืคึผืึธืืืึทืืึทื" - ืืขืืขืจ ืกืึทืืกืึทืงืืืึทื ื ืืืืืื ืฆื ืื ืืืึทื ืจืืจืึธืื ืื ืืื ืฆืข ืืึธืืืืข:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
ืืื ืืึทื ืฅ, ืืืจ ืืึธืื ืึท ืืึธืืืืข ืืจืืืงืืขื ืจืฉืืื, ืืืึธืก ืึผืืื ืึทืืืืฉืขืงืฅ ืคืื ืืืคึผ ืึทืจืืืงื ืืื ืืึธืืืืข ืืืึทื ืึทืจืืืงื, ืืืึธืก ืืื ืืขืืืขื ืึทื ืขืงืกืืขื ืืขื ืืืขืจืกืืข ืคืื โโืื ืืืืคืขืฅ ืึทืจืืืงื, ืืื ืคืื ืึทืจืืืงื ืคืื. ืืื ืึทืืืขืืืื, ืื ืืืคึผืืึทืืขื ืืืืฉืึทื ืืื ื ืืฉื ืคืืจื ืขืคึผืขืก ืฉืจืขืงืืขื ืืื ืืื - ืขืก ืืื ืืืืขืจ ืคึผืฉืื, ืืขื ืงืขื ืึทืคึฟืืื ืืึธืื ื ืึทืืื, ืึธืืขืจ ืืึธืจ ืคืึทืจืฉืืืืืง. ืืืื ืืืจ ืืึทืฉืืขืืืง ืื ืืึธืืืืข ืืขืืขืจ ืืึธื ืืืจ ืืืืฉื ืื ืืึทืจืฉืจืื, ืืืจ ืงืขื ืขื ืืคืืื ืืขืื ืืื ืืื. ืึธืืขืจ, ืืืฉื, ืืึธืืืื ื ืฆืืืืฉื ืึทืจืืืงื ืคืืื / ืคืืืขืจ โ / ืึทืืข, ืืื ืืขืจืึทื ืืื ืฆื ืืืึทืจืคื ืึทืืืขืง ืึทืืฅ ืฉืืึทืืืช ืฆื ืื ืคืขืจืืขื ืืขืืข ืคืืืขืจ, ืืื ื ืืืจ ืืึธืื ืืืืื ืืืื ืืจืืืงืืขื ืจืฉืืื, ืืื ืืืึธืก ืืืจ ืืึทืจืคึฟื ืฆื ืฉืืขืื ื ืืึท ืืึทืื. ืืึธืก ืืืืืขืจ ืคืืจื ืืื ืื ืฆื ืืืคึผืืืงืืืฉืึทื ืคืื ืจืืงืืืขืก.
ืืึธื ืืื ืืขืืืืื ืึทืืฅ ืืืึธืก ืืื ืืึธื ืืขืงืขื ื ืืืืกืืจืึธืื ืืืืฃ ืืขืจ ืืขืืข, ืืึธื ืืื ืคืึธืจืืืืืจื ืึท ื ืืืข ืฉืืึทื ืกืืจืืงืืืจ ืืื ืขืก ืคืึธืจืืขืฉืืขืื ืคืืจ ืืืื ืข ืืืจืื. ืื ืืืกืงืืกืืขืก ืืขื ืขื ืืขืืืขื ืืึทื ื, ืึธืืขืจ ืืื ืื ืกืืฃ ืื ืึทืจืืืืขื ืื ืืื ืืืืืืข ืืขื ืขื ืืขืืขืจ ืืื ืื ืกืคืงืืช, ืืื ืืื ืื ืืขืืืืื ืืืคึผืืึทืืขื ืืืืฉืึทื.
ืื ืืึธืืืง ืคืื ืึท ืืืืืื ื ืืื ืืขืกืืขืจ ืืืืื ืืื ืฆืืืื ืกืืขืคึผืก. ืขืจืฉืืขืจ, ืืืจ ืคึผืจืืืืจื ืฆื ืืืงืึธืืคึผืื ืื Vuex ืืึธืืืืข ืคึฟืื ืืืขืืขืจ ืืื ืืื ืื ืืืืื ืฆื ืจืืฅ. ืืึธ, ืขืก ืืืขื ืืืื ืึท ืืืกื ืืขืจ ืืึทืื ืืื ืื ืงืจืึธื, ืืขืืขืจ ืืืขื ืืืขืจื ืึท ืืืกื ืืขืจ ืงืึธืืคึผืืืฆืืจื, ืึธืืขืจ ืืืจ ืืืขืื ื ืืฉื ืืึธืื ืึทืจืืืงืืขื ืฆืืืื ืืึธื. ืคึฟืึทืจ ืื ืจืืจืขืืืืืง ืืืขืจืกืืข, ืืึธืก ืืื ืืึธืืขืจ ืื ืกืืจืึธื ืืขืกื ืึทืจืืืืขื ื. ืขืก ืืืขื ืงืืงื ืขืคึผืขืก ืืื ืืึธืก:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
ืึธืืขืจ ืืืึธืก ืืืื ืึทืจืืืงื ืจืฉืืืืช ืงืขื ืขื ืึธืืืืขืจืืึทืคึผ ืฆืืืืฉื ืงืืืคื ืจืืฅ ืืื ืืืึธืก ืืืื ืืืจ ืืืขืื ืฆื ืจืืืืก ืื ืึทืืืืฉืขืงื ืืึทืื ืึทืจืืืงื ืฆื ืืึทืื ืืขื ืคึผืึธืกืื ืืืึทื, ืืืขื ืื ืขืก ืืื ืึทืจืืืงื ืคืื? ืืื ืืขื ืคืึทื, ืขืก ืืืึธืื ืืืื ืืขืจ ืืึทืืืฉืืงืึทื ืฆื ื ืืฆื ืึทืืึท ืึท ืกืืจืืงืืืจ:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
ืืจืืืงืืขื ืจืฉืืื ืืึธ ืขืก ืืื ื ืึธืจ ืึท ืืื ืคืื ืจืืคึผืึทืืึทืืึธืจื ืคืื ืึทืจืืืงืืขื. ืึทืืข ืึทืจืืืงืืขื ืืืึธืก ืืขื ืขื ืืึทืื ืืึธืืืื ืืขืฉืึทืก ืื ืืึทื ืืฆืขืจ ืกืขืกืืข. ืืืจ ืืืืื ืืืขื ืืื ืืื ืื ืืขืจืกืืข ืืึธืจื, ืืืืื ืืึธืก ืืื ืคืึทืจืงืขืจ ืืืึธืก ืงืขื ืืืื ืืึทืื ืืึธืืืื ืืืจื ืืืืืืืง ืขืจืืขืฅ ืืื ืื ืืขืืจืึธ ืฆืืืืฉื ืกืืืืฉืึทื ื, ืืื ืืืจ ืืืขืื ืืืฉืืืื ื ืืฉื ืืึทืื ืืขื ืืืืืืืง ืฆื ืืขืจ ืืึทื ืืฆืขืจ ืืืืืขืจ ืืืจื ืฆืืืื ืืขื ืืื ืฆื ืืึธืื ืืึทืื ืืืึธืก ืขืจ ืืื ืฉืืื ืืึทืื ืืึธืืืื. ืึทื ืึธืืืขืงื ArticlesIds ืืื ืคืฉืื ืึท ืืขื ืืข ืคืื โโIDs (ืืื ืืืื "ืืื ืงืก") ืฆื ืึทืืืืฉืขืงืฅ ืึทืจืืืงื. ืืขืจ ืกืืจืืงืืืจ ืึทืืึทืื ืืืจ ืฆื ืืืกืืืืื ืืืคึผืืืงืึทื ืืึทืื ืคึผืจืึธืกื ืฆื ืจืืฅ ืืื ืจืืืืื ื ืื ืืืืคืขืฅ ืึทืจืืืงื ืืืขื ืจืขื ืืขืจืื ื ืึท ืคึผืึธืกืื ืืืึทื ืืืจื ืืขืจืืืฉืื ื ืขืงืกืืขื ืืขื ืืึทืื ืืื ืขืก.
ืืขืจ ืจืขืืืืืึทื ืคืื ืืขืจ ืจืฉืืื ืคืื ืืจืืืงืืขื ืืื ืืืื ืืขืืืืจื ืืขืจ ืืจืึทื ืกืคึผืขืจืึทื ื: ืืขืจ ืืืขืจืึทืืึธืจ ืงืึธืืคึผืึธื ืขื ื ืืืขืจืืืฅ ืืืจื ืื ืืขื ืืข ืืื ืึทืจืืืงื IDs ืืื ืฆืื ืื ืึทืจืืืงื ืืืืขืจ ืงืึธืืคึผืึธื ืขื ื, ืคืึธืจื ืื Id ืืื ืึท ืึธื ืฉืคึผืึทืจ, ืืื ืืขืจ ืงืื ื ืงืึธืืคึผืึธื ืขื ื, ืืื ืงืขืจ, ืจืืืจืืืื ืื ื ืืืืืง ืืึทืื ืคืื ืืจืืืงืืขื ืจืฉืืื. ืืืขื ืืืจ ืืืื ืฆื ืื ืืืกืืึทืืข ืืืึทื, ืืืจ ืืึทืงืืืขื ืื ืฉืืื ืืืืืกืืื ื ืืึทืืข ืคืื ืืจืืืงืืขื ืจืฉืืื, ืืืจ ืืึทืื ืึท ืืงืฉื ืฆื ืืึทืงืืืขื ืื ืคืขืื ืืืง ืืึทืื ืืื ืคืฉืื ืืืืื ืขืก ืฆื ืื ืืืืืกืืื ื ืืืืคืขืฅ.
ืคืืจืืืืก ืืื ืืขืจ ืฆืืืึทื ื ืืขืกืขืจ? ืืื ืืื ืืขืฉืจืืื ืืืืื, ืืขื ืฆืืืึทื ื ืืื ืืขืจ ืืืื ืืื ืจืขืกืคึผืขืงื ืฆื ืื ืืึทืื ืืึธืืืื ืืึทืื ืืื ืึทืืึทืื ืืืจ ืฆื ืจืืืืก ืขืก. ืึธืืขืจ ืึทืืืฅ ืืขื, ืขืก ืขืคึฟื ื ืืขื ืืืขื ืฆื ืขืืืขืืข ื ืืึทืข ืคึผืึทืกืึทืืืืึทืืื ืืืึธืก ืคึผืึทืกืืง ืืืฉืืืืืขืก ืืื ืึทืืึท ืึท ืึทืจืงืึทืืขืงืืฉืขืจ. ืคึฟืึทืจ ืืืึทืฉืคึผืื, ืคึผืึธืืืื ื ืืื ืืึธืืืื ื ืึทืจืืืงืืขื ืืื ืื ืคืืืขืจ ืืื ืืื ืืขืจืฉืืึทื ืขื. ืืืจ ืงืขื ืขื ืคืฉืื ืฉืืขืื ืื ืืขืฆืืข ืึทืจืืืงืืขื ืืื ืึท "ืกืืึธืจืืืืฉ" ืืจืืืงืืขื ืจืฉืืื, ืืื ืึท ืืึทืืื ืืขืจ ืจืฉืืื ืคืื ื ืืึทืข IDs ืืื ArticlesIds ืืื ืืขืื ืฆื ืืืืกื ืืขื ืืึทื ืืฆืขืจ ืืืขืื ืืื. ืืืขื ืืืจ ืืจืืงื ืืืืฃ ืื ืงื ืขืคึผื "ืืืืึทืื ื ืืึทืข ืืืืกืืืืขืก", ืืืจ ืืืขืื ืคืฉืื ืึทืจืืึทื ืืืืื ื ืืึท ืืืก ืืื ืื ืึธื ืืืื ืคืื ืื ืืขื ืืข ืคืื โโืื ืงืจืึทื ื ืจืฉืืื ืคืื ืึทืจืืืงืืขื ืืื ืึทืืฅ ืืืขื ืึทืจืืขืื ืึผืืขื ืืึทืืืฉืืงืึทืื.
ืืืื ืืึทืื ืืึธืืืื ื ืืขืจ ืขื ืืืฉืืืึทืืึทื
ืื ืืืกืื ื ืืืืฃ ืื ืจืขืคืึทืงืืึธืจืื ื ืฉืืืงื ืืื ืืขืจ ืืึทืืจืืฃ ืคืื ืกืงืขืืึทืืึทื ื, ืืืึธืก ืืืื ืืขื ืคึผืจืึธืฆืขืก ืคืื ืืึทืื ืืึธืืืื ื ืืื ืืึทืื ืืืืฃ ืึท ืคึผืึทืืขืืขื ืืื ืืขืจื ืขื ืึท ืืืกื ืืืืื ืืงืขืจ ืขืงืืืืง. ืขืก ืืขื ืขื ืงืืื ืืืกืงืืกืืขืก ืืืขืื ืืขื ืขื ืื; ืืขืจ ืืืขื ืคืื ืืขืืึทื ืง ืฆื ืคึผืจืึธืืืึทืืืืคึผ ืืขื ืืืขื ืืืฉ ืฆืืืื ืฉืขื. ืืขืจ ืคึผืืึทื ืคึผืจืึทืงืืึทืงืื ืืขืฆืืืื ืืื, ืืื ืืืจ ืืขืืขืจื ื ืืื ืืืขืจ ืงืึทืืคึผืึธืื ืึทื ืฅ ืฆื ืืึทืื ืคึผืฉืื, ืงืืื ืคืืืงืงืขืจืื ื ืืืืื ืืืึทืงืก ืืฉืขืช ืืืืจืื ืคึฟืึทืจ ืืึทืื. ืกืึทืืืืฉืขืงืืืืืื, ืืขื ืฆืืืึทื ื ืฆื ืืึธืืืื ื ืึทืงืืฉืึทืืืึทืื ืจืึทืืืกืึทื ืื ืกืืืข ืคืื โโืืจืืง ืืึธืจืืึธืื ื ืืื ืื ืืึทื ืืฆืขืจ 'ืก ืืืฃ. ืืขืจ ืกืงืขืืขื ืงืืงื ืืื ืืึธืก:
Habraloading
ืจืขืคืืขืงืืื ื
ืืื ืืื ืฉืืื ืืขืงืก ืืืฉืื ืืจืืขืื ืืื Habrรฉ ืืื ืืืื ืคืจืขื ืื ื ืึธื ืคืจืขืื: ื ื, ืืื ืืึธื ืืืจ ืืื ืขืก ืืึธืจื? ืึธืืงืื, ืืึทืงืืืขื - ืืึธ. ืืืขืจ ืขืก ืืื ืขืคึผืขืก ืืืึธืก ืืืื ืืขื ืึทืจืืขื ืึทื ืืขืจืฉ ืคืื ืื ืืขืจืข. ืืื ืืขืืจืืขื ืืื ืืืื ืืืึธืก ืืขื ืขื ืืึธืจ ืืืืึทืืืืืืืง ืฆื ืืืืขืจ ืคึผืจืึธืืืงื, ืืื ื ืื ืืืืกื ืึธืืขืจ ืคึฟืึทืจืฉืืืื ืืืึธืก ืืืืขืจ ื ืืฆืขืจืก ืืขื ืขื. ืืืขืจ ืืึธ ืึทืืฅ ืืื ืึทื ืืขืจืฉ. ืืึธ ืืืจ ืคืืื ืคืึทืจืึทื ืืืืึธืจืืืขื ืคึฟืึทืจ ืืืึธืก ืืืจ ืืึธื. ืืื ืืขื ืคึผืจืึธืฆืขืก ืคืื ืืขืืืขืืึธืคึผืื ื ืึท ืฉืืจืื, ืืืจ ืืืื ืืืื ืืึทืืืฆืขืจ, ื ืขืืขื ืึธื ืืืื ืืื ืึทืืข ืคึผืจืึธืืืงื ืืืืื ืื ืฉืืึทืืืช ืฆื ืืืื ืคืึทื ืืงืฉืึทื ืึทืืืื, ืืึทืื ืคึฟืืจืืืืื ืืื ืืึทืื ืืืกืืืฉืึทื ื ืืื. ืืึทืื ืึท ืคึผืจืึธืืืงื ืืืึธืก ืืืจ ื ืืฆื ืืขืืขืจ ืืึธื ืืื ืืื ืืืืขืจ ืงืื, ืึธืืขืจ ืฉืจืืืื ืงืึธื ืคึฟืึทืจ ืืขื ืืฉื ืืืึธืก ืืขื ืขื ืืืกืืึธืืข ืืขืกืขืจ ืืื ืขืก ืืื ืืืจ ืืื ื ืึธืจ ืึทื ืืืืืื ืืขืคืื (ืงืืื ืกืึทืจืงืึทืื).
ื ืึธื ืื ืืขืืืื ื ืคืื ืึทืืข ืื ืขื ืืขืจืื ืืขื, ืืืจ ืืืงืืืขื positive ืืึทืืขืจืงืื ืืขื, ืืื ืขืก ืืื ืืขืืืขื ืืืืขืจ, ืืืืขืจ ืคืืึทื. ืขืก ืก ืื ืกืคึผืืจืื ื. ืืืื ืง! ืฉืจืืื ืืขืจ.
ืืึธืื ืืืจ ืืขืจืืึธื ืขื ืืืจ ืึทื ื ืึธื ืืืืืืืข ืืืขืจืืึทืืึทืื ืืืจ ืืึทืฉืืึธืกื ืฆื ืืืืฉื ืื ืึทืจืงืึทืืขืงืืฉืขืจ ืืื ืึทืืึทืงืืื ืื ืคึผืจืึทืงืกื ืฉืืืืข ืืื ืึท ืืึทืืื ืืขืจ ืืืึทืฉืคึผืื. ืื "ืฆืืืื-ื ืึธืืข" ืึทืจืงืึทืืขืงืืฉืขืจ ืืื ืฉืืื ืจืืืฉื ืืขืืืื ื ืืื ืื ืคืึธืจืขื ืคืื ืขืคื ืืืขื ืืืชื ืืขืกืืื ื. ืืืฆื ืืืขืจ ืขืก ืื ืงืขื ืขื ืืึทืฉืืืืขื ืฆื ืขืก ืืื ืืขืืคึฟื ืืื ืื ืืึทืื ืจืืจืขืืืืืง ืืึทื ืืขืกืขืจ. ืืึธืก ืืื ืึทืืข ืคึฟืึทืจ ืืืึทื ื. ืืื ืืืขื ืืืื ืฆืืคืจืืื ืฆื ืขื ืืคึฟืขืจื ืึทืืข ืืืื ืคึฟืจืืื ืืื ืื ืืึทืืขืจืงืื ืืขื.
ืืงืืจ: www.habr.com