{"id":10103,"date":"2026-09-23T03:56:39","date_gmt":"2026-09-23T03:56:39","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=10103"},"modified":"2026-09-25T15:36:05","modified_gmt":"2026-09-25T15:36:05","slug":"spa-programmirovanie","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/spa-programmirovanie\/","title":{"rendered":"SPA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435: \u0447\u0442\u043e \u044d\u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0438 \u043a\u0430\u043a \u0431\u044b\u0442\u044c \u0441 SEO"},"content":{"rendered":"

SPA (Single Page Application, \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/strong> — \u044d\u0442\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043a\u0430\u043a \u043e\u0434\u0438\u043d HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u044d\u043a\u0440\u0430\u043d\u044b JavaScript-\u043a\u043e\u0434\u043e\u043c: \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0435\u0437 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0410\u0434\u0440\u0435\u0441 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u044f \u0441\u0441\u044b\u043b\u043a\u0430.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c: SPA, MPA, SSR, SSG<\/a><\/li>\n
  2. \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 SPA \u043f\u043e \u0448\u0430\u0433\u0430\u043c<\/a><\/li>\n
  3. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u043e\u0443\u0442\u0435\u0440 \u043d\u0430 History API<\/a><\/li>\n
  4. \u0421\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0434\u0440\u0435\u0441\u0430 \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c: \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/a><\/li>\n
  5. History API \u0438\u043b\u0438 hash-\u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/a><\/li>\n
  6. SPA \u0438 SEO: \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0435\u0439<\/a><\/li>\n
  7. \u041f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b SPA — \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438<\/a><\/li>\n
  8. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f SPA<\/a><\/li>\n
  9. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  10. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  11. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  12. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041d\u0438\u0436\u0435 — \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0441 \u0440\u0430\u0431\u043e\u0447\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 MPA, SSR \u0438 SSG, \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u044f \u0438 \u0432\u044b\u0431\u043e\u0440 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n

    \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c: SPA, MPA, SSR, SSG<\/h2>\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0413\u0434\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f HTML<\/th>\n\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435<\/th>\n<\/tr>\n<\/thead>\n
    MPA (\u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435)<\/td>\n\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/td>\n\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/td>\n<\/tr>\n
    SPA \u0441 CSR (\u0440\u0435\u043d\u0434\u0435\u0440 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435)<\/td>\n\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438\u0437 JavaScript<\/td>\nJS \u043c\u0435\u043d\u044f\u0435\u0442 \u0447\u0430\u0441\u0442\u044c DOM, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f<\/td>\n<\/tr>\n
    SSR (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440)<\/td>\n\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/td>\n\u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u043c HTML, \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a SPA<\/td>\n<\/tr>\n
    SSG (\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f)<\/td>\n\u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435<\/td>\n\u0433\u043e\u0442\u043e\u0432\u044b\u0435 HTML-\u0444\u0430\u0439\u043b\u044b, \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a SPA<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    SPA — \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0430 \u043d\u0435 \u0437\u0430\u043f\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440: Nuxt \u0438\u043b\u0438 Next.js \u043e\u0442\u0434\u0430\u044e\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0447\u0435\u0440\u0435\u0437 SSR, \u00ab\u043e\u0436\u0438\u0432\u043b\u044f\u044e\u0442\u00bb \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (\u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f<\/strong>) \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a SPA.<\/p>\n

    \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 SPA \u043f\u043e \u0448\u0430\u0433\u0430\u043c<\/h2>\n
      \n
    1. \u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0430\u0435\u0442 HTML-\u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 JS-\u0431\u0430\u043d\u0434\u043b.<\/li>\n
    2. JavaScript \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0443\u0442\u044c \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.<\/li>\n
    3. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 — \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u043b\u0438\u043a, \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u0430\u0434\u0440\u0435\u0441 \u0447\u0435\u0440\u0435\u0437 history.pushState()<\/code>.<\/li>\n
    4. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 (\u043e\u0431\u044b\u0447\u043d\u043e JSON \u0447\u0435\u0440\u0435\u0437 fetch<\/code>) \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u0431\u043b\u043e\u043a.<\/li>\n
    5. \u041a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 popstate<\/code> — \u0440\u043e\u0443\u0442\u0435\u0440 \u0441\u043d\u043e\u0432\u0430 \u0440\u0438\u0441\u0443\u0435\u0442 \u044d\u043a\u0440\u0430\u043d \u043f\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443.<\/li>\n<\/ol>\n

      \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0447\u0438\u0441\u0442\u043e\u0433\u043e CSR: \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0443 \u043a\u043e\u0434\u0430 \u0447\u0430\u0441\u0442\u044f\u043c\u0438, \u043a\u0435\u0448 \u0438 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u043d\u043e \u0446\u0438\u043a\u043b \u00ab\u0430\u0434\u0440\u0435\u0441 -> \u0440\u043e\u0443\u0442\u0435\u0440 -> \u044d\u043a\u0440\u0430\u043d\u00bb \u0442\u043e\u0442 \u0436\u0435.<\/p>\n

      \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u043e\u0443\u0442\u0435\u0440 \u043d\u0430 History API<\/h2>\n

      \u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432: \u0442\u0440\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u00ab\u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e\u00bb. \u0424\u0430\u0439\u043b index.html<\/code>:<\/p>\n

      <!doctype html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"ru\"<\/span>><\/span>\n<<\/span>head<\/span>><<\/span>meta<\/span> charset<\/span>=<\/span>\"utf-8\"<\/span>><<\/span>title<\/span>><\/span>\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/<\/span>title<\/span>><\/<\/span>head<\/span>><\/span>\n<<\/span>body<\/span>><\/span>\n  <<\/span>nav<\/span>><\/span>\n    <<\/span>a<\/span> href<\/span>=<\/span>\"\/\"<\/span> data-link<\/span>><\/span>\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/<\/span>a<\/span>><\/span>\n    <<\/span>a<\/span> href<\/span>=<\/span>\"\/courses\"<\/span> data-link<\/span>><\/span>\u041a\u0443\u0440\u0441\u044b<\/<\/span>a<\/span>><\/span>\n    <<\/span>a<\/span> href<\/span>=<\/span>\"\/courses\/42\"<\/span> data-link<\/span>><\/span>\u041a\u0443\u0440\u0441 42<\/<\/span>a<\/span>><\/span>\n  <\/<\/span>nav<\/span>><\/span>\n  <<\/span>main<\/span> id<\/span>=<\/span>\"app\"<\/span>><\/<\/span>main<\/span>><\/span>\n  <<\/span>script<\/span>><\/span>\n    <\/span>function<\/span> <\/span>view<\/span>(<\/span>path<\/span>) {<\/span>\n      <\/span>if<\/span> (<\/span>path<\/span> <\/span>===<\/span> <\/span>\"\/\"<\/span>) <\/span>return<\/span> [<\/span>\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f\"<\/span>, <\/span>\"\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c\"<\/span>];<\/span>\n      <\/span>if<\/span> (<\/span>path<\/span> <\/span>===<\/span> <\/span>\"\/courses\"<\/span>) <\/span>return<\/span> [<\/span>\"\u041a\u0443\u0440\u0441\u044b\"<\/span>, <\/span>\"\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u0443\u0440\u0441\u043e\u0432\"<\/span>];<\/span>\n      <\/span>const<\/span> <\/span>m<\/span> <\/span>=<\/span> <\/span>path<\/span>.<\/span>match<\/span>(<\/span>\/^\\\/courses\\\/(\\d+)$\/<\/span>);<\/span>\n      <\/span>if<\/span> (<\/span>m<\/span>) <\/span>return<\/span> [<\/span>\"\u041a\u0443\u0440\u0441 \"<\/span> <\/span>+<\/span> <\/span>m<\/span>[<\/span>1<\/span>], <\/span>\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u0443\u0440\u0441\u0430 \"<\/span> <\/span>+<\/span> <\/span>m<\/span>[<\/span>1<\/span>]];<\/span>\n      <\/span>return<\/span> [<\/span>\"\u041d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e\"<\/span>, <\/span>\"\u0422\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u0442\"<\/span>];<\/span>\n    }<\/span>\n    <\/span>function<\/span> <\/span>render<\/span>() {<\/span>\n      <\/span>const<\/span> [<\/span>title<\/span>, <\/span>text<\/span>] <\/span>=<\/span> <\/span>view<\/span>(<\/span>location<\/span>.<\/span>pathname<\/span>);<\/span>\n      <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>title<\/span>;<\/span>\n      <\/span>const<\/span> <\/span>h1<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>\"h1\"<\/span>);<\/span>\n      <\/span>h1<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>text<\/span>;<\/span>\n      <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>\"app\"<\/span>).<\/span>replaceChildren<\/span>(<\/span>h1<\/span>);<\/span>\n    }<\/span>\n    <\/span>document<\/span>.<\/span>addEventListener<\/span>(<\/span>\"click\"<\/span>, (<\/span>e<\/span>) => {<\/span>\n      <\/span>const<\/span> <\/span>a<\/span> <\/span>=<\/span> <\/span>e<\/span>.<\/span>target<\/span>.<\/span>closest<\/span>(<\/span>\"a[data-link]\"<\/span>);<\/span>\n      <\/span>if<\/span> (<\/span>!<\/span>a<\/span> <\/span>||<\/span> <\/span>e<\/span>.<\/span>button<\/span> <\/span>!==<\/span> <\/span>0<\/span> <\/span>||<\/span> <\/span>e<\/span>.<\/span>ctrlKey<\/span> <\/span>||<\/span> <\/span>e<\/span>.<\/span>metaKey<\/span> <\/span>||<\/span> <\/span>e<\/span>.<\/span>shiftKey<\/span>) <\/span>return<\/span>;<\/span>\n      <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span>\n      <\/span>if<\/span> (<\/span>a<\/span>.<\/span>pathname<\/span> <\/span>!==<\/span> <\/span>location<\/span>.<\/span>pathname<\/span>) <\/span>history<\/span>.<\/span>pushState<\/span>({}, <\/span>\"\"<\/span>, <\/span>a<\/span>.<\/span>pathname<\/span>);<\/span>\n      <\/span>render<\/span>();<\/span>\n    });<\/span>\n    <\/span>window<\/span>.<\/span>addEventListener<\/span>(<\/span>\"popstate\"<\/span>, <\/span>render<\/span>);<\/span>\n    <\/span>render<\/span>();<\/span>\n  <\/<\/span>script<\/span>><\/span>\n<\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/code><\/pre>\n
      \u0427\u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435: \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u00ab\u041a\u0443\u0440\u0441 42\u00bb \u0430\u0434\u0440\u0435\u0441 \u0441\u0442\u0430\u043d\u0435\u0442 \/courses\/42<\/code>, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u043a\u043b\u0430\u0434\u043a\u0438 — \u00ab\u041a\u0443\u0440\u0441 42\u00bb, \u0430 \u0432 Network \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb \u0432\u0435\u0440\u043d\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d, Ctrl\/Cmd+\u043a\u043b\u0438\u043a \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443.<\/p>\n
      \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435: \u0441\u0441\u044b\u043b\u043a\u0438 — \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 <a href><\/code> (\u0438\u0445 \u0432\u0438\u0434\u044f\u0442 \u0440\u043e\u0431\u043e\u0442\u044b), \u0442\u0435\u043a\u0441\u0442 \u0438\u0434\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 textContent<\/code>, \u0430 \u043d\u0435 innerHTML<\/code> (\u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0430\u0434\u0440\u0435\u0441\u0430 \u043d\u0435 \u0441\u0442\u0430\u043d\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 — \u0437\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 XSS), document.title<\/code> \u0441\u0432\u043e\u0439 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n
      \u0413\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430: \u043d\u0443\u0436\u0435\u043d \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441 fallback, \u043e\u0442\u0434\u0430\u044e\u0449\u0438\u0439 index.html<\/code> \u043d\u0430 \u043f\u0443\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0427\u0435\u0440\u0435\u0437 file:\/\/<\/code> pushState<\/code> \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u0431\u0435\u0437 fallback \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \/courses\/42<\/code> \u0434\u0430\u0441\u0442 404. \u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, npx serve -s .<\/code> (\u0444\u043b\u0430\u0433 -s<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u0435\u0436\u0438\u043c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f).<\/p>\n
      \u0421\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0434\u0440\u0435\u0441\u0430 \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c: \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/h2>\n
      \u0412 \u0440\u043e\u0443\u0442\u0435\u0440\u0430\u0445 \u043f\u0443\u0442\u0438 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 \/courses\/:id<\/code>. \u041b\u043e\u0433\u0438\u043a\u0430 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 Node.js:<\/p>\n
      function<\/span> <\/span>compile<\/span>(<\/span>pattern<\/span>) {<\/span>\n  <\/span>const<\/span> <\/span>keys<\/span> <\/span>=<\/span> [];<\/span>\n  <\/span>const<\/span> <\/span>source<\/span> <\/span>=<\/span> <\/span>pattern<\/span>.<\/span>replace<\/span>(<\/span>\/:(\\w+)\/g<\/span>, (<\/span>_<\/span>, <\/span>key<\/span>) => {<\/span>\n    <\/span>keys<\/span>.<\/span>push<\/span>(<\/span>key<\/span>);<\/span>\n    <\/span>return<\/span> <\/span>\"([^\/]+)\"<\/span>;<\/span>\n  });<\/span>\n  <\/span>return<\/span> { <\/span>re<\/span>:<\/span> <\/span>new<\/span> <\/span>RegExp<\/span>(<\/span>\"^\"<\/span> <\/span>+<\/span> <\/span>source<\/span> <\/span>+<\/span> <\/span>\"$\"<\/span>), <\/span>keys<\/span> };<\/span>\n}<\/span>\n\nconst<\/span> <\/span>routes<\/span> <\/span>=<\/span> [<\/span>\n  { <\/span>pattern<\/span>:<\/span> <\/span>\"\/\"<\/span>, <\/span>name<\/span>:<\/span> <\/span>\"home\"<\/span> },<\/span>\n  { <\/span>pattern<\/span>:<\/span> <\/span>\"\/courses\"<\/span>, <\/span>name<\/span>:<\/span> <\/span>\"courseList\"<\/span> },<\/span>\n  { <\/span>pattern<\/span>:<\/span> <\/span>\"\/courses\/:id\"<\/span>, <\/span>name<\/span>:<\/span> <\/span>\"course\"<\/span> },<\/span>\n].<\/span>map<\/span>((<\/span>r<\/span>) => ({ ...<\/span>r<\/span>, ...<\/span>compile<\/span>(<\/span>r<\/span>.<\/span>pattern<\/span>) }));<\/span>\n\nfunction<\/span> <\/span>match<\/span>(<\/span>path<\/span>) {<\/span>\n  <\/span>for<\/span> (<\/span>const<\/span> <\/span>r<\/span> <\/span>of<\/span> <\/span>routes<\/span>) {<\/span>\n    <\/span>const<\/span> <\/span>m<\/span> <\/span>=<\/span> <\/span>path<\/span>.<\/span>match<\/span>(<\/span>r<\/span>.<\/span>re<\/span>);<\/span>\n    <\/span>if<\/span> (<\/span>m<\/span>) {<\/span>\n      <\/span>const<\/span> <\/span>params<\/span> <\/span>=<\/span> <\/span>Object<\/span>.<\/span>fromEntries<\/span>(<\/span>\n        <\/span>r<\/span>.<\/span>keys<\/span>.<\/span>map<\/span>((<\/span>k<\/span>, <\/span>i<\/span>) => [<\/span>k<\/span>, <\/span>decodeURIComponent<\/span>(<\/span>m<\/span>[<\/span>i<\/span> <\/span>+<\/span> <\/span>1<\/span>])])<\/span>\n      );<\/span>\n      <\/span>return<\/span> { <\/span>name<\/span>:<\/span> <\/span>r<\/span>.<\/span>name<\/span>, <\/span>params<\/span> };<\/span>\n    }<\/span>\n  }<\/span>\n  <\/span>return<\/span> { <\/span>name<\/span>:<\/span> <\/span>\"notFound\"<\/span>, <\/span>params<\/span>:<\/span> {} };<\/span>\n}<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>match<\/span>(<\/span>\"\/courses\/42\"<\/span>));<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>match<\/span>(<\/span>\"\/courses\"<\/span>));<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>match<\/span>(<\/span>\"\/courses\/42\/edit\"<\/span>));<\/span><\/code><\/pre>\n
      \u0412\u044b\u0432\u043e\u0434:<\/p>\n
      { name: 'course', params: { id: '42' } }\n{ name: 'courseList', params: {} }\n{ name: 'notFound', params: {} }\n<\/code><\/pre>\n
      \u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 — \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u044f\u043a\u043e\u0440\u0435\u0439 ^<\/code> \u0438 $<\/code>: \u0448\u0430\u0431\u043b\u043e\u043d \/<\/code> \u043d\u0430\u0439\u0434\u0435\u0442\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0443\u0442\u0438, \u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u00ab\u0441\u044a\u0435\u0441\u0442\u00bb \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435:<\/p>\n
      const<\/span> <\/span>loose<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>RegExp<\/span>(<\/span>\"\/\"<\/span>);<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>loose<\/span>.<\/span>test<\/span>(<\/span>\"\/courses\/42\"<\/span>)); <\/span>\/\/ true - \u043b\u044e\u0431\u043e\u0439 \u043f\u0443\u0442\u044c \u0441\u0442\u0430\u043d\u0435\u0442 \u0433\u043b\u0430\u0432\u043d\u043e\u0439<\/span>\nconst<\/span> <\/span>strict<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>RegExp<\/span>(<\/span>\"^\/$\"<\/span>);<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>strict<\/span>.<\/span>test<\/span>(<\/span>\"\/courses\/42\"<\/span>)); <\/span>\/\/ false - \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c \"\/\"<\/span><\/code><\/pre>\n
      \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u044f\u043a\u043e\u0440\u044f \u0432 compile<\/code>, \u043a\u0430\u043a \u0432 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435; \u0431\u0435\u0437 \u043d\u0438\u0445 \u0432\u0441\u0435 \u0442\u0440\u0438 \u0430\u0434\u0440\u0435\u0441\u0430 \u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u0431\u044b home<\/code>.<\/p>\n
      History API \u0438\u043b\u0438 hash-\u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h2>\n\n\n\n\n\n\n\n
      <\/th>\nHistory API (\/courses\/42<\/code>)<\/th>\nHash (\/#\/courses\/42<\/code>)<\/th>\n<\/tr>\n<\/thead>\n
      \u041d\u0443\u0436\u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/td>\n\u0434\u0430, fallback \u043d\u0430 index.html<\/code><\/td>\n\u043d\u0435\u0442, \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435 #<\/code> \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/td>\n<\/tr>\n
      \u0412\u0438\u0434 \u0430\u0434\u0440\u0435\u0441\u0430<\/td>\n\u043e\u0431\u044b\u0447\u043d\u044b\u0439<\/td>\n\u0441 #<\/code><\/td>\n<\/tr>\n
      \u0418\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u044f<\/td>\n\u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0443\u0442\u044c — \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 URL<\/td>\n#<\/code> \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Hash-\u0440\u0435\u0436\u0438\u043c \u0443\u043c\u0435\u0441\u0442\u0435\u043d \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u043f\u0430\u043d\u0435\u043b\u0435\u0439 \u0438 \u0434\u0435\u043c\u043e \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0434\u043b\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0431\u0435\u0440\u0443\u0442 History API.<\/p>\n
      SPA \u0438 SEO: \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0435\u0439<\/h2>\n
      Google \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 JavaScript: \u0440\u043e\u0431\u043e\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043a\u0430\u043d\u0438\u0440\u0443\u0435\u0442 HTML, \u0430 \u0440\u0435\u043d\u0434\u0435\u0440 \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0439\u0442\u0438 \u043f\u043e\u0437\u0436\u0435. \u042f\u043d\u0434\u0435\u043a\u0441 \u0442\u043e\u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 JS, \u043d\u043e \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043d\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u0412\u0435\u0431\u043c\u0430\u0441\u0442\u0435\u0440\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0434\u0435\u0436\u043d\u0435\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440, \u0430 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0430\u0436\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c HTML.<\/p>\n
      \u0427\u0442\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u044e SPA:
      \n— \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043a\u043b\u0438\u043a\u0430 \u0438\u043b\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 — \u0440\u043e\u0431\u043e\u0442 \u0438\u0445, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442;
      \n— \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043d\u0430 <div onclick><\/code> \u0432\u043c\u0435\u0441\u0442\u043e <a href><\/code> — \u0440\u043e\u0431\u043e\u0442\u0443 \u043d\u0435\u0447\u0435\u0433\u043e \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c;
      \n— \u043e\u0434\u0438\u043d <title><\/code> \u0438 description \u043d\u0430 \u0432\u0441\u0435 \u044d\u043a\u0440\u0430\u043d\u044b;
      \n— soft 404<\/strong>: fallback \u043e\u0442\u0434\u0430\u0435\u0442 index.html<\/code> \u0441 \u043a\u043e\u0434\u043e\u043c 200 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u0443\u0442\u044c, \u0438 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0430\u0434\u0440\u0435\u0441\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041b\u0435\u0447\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c — \u043a\u043e\u0434 404) \u0438\u043b\u0438 SSR\/SSG;
      \n— \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n
      \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0434\u043b\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432, \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 — SSR \u0438\u043b\u0438 SSG (Nuxt, Next.js, SvelteKit, Angular SSR), \u0434\u043b\u044f \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 \u0438 \u0430\u0434\u043c\u0438\u043d\u043a\u0438 \u0437\u0430 \u043b\u043e\u0433\u0438\u043d\u043e\u043c — \u043e\u0431\u044b\u0447\u043d\u044b\u0439 CSR, \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043c \u043d\u0435\u0447\u0435\u0433\u043e.<\/p>\n
      \u041f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b SPA — \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438<\/h2>\n\n\n\n\n\n\n\n\n
      \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/th>\n\u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0434\u0430<\/th>\n\u041a\u043e\u0433\u0434\u0430 \u043d\u0435\u0442<\/th>\n<\/tr>\n<\/thead>\n
      \u0411\u044b\u0441\u0442\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b<\/td>\n\u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435<\/td>\n\u0435\u0441\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0442\u044f\u043d\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043a\u0440\u0443\u043f\u043d\u044b\u0439 \u0447\u0430\u043d\u043a<\/td>\n<\/tr>\n
      \u041c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/td>\n\u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0430\u0435\u0442 JSON \u0432\u043c\u0435\u0441\u0442\u043e HTML<\/td>\n\u043f\u0440\u0438 SSR \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043d\u043e\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/td>\n<\/tr>\n
      \u0420\u0430\u0431\u043e\u0442\u0430 \u043e\u0444\u043b\u0430\u0439\u043d<\/td>\n\u0435\u0441\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d Service Worker \u0438 \u043a\u0435\u0448<\/td>\n\u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 SPA \u043e\u0444\u043b\u0430\u0439\u043d \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/td>\n<\/tr>\n
      \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d<\/td>\n\u0441 SSR\/SSG — \u0431\u044b\u0441\u0442\u0440\u043e<\/td>\n\u0447\u0438\u0441\u0442\u044b\u0439 CSR \u0436\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JS<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u041f\u0440\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c: SPA \u043d\u0435 \u00ab\u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430 \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e\u00bb, \u043d\u043e \u0432\u0435\u0441\u044c \u0435\u0435 \u043a\u043e\u0434 \u043f\u0443\u0431\u043b\u0438\u0447\u0435\u043d. \u0421\u0435\u043a\u0440\u0435\u0442\u044b \u0432 \u0431\u0430\u043d\u0434\u043b \u043d\u0435 \u043a\u043b\u0430\u0434\u0443\u0442, \u043f\u0440\u0430\u0432\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u0442\u043e\u043a\u0435\u043d \u0441\u0435\u0441\u0441\u0438\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442 \u0432 cookie \u0441 HttpOnly<\/code>, Secure<\/code>, SameSite<\/code>, \u0430 \u043d\u0435 \u0432 localStorage<\/code>. \u042d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u0435\u0440\u044b: \u043d\u0443\u0436\u043d\u044b \u0435\u0449\u0435 CSRF-\u0437\u0430\u0449\u0438\u0442\u0430, CSP \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n
      \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f SPA<\/h2>\n\n\n\n\n\n\n\n\n
      \u0417\u0430\u0434\u0430\u0447\u0430<\/th>\n\u0427\u0442\u043e \u0432\u0437\u044f\u0442\u044c<\/th>\n\u041a\u043e\u0433\u0434\u0430 \u0438\u043d\u0430\u0447\u0435<\/th>\n<\/tr>\n<\/thead>\n
      \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439 \u0432\u0445\u043e\u0434\u0430<\/td>\nVue + Vue Router, Nuxt \u0434\u043b\u044f SSR<\/td>\n\u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0443\u0436\u0435 React<\/td>\n<\/tr>\n
      \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u0440\u044b\u043d\u043e\u043a \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u0439<\/td>\nReact + React Router, Next.js \u0434\u043b\u044f SSR<\/td>\n\u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u00ab\u0432\u0441\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e\u00bb<\/td>\n<\/tr>\n
      \u041a\u0440\u0443\u043f\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439<\/td>\nAngular (\u0440\u043e\u0443\u0442\u0435\u0440, \u0444\u043e\u0440\u043c\u044b, DI \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438)<\/td>\n\u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u0435\u043d<\/td>\n<\/tr>\n
      \u041c\u0438\u043d\u0438\u043c\u0443\u043c \u043a\u043e\u0434\u0430 \u0432 \u0431\u0430\u043d\u0434\u043b\u0435<\/td>\nSvelte + SvelteKit<\/td>\n\u0435\u0441\u043b\u0438 \u0432\u0430\u0436\u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      React — \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430: \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0438 SSR \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043f\u043e\u0432\u0435\u0440\u0445; \u0443 Vue \u0438 Angular \u0440\u043e\u0443\u0442\u0435\u0440 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439.<\/p>\n
      \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h2>\n