[{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/lakpro.cz\/jak-se-pripravit-na-js-migraci\/#Article","mainEntityOfPage":"https:\/\/lakpro.cz\/jak-se-pripravit-na-js-migraci\/","headline":"Jak se p\u0159ipravit na JS migraci?","name":"Jak se p\u0159ipravit na JS migraci?","description":"Tady je hned n\u011bkolik krok\u016f, kter\u00e9 byste m\u011bli zv\u00e1\u017eit, kdy\u017e za\u010dnete migraci webov\u00fdch str\u00e1nek vytvo\u0159en\u00fdch se statickou HTML do r\u00e1mce JavaScriptu. \u00a0 B\u011bhem poklesu organick\u00e9ho … ","datePublished":"2026-05-04","dateModified":"2026-05-04","author":{"@type":"Person","@id":"https:\/\/lakpro.cz\/author\/#Person","name":"","url":"https:\/\/lakpro.cz\/author\/","identifier":1,"image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/29b4b7cf61bc7f4a3cff4e7146cbe3cb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/29b4b7cf61bc7f4a3cff4e7146cbe3cb?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"lakpro.cz","logo":{"@type":"ImageObject","@id":"\/logo.png","url":"\/logo.png","width":600,"height":60}},"url":"https:\/\/lakpro.cz\/jak-se-pripravit-na-js-migraci\/","about":["Technika"],"wordCount":3627,"articleBody":"Tady je hned n\u011bkolik krok\u016f, kter\u00e9 byste m\u011bli zv\u00e1\u017eit, kdy\u017e za\u010dnete migraci webov\u00fdch str\u00e1nek vytvo\u0159en\u00fdch se statickou HTML do r\u00e1mce JavaScriptu.\u00a0B\u011bhem poklesu organick\u00e9ho provozu o osmdes\u00e1t procent se ka\u017ed\u00e1 str\u00e1nka ocit\u00e1 ve zl\u00e9 no\u010dn\u00ed m\u016f\u0159e a byznysmeni sk\u00e1\u010dou z\u00a0oken. Nane\u0161t\u011bst\u00ed se tento a\u017e hororov\u00fd sc\u00e9n\u00e1\u0159 m\u016f\u017ee velmi lehce st\u00e1t realitou, pokud migrace va\u0161\u00ed webov\u00e9 str\u00e1nky sel\u017ee a je provedena \u0161patn\u011b \u2013 nam\u00edsto zlep\u0161en\u00ed st\u00e1vaj\u00edc\u00ed situace se v\u00e1m eventu\u00e1ln\u011b dostane jenom jedn\u00e9 velk\u00e9 katastrofy, ze kter\u00e9 se jen tak nevyman\u00edte a bude trvat dlouho, ne\u017e se v\u016fbec z\u00a0d\u00edry, kterou jste si vykopali (nebo v\u00e1m ji n\u011bkdo vykopal), dostanete.\u00a0Existuje spousta r\u016fzn\u00fdch typ\u016f a druh\u016f migrac\u00ed, jako je zm\u011bna, splynut\u00ed nebo rozd\u011blen\u00ed dom\u00e9n, redesign webov\u00e9 str\u00e1nky nebo p\u0159esunut\u00ed do \u00fapln\u011b nov\u00e9ho r\u00e1mce.\u00a0Trendy v\u00fdvoj\u00e1\u0159stv\u00ed webov\u00fdch str\u00e1nek n\u00e1m jasn\u011b ukazuj\u00ed, \u017ee pou\u017eit\u00ed JavaScriptu se st\u00e1v\u00e1 \u010d\u00edm d\u00e1l roz\u0161\u00ed\u0159en\u011bj\u0161\u00ed a b\u011bhem n\u011bkolika let se staly JAvasScriptov\u00e9 r\u00e1mce pro tvorbu webov\u00fdch str\u00e1nek v\u00edce a v\u00edce popul\u00e1rn\u00ed. V\u00a0budoucnosti m\u016f\u017eeme \u010dekat takov\u00e9 sc\u00e9n\u00e1\u0159e, kde v\u00edce a v\u00edce webov\u00fdch str\u00e1nek bude pou\u017e\u00edvat JavaScript a na statick\u00e9 HTML se \u00fapln\u011b zapomene.\u00a0V\u00a0tomto \u010dl\u00e1nku se v\u00e1m pokus\u00edme uk\u00e1zat n\u011bkolik krok\u016f, jak se vlastn\u011b p\u0159ipravit na migraci va\u0161\u00ed webov\u00e9 str\u00e1nky, kter\u00e1 je vytvo\u0159en\u00e1 se statickou HTML do r\u00e1mce JavaScriptu.\u00a0\tInternetov\u00e9 vyhled\u00e1va\u010de vs. JavaScriptGoogle je jedin\u00fdm internetov\u00fdm vyhled\u00e1va\u010dem, kter\u00fd je schopen prov\u00e9st JavaScript a vid\u011bt jist\u00e9 elementy jako je obsah nebo navigace, i kdy\u017e jsou poh\u00e1n\u011bny JAvaScriptem. Av\u0161ak i p\u0159esto zde existuj\u00ed dv\u011b v\u011bci, na kter\u00e9 si v\u017edycky budete muset d\u00e1vat pozor a budete si je muset pamatovat, pokud budete n\u011bkdy rozm\u00fd\u0161let zm\u011bnu \u010di migraci na JS r\u00e1mec.\u00a0P\u0159edn\u011b bychom m\u011bli zm\u00ednit, \u017ee Google pou\u017e\u00edv\u00e1 Chrome 41 pro vykreslov\u00e1n\u00ed str\u00e1nek. Tohle je asi t\u0159i roky star\u00fd prohl\u00ed\u017ee\u010d, kter\u00fd je\u0161t\u011b nepodporuje v\u0161echny modern\u00ed funkce pot\u0159ebn\u00e9 pro vykreslen\u00ed pokro\u010dil\u00fdch funkc\u00ed. I kdyby mohly vykreslit JV webov\u00e9 str\u00e1nky obecn\u011b, m\u016f\u017ee se st\u00e1t, \u017ee n\u011bkter\u00e9 d\u016fle\u017eit\u00e9 \u010d\u00e1sti z\u016fstanou neobjeven\u00e9 d\u00edky p\u0159\u00edli\u0161n\u00e9mu spol\u00e9h\u00e1n\u00ed se na technologii, kterou Google nedok\u00e1\u017ee n\u011bjak zpracovat.\u00a0Zadruh\u00e9 spou\u0161t\u011bn\u00ed JS je extr\u00e9mn\u011b t\u011b\u017ek\u00fd proces, dokonce tak t\u011b\u017ek\u00fd, \u017ee Google indexuje JS webov\u00e9 str\u00e1nky ve dvou r\u016fzn\u00fdch vln\u00e1ch. Prvn\u00ed vlna z\u00edsk\u00e1 samotn\u00e9 HTML, kter\u00e9 je n\u00e1sledn\u011b indexov\u00e1no. V\u00a0p\u0159\u00edpad\u011b webov\u00fdch str\u00e1nek b\u011b\u017e\u00edc\u00edch na JS je v\u00fdsledek prvn\u00ed vlny tak maxim\u00e1ln\u011b pr\u00e1zdn\u00e1 str\u00e1nka. B\u011bhem druh\u00e9 vlny, Google spust\u00ed JavaScript, aby mohli vid\u011bt dal\u0161\u00ed elementy na\u010dten\u00e9 JS. A\u017e pot\u00e9 jsou p\u0159ipraveni indexovat \u00fapln\u00fd obsah str\u00e1nky.\u00a0Kombinace t\u011bchto dvou element\u016f d\u011bl\u00e1 to, \u017ee pokud se rozhodnete zm\u011bnit va\u0161i st\u00e1vaj\u00edc\u00ed webovou str\u00e1nku a budete j\u00ed cht\u00edt migrovat do JS r\u00e1mce, mus\u00edte v\u017edycky zkontrolovat, jesti Google m\u016f\u017ee efektivn\u011b proch\u00e1zet a indexovat takovou va\u0161i novou str\u00e1nku.\u00a0\tDob\u0159e zvl\u00e1dnut\u00e1 migrace do r\u00e1mce JSSEO spole\u010dnostem se sice JS l\u00edbit nemus\u00ed, av\u0161ak to nic nem\u011bn\u00ed na tom, \u017ee jeho popularita bude neust\u00e1le r\u016fst. M\u011bli bychom se tedy po\u0159\u00e1dn\u011b p\u0159ipravit, jak jen m\u016f\u017eeme a implementovat tento modern\u00ed r\u00e1mec spr\u00e1vn\u011b.\u00a0N\u00ed\u017ee najdete informace, kter\u00e9 v\u00e1m pomohou navigovat se skrze cel\u00fd proces zm\u011bny st\u00e1vaj\u00edc\u00edho r\u00e1mce. Ur\u010dit\u011b v\u00e1m tady ned\u00e1v\u00e1me \u201eready-to-go\u201c \u0159e\u0161en\u00ed a n\u00e1vody, proto\u017ee va\u0161e situace m\u016f\u017ee b\u00fdt v\u00fdsledkem rozd\u00edln\u00fdch a naprosto jin\u00fdch faktor\u016f a ur\u010dit\u011b neexistuje na tyto p\u0159\u00edpady n\u011bjak\u00fd univerz\u00e1ln\u00ed n\u00e1vod. Ka\u017edop\u00e1dn\u011b bychom cht\u011bli zd\u016fraznit ty elementy, kter\u00fdm byste m\u011bli v\u011bnovat velkou pozornost.\u00a0\tNejd\u0159\u00edve pokryjeme z\u00e1klady standardn\u00ed migraceNem\u016f\u017eete po\u010d\u00edtat s\u00a0n\u011bjak\u00fdm z\u00e1zrakem, \u017ee Google pochop\u00ed zm\u011bny bez va\u0161\u00ed pomoci. Cel\u00fd proces migrace by m\u011bl b\u00fdt napl\u00e1novan\u00fd do nejmen\u0161\u00edho detailu.\u00a0Cht\u011bli bychom se zam\u011b\u0159it p\u0159edev\u0161\u00edm na migraci JS v\u00a0tomto \u010dl\u00e1nku, ale pokud budete cht\u00edt detailn\u011bj\u0161\u00ed pr\u016fvodce migrac\u00ed, Bastian Grimm ji\u017e toto t\u00e9ma dostate\u010dn\u011b pokryl.(John: Je tu spousta v\u011bc\u00ed, na kter\u00e9 si mus\u00edte d\u00e1t pozor, co se t\u00fd\u010de migrac\u00ed str\u00e1nek. Dali jste hodn\u011b \u010dasu do vytv\u00e1\u0159en\u00ed str\u00e1nky, tak mus\u00edte d\u00e1t hodn\u011b \u010dasu do migrace, abyste to v\u0161echno ud\u011blali spr\u00e1vn\u011b. St\u00e1hn\u011bte si tento \u00fa\u017easn\u00fd n\u00e1vod, vytiskn\u011bte si ho, ulo\u017ete si ho na potom, a ur\u010dit\u011b si d\u00e1vejte pozor na detaily.\u00a0\tMus\u00edte ch\u00e1pat va\u0161e pot\u0159eby, co se t\u00fd\u010de serv\u00edrov\u00e1n\u00ed obsahu pro GoogleS\u00a0t\u00edmto krokem byste m\u011bli b\u00fdt hotov\u00ed je\u0161t\u011b p\u0159edt\u00edm, ne\u017e ud\u011bl\u00e1te cokoliv jin\u00e9ho. Pot\u0159ebujete se rozhodnout, jak vlastn\u011b Google v\u00a0budoucnosti uvid\u00ed obsah na va\u0161\u00ed str\u00e1nce. M\u00e1te dv\u011b mo\u017enosti:\t\tVykreslov\u00e1n\u00ed na stran\u011b klienta: to znamen\u00e1, \u017ee budete naprosto spol\u00e9hat na Google ve vykreslov\u00e1n\u00ed. Ka\u017edop\u00e1dn\u011b, pokud se rozhodnete pro tuhle mo\u017enost, mus\u00edte tak\u00e9 vz\u00edt n\u011bjak\u00e1 rizika toho, \u017ee to nebude p\u0159\u00edli\u0161 efektivn\u00ed. Prvn\u00edm d\u016fle\u017eit\u00fdm n\u00e1sledkem tohoto \u0159e\u0161en\u00ed je odlo\u017een\u00e9 indexov\u00e1n\u00ed va\u0161eho obsahu kv\u016fli dv\u011bma vln\u00e1m indexov\u00e1n\u00ed, kter\u00e9 jsme zm\u00ednili v\u00fd\u0161e. Zadruh\u00e9, m\u016f\u017ee se st\u00e1t, \u017ee ne v\u0161echno bude fungovat tak, jak by m\u011blo, proto\u017ee Chrome 41 nepodporuje v\u0161echny modern\u00ed funkce. A kone\u010dn\u011b, ne v\u0161ak na posledn\u00edm m\u00edst\u011b, ne v\u0161echny internetov\u00e9 vyhled\u00e1va\u010de mohou spustit JavaScript, tak\u017ee va\u0161e JS webov\u00e1 str\u00e1nka se m\u016f\u017ee zd\u00e1t pr\u00e1zdn\u00e1 Bingu, Twitteru nebo Facebooku.\t\tVykreslov\u00e1n\u00ed ze strany serveru: toto \u0159e\u0161en\u00ed spol\u00e9h\u00e1 p\u0159edev\u0161\u00edm na vykreslov\u00e1n\u00ed n\u011bjak\u00fdm extern\u00edm mechanismem nebo dodate\u010dn\u00fdm mechanismem \/ komponentem, kter\u00fd bude odpov\u011bdn\u00fd za vykreslov\u00e1n\u00ed va\u0161\u00ed JS webov\u00e9 str\u00e1nky, vytv\u00e1\u0159en\u00edm statick\u00fdch sn\u00edmk\u016f a serv\u00edrov\u00e1n\u00edm je proch\u00e1ze\u010d\u016fm internetov\u00fdch vyhled\u00e1va\u010d\u016f. Na konferenci Google I\/O, Google ozn\u00e1mil, \u017ee nab\u00edzen\u00ed odd\u011blen\u00e9 verze va\u0161\u00ed str\u00e1nky proch\u00e1ze\u010d\u016fm je naprosto v\u00a0pohod\u011b. Tohle je tzv. dynamick\u00e9 vykreslov\u00e1n\u00ed, co\u017e znamen\u00e1, \u017ee nyn\u00ed m\u016f\u017eete detekovat agenta u\u017eivatele proch\u00e1ze\u010de a poslat mu serverem vykreslenou verzi. Toto \u0159e\u0161en\u00ed m\u00e1 ale tak\u00e9 n\u011bkolik nev\u00fdhod: vytvo\u0159en\u00ed a udr\u017eov\u00e1n\u00ed dal\u0161\u00ed infrastruktury, pravd\u011bpodobn\u00e9 zdr\u017een\u00ed, pokud bude velmi t\u011b\u017ek\u00e1 str\u00e1nka vykreslov\u00e1na na serveru nebo mo\u017en\u00e9 probl\u00e9my s\u00a0cachingem (GoogleBot m\u016f\u017ee dostat ne-\u010derstvou verzi va\u0161\u00ed str\u00e1nky).\u00a0Pokud bude \u00fasp\u011bch va\u0161eho podnik\u00e1n\u00ed postaven okolo \u010derstv\u00e9ho obsahu (novinky, zpr\u00e1vy, reality, nab\u00eddky, kup\u00f3ny), nem\u016f\u017eeme si p\u0159edstavit, \u017ee byste se spol\u00e9hali jenom na verze vykreslen\u00e9 na stran\u011b klienta. M\u016f\u017ee to vy\u00fastit ve velmi dramatick\u00e9 zdr\u017een\u00ed v\u00a0indexov\u00e1n\u00ed, tak\u017ee va\u0161i konkurenti mohou z\u00edskat v\u00fdhodu na trhu.\u00a0Pokud ale m\u00e1te malou webovou str\u00e1nku a obsah na n\u00ed nen\u00ed aktualizov\u00e1n tak \u010dasto, m\u016f\u017eete to zkusit nechat na vykreslen\u00ed na stran\u011b klienta, ale m\u011bli byste to otestovat je\u0161t\u011b p\u0159edt\u00edm, ne\u017e spust\u00edte str\u00e1nku, jestli Google skute\u010dn\u011b vid\u00ed obsah a navigaci. Neju\u017eite\u010dn\u011bj\u0161\u00edm n\u00e1strojem pro takov\u00e9 testov\u00e1n\u00ed je Fetch jako Google v\u00a0Google Search Console nebo tak\u00e9 Chrome 41 prohl\u00ed\u017ee\u010d.\u00a0Ale Google ofici\u00e1ln\u011b ozn\u00e1mil, \u017ee je lep\u0161\u00ed pou\u017e\u00edvat dynamick\u00e9 vykreslov\u00e1n\u00ed, abyste se ujistili, \u017ee objev\u00ed neust\u00e1le nebo \u010dasto se m\u011bn\u00edc\u00ed obsah spr\u00e1vn\u011b a rychle.\u00a0\tR\u00e1mec vs. \u0159e\u0161en\u00edPokud va\u0161e volba byla pou\u017eit\u00ed dynamick\u00e9ho vykreslov\u00e1n\u00ed, je \u010das na to odpov\u011bd\u011bt na ot\u00e1zku, jak vlastn\u011b bude obsah nab\u00edzen proch\u00e1ze\u010d\u016fm. Na tohle nen\u00ed \u017e\u00e1dn\u00e1 univerz\u00e1ln\u00ed odpov\u011b\u010f. Obecn\u011b \u0159e\u0161en\u00ed spol\u00e9h\u00e1 na technologii A v\u00fdvoj\u00e1\u0159e A rozpo\u010det A tak\u00e9 va\u0161e pot\u0159eby.\u00a0N\u00ed\u017ee najdete recenzi n\u011bkter\u00fdch mo\u017enost\u00ed, kter\u00e9 jsou dostupn\u00e9 hned z\u00a0n\u011bkolika r\u016fzn\u00fdch p\u0159\u00edstup\u016f k\u00a0nim, ale volba je st\u00e1le jenom na v\u00e1s:\t\tPot\u0159ebuji to nejjednodu\u0161\u0161\u00ed \u0159e\u0161en\u00ed, co to jdePravd\u011bpodobn\u011b bychom \u0161li do pre-vykreslov\u00e1n\u00ed, nap\u0159\u00edklad s\u00a0prerender.io. Je to extern\u00ed za\u0159\u00edzen\u00ed, kter\u00e9 projde va\u0161\u00ed str\u00e1nku, vykresl\u00ed va\u0161e str\u00e1nky a vytvo\u0159\u00ed statick\u00e9 sn\u00edmky, kter\u00e9 pot\u00e9 nab\u00eddne, pokud si o to n\u011bjak\u00fd proch\u00e1ze\u010d za\u017e\u00e1d\u00e1. Velkou v\u00fdhodou tohoto \u0159e\u0161en\u00ed je ten fakt, \u017ee nepot\u0159ebujete vytv\u00e1\u0159et va\u0161i vlastn\u00ed infrastrukturu.\u00a0M\u016f\u017eete si dokonce napl\u00e1novat op\u011btovn\u00e9 proch\u00e1zen\u00ed a vytvo\u0159it \u010derstv\u00e9 sn\u00edmky va\u0161\u00ed str\u00e1nky. Ale pro v\u011bt\u0161\u00ed a \u010dast\u011bji m\u011bn\u00edc\u00ed se str\u00e1nky to m\u016f\u017ee b\u00fdt zna\u010dn\u011b t\u011b\u017e\u0161\u00ed, abyste se ujistili, \u017ee v\u0161echny str\u00e1nky jsou skute\u010dn\u011b na\u010dteny na \u010das a ukazuj\u00ed p\u0159esn\u011b ten sam\u00fd obsah jak pro GOogleBota, tak pro u\u017eivatele.\u00a0\t\tPot\u0159ebuji univerz\u00e1ln\u00ed \u0159e\u0161en\u00ed a chci n\u00e1sledovat trendyPokud tvo\u0159\u00edte str\u00e1nku s\u00a0n\u011bjak\u00fdm popul\u00e1rn\u00edm r\u00e1mcem jako je React, Vue, Angular, m\u016f\u017eete pou\u017e\u00edt tak\u00e9 jednu z\u00a0metod vykreslov\u00e1n\u00ed na stran\u011b serveru, kter\u00e1 je dedikovan\u00e1 dan\u00e9mu r\u00e1mci. Tady je hned n\u011bkolik popul\u00e1rn\u00edch shod:\t\tAngular Universal je \u0159e\u0161en\u00ed pro Angular\t\tNuxt.js jde dob\u0159e s\u00a0Vue.js\t\tReact je podporov\u00e1n Next.js\u00a0Pou\u017eiv\u00e1n\u00edm jednoho z\u00a0t\u011bchto r\u00e1mc\u016f instalovan\u00fdch navrch na React or Vue bude ve v\u00fdsledku vytv\u00e1\u0159et univerz\u00e1ln\u00ed aplikace, co\u017e znamen\u00e1, \u017ee ur\u010dit\u00fd k\u00f3d bude proveden jak na serveru (vykreslov\u00e1n\u00ed na stran\u011b serveru) a tak\u00e9 na stran\u011b klienta (vykreslov\u00e1n\u00ed na stran\u011b klienta). Minimalizuje to probl\u00e9m s\u00a0chyb\u011bj\u00edc\u00edm obsahem, kter\u00fd byste mohli m\u00edt, pokud byste se spol\u00e9hali na vytv\u00e1\u0159en\u00ed sn\u00edmk\u016f a t\u011b\u017ek\u00e9m cachingu, tak jako to je s\u00a0pre-vykreslov\u00e1n\u00edm.\u00a0\t\tPot\u0159ebuji univerz\u00e1ln\u00ed \u0159e\u0161en\u00ed a nechci pou\u017e\u00edvat \u017e\u00e1dn\u00e9 popul\u00e1rn\u00ed r\u00e1mce\u00a0M\u016f\u017ee se st\u00e1t, \u017ee chcete pou\u017e\u00edvat r\u00e1mec, kter\u00fd je\u0161t\u011b nem\u00e1 ready-to-use \u0159e\u0161en\u00ed pro vytv\u00e1\u0159en\u00ed univerz\u00e1ln\u00ed aplikace. V\u00a0tomto p\u0159\u00edpad\u011b m\u016f\u017eete j\u00edt budovat va\u0161i infrastrukturu pro vykreslov\u00e1n\u00ed. Co\u017e znamen\u00e1, \u017ee m\u016f\u017eete instalovat headless prohl\u00ed\u017ee\u010d na va\u0161em serveru, kter\u00fd bude vykreslovat v\u0161echny substr\u00e1nky na va\u0161\u00ed webov\u00e9 str\u00e1nce a vytv\u00e1\u0159et sn\u00edmky, kter\u00e9 budou nab\u00edzeny proch\u00e1ze\u010d\u016fm internetov\u00fdch vyhled\u00e1va\u010d\u016f. Google poskytuje dokonce i \u0159e\u0161en\u00ed \u2013 Puppeteer je knihovna, kter\u00e1 m\u00e1 podobnou funkci jako prender.io. Ale v\u0161echno se d\u011bje na va\u0161\u00ed infrastruktu\u0159e.\u00a0\t\tChci dlouhotrvaj\u00edc\u00ed \u0159e\u0161en\u00edPro tento p\u0159\u00edstup bychom pou\u017eili hybridn\u00ed vykreslov\u00e1n\u00ed. Je zn\u00e1mo, \u017ee toto \u0159e\u0161en\u00ed poskytuje nejlep\u0161\u00ed zku\u0161enost jak pro u\u017eivatele, tak pro proch\u00e1ze\u010de, proto\u017ee oba dva dost\u00e1vaj\u00ed vykreslenou verzi str\u00e1nky na stran\u011b serveru hned na prvn\u00ed po\u017e\u00e1d\u00e1n\u00ed. Ve spoust\u011b p\u0159\u00edpad\u016f, nab\u00edzen\u00ed SSR str\u00e1nky je rychlej\u0161\u00ed pro u\u017eivatele, ne\u017e spou\u0161t\u011bn\u00ed v\u0161ech t\u011b\u017ek\u00fdch soubor\u016f v\u00a0prohl\u00ed\u017ee\u010di. A v\u0161echny n\u00e1sleduj\u00edc\u00ed interakce u\u017eivatele jsou v\u00a0r\u00e1mci JavaScriptu. Proch\u00e1ze\u010de nijak neinteraguj\u00ed s\u00a0webovou str\u00e1nkou klik\u00e1n\u00edm nebo posouv\u00e1n\u00edm kole\u010dkem my\u0161i, tak\u017ee to bude v\u017edycky nov\u00fd po\u017eadavek pro server a oni v\u017edycky dostanou SSR verzi. Zn\u00ed to dob\u0159e, ale nen\u00ed to tak \u00fapln\u011b lehk\u00e9 na implementaci.Tato mo\u017enost, kterou byste si mohli zvolit, z\u00e1le\u017e\u00ed na spoust\u011b faktor\u016f, jako je technologie, v\u00fdvoj\u00e1\u0159i a tak\u00e9 rozpo\u010det. V\u00a0n\u011bkter\u00fdch p\u0159\u00edpadech m\u016f\u017eete m\u00edt je\u0161t\u011b m\u00e9n\u011b mo\u017enost\u00ed, ale zase na druhou stranu, pro v\u011bt\u0161inu p\u0159\u00edpad\u016f plat\u00ed, \u017ee m\u016f\u017eete m\u00edt spoustu omezen\u00ed, tak\u017ee vybr\u00e1n\u00ed \u0159e\u0161en\u00ed m\u016f\u017ee b\u00fdt jednoduch\u00e9, nebo\u0165 v\u00e1m zbyde jenom jedin\u00e1 mo\u017enost.\u00a0\tTestov\u00e1n\u00ed implementaceNeum\u00edme si p\u0159edstavit migraci, ani\u017e bychom vytvo\u0159ili n\u011bjak\u00e9 fale\u0161n\u00e9 prost\u0159ed\u00ed a otestovali, jak se v\u0161echno poda\u0159\u00ed. Migrace do JavaScriptu p\u0159id\u00e1v\u00e1 tro\u0161ku v\u00edce komplexnosti a dal\u0161\u00ed pasti, na kter\u00e9 si mus\u00edte d\u00e1vat pozor.\u00a0Jsou zde pouze dva sc\u00e9n\u00e1\u0159e. Pokud jste se z\u00a0n\u011bjak\u00e9ho d\u016fvodu rozhodli spol\u00e9hat se na vykreslov\u00e1n\u00ed na stran\u011b klienta, pot\u0159ebujete si nainstalovat Chrome 41 a zkontrolovat, jak vykresluje a pracuje. Snad nejd\u016fle\u017eit\u011bj\u0161\u00ed krok v\u016fbec je audit kontroly chyb v\u00a0konzoli v\u00a0Chrome Dev tools. Zapamatujte si, \u017ee i mal\u00e1 chybka m\u016f\u017ee v\u00a0procesu JavaScriptu zp\u016fsobit po\u0159\u00e1dn\u00fd probl\u00e9m s\u00a0vykreslen\u00edm.\u00a0Pokud jste se rozhodli pou\u017e\u00edt jednu z\u00a0metod nab\u00edzen\u00ed obsahu proch\u00e1ze\u010di, budete pot\u0159ebovat n\u011bjakou cvi\u010dnou str\u00e1nku, kde je toto \u0159e\u0161en\u00ed nainstalov\u00e1no. N\u00ed\u017ee jsme v\u00e1m podtrhli hned n\u011bkolik d\u016fle\u017eit\u00fdch element\u016f, kter\u00e9 by m\u011bly b\u00fdt v\u017edy zkontrolov\u00e1ny je\u0161t\u011b p\u0159edt\u00edm, ne\u017e se na v\u0161echno pust\u00edte na\u017eivo.\u00a0\t\tParita obsahuM\u011bli byste v\u017edycky zkontrolovat, jestli u\u017eivatel\u00e9 a proch\u00e1ze\u010di vid\u00ed p\u0159esn\u011b ten sam\u00fd obsah. Abyste tak u\u010dinili, pot\u0159ebujete zm\u011bnit agenta u\u017eivatele v\u00a0prohl\u00ed\u017ee\u010di, abyste mohli vid\u011bt verzi, kter\u00e1 je pos\u00edlan\u00e1 proch\u00e1ze\u010d\u016fm. M\u011bli byste tak\u00e9 ov\u011b\u0159it obecn\u00e9 nerovnom\u011brnosti, kter\u00e9 se t\u00fdkaj\u00ed vykreslov\u00e1n\u00ed. Ale abyste mohli vid\u011bt cel\u00fd obr\u00e1zek, budete tak\u00e9 pot\u0159ebovat zkontrolovat DOM (Document Object Model) va\u0161\u00ed webov\u00e9 str\u00e1nky. Zkop\u00edrujte zdrojov\u00fd k\u00f3d z\u00a0va\u0161eho prohl\u00ed\u017ee\u010de, zm\u011b\u0148te User Agent na GoogleBota a vezm\u011bte taky zdrojov\u00fd k\u00f3d. Diffchecker v\u00e1m pom\u016f\u017ee vid\u011bt n\u011bkter\u00e9 rozd\u00edly mezi t\u011bmito dv\u011bma soubory. M\u011bli byste se zvl\u00e1\u0161t\u011b d\u00edvat na r\u016fzn\u00e9 rozd\u00edly v\u00a0obsahu, navigaci a metadatech.\u00a0Extr\u00e9mn\u00ed situace je takov\u00e1, kdy v\u00e1m n\u011bkdo po\u0161le pr\u00e1zdnou HTML slo\u017eku do GoogleBota, stejn\u011b jako Disqus.\u00a0\t\tNavigace a hyperodkazyAbyste si byli stoprocentn\u011b jisti, \u017ee Google vid\u00ed, proch\u00e1z\u00ed a p\u0159ed\u00e1v\u00e1 \u0161\u0165\u00e1vu z\u00a0odkaz\u016f, m\u011bli byste n\u00e1sledovat jasn\u00e9 doporu\u010den\u00ed implementace vnit\u0159n\u00edch odkaz\u016f, kter\u00e9 byly se v\u0161emi sd\u00edlen\u00e9 na Google I\/O konferenci v\u00a0roce 2018.\u00a0Pokud spol\u00e9h\u00e1te na vykreslov\u00e1n\u00ed na stran\u011b serveru a jeho metody, pot\u0159ebujete zkontrolovat, jestli HTML vykreslen\u00e9 verze str\u00e1nky obsahuje v\u0161echny odkazy, kter\u00e9 byste tam \u010dekali. Jin\u00fdmi slovy, pokud m\u00e1 tu samou navigaci jako va\u0161e verze vykreslen\u00e1 na stran\u011b klienta. Jinak Google neuvid\u00ed intern\u00ed odkazy mezi jednotliv\u00fdmi str\u00e1nkami. Kritick\u00e9 oblasti mohou m\u00edt probl\u00e9my jako je facet navigace, paginace a hlavn\u00ed menu.\u00a0\t\tMetadataMetadata by nem\u011bla b\u00fdt p\u0159\u00edli\u0161 z\u00e1visl\u00e1 na JS. Google zd\u016fraznil, \u017ee pokud na\u010dtete kanonick\u00fd tag s\u00a0JAvaScriptem, tak pravd\u011bpodobn\u011b neuvid\u00ed tento tag ve sv\u00e9 prvn\u00ed vln\u011b indexov\u00e1n\u00ed a ur\u010dit\u011b to nebudou podruh\u00e9 kontrolovat v\u00a0druh\u00e9 vln\u011b. V\u00fdsledkem m\u016f\u017ee b\u00fdt to, \u017ee kanonick\u00e9 sign\u00e1ly mohou b\u00fdt \u00fapln\u011b ignorov\u00e1ny.\u00a0Zat\u00edmco testujete na pokusn\u00e9 str\u00e1nce, v\u017edycky zkontrolujte, jestli m\u00e1 SSR verze kanonick\u00fd tag v\u00a0p\u0159edn\u00ed sekci. Pokud ano, tak potvr\u010fte kanonick\u00fd tag jako ten spr\u00e1vn\u00fd. Pravidlo palce neust\u00e1le pos\u00edl\u00e1 konzistentn\u00ed sign\u00e1ly internetov\u00fdm prohl\u00ed\u017ee\u010d\u016fm, a\u0165 u\u017e pou\u017e\u00edv\u00e1te klientsk\u00e9 \u010di serverov\u00e9 vykreslov\u00e1n\u00ed.\u00a0Zat\u00edmco kontrolujete webovou str\u00e1nku, v\u017edycky ov\u011b\u0159ujte, jestli CSR i SSR verze maj\u00ed ty sam\u00e9 tituly, popisky a instrukce pro robota.\u00a0\t\tStrukturovan\u00e1 dataStrukturovan\u00e1 data pom\u00e1haj\u00ed internetov\u00fdm vyhled\u00e1va\u010d\u016fm l\u00e9pe pochopit obsah va\u0161\u00ed str\u00e1nky.\u00a0Je\u0161t\u011b p\u0159edt\u00edm, ne\u017e spust\u00edt\u011b novou str\u00e1nku, ujist\u011bte se, \u017ee SSR verze va\u0161\u00ed webov\u00e9 str\u00e1nky zobrazuje v\u0161echny elementy, kter\u00e9 chcete ozna\u010dit jako strukturovan\u00e1 data a pokud jsou markupy zahrnuty v\u00a0pre-vykreslovac\u00ed verzi. Nap\u0159\u00edklad pokud chcete p\u0159idat markupy do drobe\u010dkov\u00e9 navigace. V\u00a0prvn\u00edm kroce zkontrolujte, \u017ee jsou drobe\u010dky zobrazeny v\u00a0SSR verzi. Ve druh\u00e9m kroce spus\u0165te test v\u00a0Rich Results Testeru, abyste vid\u011bli, jestli jsou markupy spr\u00e1vn\u00e9.\u00a0\t\tL\u00edn\u00e9 na\u010d\u00edt\u00e1n\u00ed Na\u0161e pozorov\u00e1n\u00ed ukazuj\u00ed, \u017ee modern\u00ed str\u00e1nky miluj\u00ed na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f a obsahu (produkt\u016f) s\u00a0l\u00edn\u00fdm na\u010d\u00edt\u00e1n\u00edm. P\u0159\u00eddavn\u00fdm elementem jsou \u201ena\u010dteny p\u0159i zobrazen\u00ed na displeji\u201c. Mo\u017en\u00e1 to m\u016f\u017ee b\u00fdt velmi p\u011bkn\u00e1 funkce pro u\u017eivatele, pro GOogleBota, kter\u00e1 ale neum\u00ed zrovna posouvat kole\u010dko my\u0161i, to zrovna sranda nen\u00ed, tak\u017ee jako n\u00e1sledek toho tyto jednotliv\u00e9 v\u011bci nebudou objeveny.\u00a0Vid\u00edme, \u017ee spousta spr\u00e1vc\u016f webu m\u00e1 probl\u00e9my s\u00a0l\u00edn\u00fdm na\u010d\u00edt\u00e1n\u00edm v\u00a0docela SEO-p\u0159\u00e1telsk\u00e9m zp\u016fsobu, proto Google publikoval n\u00e1vod pro ty nejlep\u0161\u00ed praktiky l\u00edn\u00e9ho na\u010d\u00edt\u00e1n\u00ed. Pokud chcete na\u010d\u00edtat obr\u00e1zky, zat\u00edmco posouv\u00e1te str\u00e1nku kole\u010dkem my\u0161i, ujist\u011bte se, \u017ee podporujete paginovan\u00e9 na\u010d\u00edt\u00e1n\u00ed. To znamen\u00e1, \u017ee v\u017edycky kdy\u017e posunete str\u00e1nku dol\u016f, URL by se m\u011bla zm\u011bnit (nap\u0159\u00edklad p\u0159id\u00e1n\u00edm pagina\u010dn\u00edch identifik\u00e1tor\u016f: ?page=2, ?page=3 atd.) a co je nejd\u016fle\u017eit\u011bj\u0161\u00ed, URL by se m\u011bla aktualizovat se spr\u00e1vn\u00fdm obsahem, nap\u0159\u00edklad za pou\u017eit\u00ed Historie API.\u00a0Ur\u010dit\u011b nezapome\u0148te p\u0159idat rel=\u201cnext\u201c markupy do \u010deln\u00ed sekce, abyste indikovali sekvenci str\u00e1nek.\u00a0\tSn\u00edmkov\u00e1 generace a nastaven\u00ed cachePokud jste se rozhodli vytv\u00e1\u0159et sn\u00edmky pro proch\u00e1ze\u010de internetov\u00fdch vyhled\u00e1va\u010d\u016f, pot\u0159ebujete monitorovat dal\u0161\u00ed v\u011bci.\u00a0Mus\u00edte v\u017edycky kontrolovat, jestli sn\u00edmek je p\u0159esnou kopi\u00ed klientsky vykreslen\u00e9 verze str\u00e1nky. Nem\u016f\u017eete na\u010d\u00edtat dal\u0161\u00ed obsah nebo odkazy, kter\u00e9 nejsou viditeln\u00e9 standartn\u00edmu u\u017eivateli, proto\u017ee by to mohlo b\u00fdt pova\u017eov\u00e1no za cloaking. Pokud proces vytv\u00e1\u0159en\u00ed sn\u00edmk\u016f nen\u00ed efektivn\u00ed, nap\u0159\u00edklad va\u0161e str\u00e1nky jsou velmi t\u011b\u017ek\u00e9 a v\u00e1\u0161 server nen\u00ed tak rychl\u00fd, m\u016f\u017ee to vy\u00fastit ve tvorbu \u0161patn\u00fdch sn\u00edmk\u016f. A jako v\u00fdsledek budete d\u00e1vat proch\u00e1ze\u010d\u016fm \u010d\u00e1ste\u010dn\u011b vykreslen\u00e9 str\u00e1nky.\u00a0Existuj\u00ed n\u011bkter\u00e9 situace, kde vykreslovac\u00ed infrastruktura mus\u00ed fungovat ve vysok\u00e9 rychlosti, jako je Black Friday, kdy chcete aktualizovat ceny velmi rychle. M\u011bli byste testovat vykreslen\u00ed v\u00a0extr\u00e9mn\u00edch podm\u00ednk\u00e1ch, kde byste m\u011bli vid\u011bt, kolik \u010dasu zabere aktualizace ur\u010dit\u00e9ho \u010d\u00edsla str\u00e1nek.\u00a0Posledn\u00ed v\u011bc\u00ed je caching. Nastaven\u00ed cache spr\u00e1vn\u011b je n\u011bco, co v\u00e1m m\u016f\u017ee pomoci udr\u017eet efektivitu, proto\u017ee spousta str\u00e1nek m\u016f\u017ee b\u00fdt rychle nab\u00edzena p\u0159\u00edmo z\u00a0pam\u011bti. Ale pokud nepl\u00e1nujete caching spr\u00e1vn\u011b, Google m\u016f\u017ee dost\u00e1vat ust\u00e1len\u00fd obsah.\u00a0\tMonitorov\u00e1n\u00edPozorov\u00e1n\u00ed post-migrace je pouze p\u0159irozen\u00fd krok. Ale v\u00a0n\u011bkter\u00fdch p\u0159\u00edpadech migrac\u00ed na JS r\u00e1mec se m\u016f\u017ee p\u0159i samotn\u00e9 migraci objevit v\u011bc, kterou bychom m\u011bli pozorovat a optimalizovat.\u00a0P\u0159esun na JS r\u00e1mec m\u016f\u017ee ovlivnit v\u00fdkon webov\u00e9 str\u00e1nky. Ve spoust\u011b p\u0159\u00edpad\u016f datov\u00e9 \u010d\u00e1sti nar\u016fstaj\u00ed, co\u017e m\u016f\u017ee vy\u00fastit v\u00a0daleko del\u0161\u00ed dobu na\u010d\u00edt\u00e1n\u00ed, hlavn\u011b pro mobiln\u00ed u\u017eivatele. Velmi dobr\u00fdm zp\u016fsobem je monitorov\u00e1n\u00ed toho, jak va\u0161i u\u017eivatele vn\u00edmaj\u00ed v\u00fdkon va\u0161\u00ed str\u00e1nky a porovn\u00e1v\u00e1n\u00ed t\u011bchto dat p\u0159ed a po migraci. Abyste tak u\u010dinili, pou\u017e\u00edvejte Chrome User Experience Report.Poskytne v\u00e1m to informaci, jestli se metrika skute\u010dn\u00e9ho u\u017eivatele n\u011bjak zm\u011bnila za ur\u010dit\u00fd \u010dasov\u00fd \u00fasek. M\u011bli byste v\u017edycky m\u00ed\u0159it k\u00a0vylep\u0161en\u00ed a na\u010d\u00edt\u00e1n\u00ed str\u00e1nky jak jen to nejrychleji p\u016fjde.\u00a0\tZ\u00e1v\u011brMigrace jsou v\u017edycky riskantn\u00ed proces a nikdy si nem\u016f\u017eete b\u00fdt jisti v\u00fdsledky. Rizika mohou b\u00fdt alespo\u0148 zm\u00edrn\u011bna t\u00edm, \u017ee budete pl\u00e1novat v\u0161echno dop\u0159edu a velmi detailn\u011b. V\u00a0p\u0159\u00edpad\u011b v\u0161ech typ\u016f migrac\u00ed, pl\u00e1nov\u00e1n\u00ed je stejn\u011b tak d\u016fle\u017eit\u00e9 jako samotn\u00e9 proveden\u00ed. Pokud hrajete n\u011bjakou roli v\u00a0migraci na JS r\u00e1mec, pot\u0159ebujete se zab\u00fdvat je\u0161t\u011b dal\u0161\u00ed komplexnost\u00ed. Mus\u00edte d\u011blat v\u00edce rozhodnut\u00ed a mus\u00edte ov\u011b\u0159ovat daleko v\u00edce v\u011bc\u00ed. Ale jak trendy v\u00fdvoje str\u00e1nek m\u00ed\u0159\u00ed k\u00a0samotn\u00e9mu u\u017e\u00edv\u00e1n\u00ed JAvaScriptu v\u00edce a v\u00edce, m\u011bli byste b\u00fdt d\u0159\u00edve nebo pozd\u011bji p\u0159ipraveni na to, \u017ee budete muset \u010delit JS Migraci. Tak hodn\u011b \u0161t\u011bst\u00ed!                                                                                                                                                                                                                                                                                                                                                                                                "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Jak se p\u0159ipravit na JS migraci?","item":"https:\/\/lakpro.cz\/jak-se-pripravit-na-js-migraci\/#breadcrumbitem"}]}]