[{"data":1,"prerenderedAt":744},["ShallowReactive",2],{"i-ic:outline-arrow-upward":3,"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E":8,"\u002Farticles\u002Fnext-js-13-pages":16,"i-material-symbols:home":730,"i-material-symbols:ios-share":732,"Brand_bAcjTzQpW6OVpFK319jfMki97vH1GrZiqHmeI7Xg4o":734,"ArticleDetails_y4cMi6A76NdrebQGs1ehn2ZdnfPiyH8a3Mvtkrorc7s":739},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"\u002F>",["Island",9],{"key":10,"result":11},"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E",{"head":12},{"style":13},[14],{"innerHTML":15},":where(.i-mdi\\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'\u002F%3E%3C\u002Fsvg%3E\")}",{"id":17,"title":18,"author":19,"body":22,"description":722,"extension":723,"meta":724,"navigation":236,"path":725,"publicationDate":726,"seo":727,"stem":728,"__hash__":729},"articles\u002Farticles\u002Fnext-js-13-pages.md","Next.js 13, pourquoi il était nécessaire d'évoluer (2\u002F3)",{"name":20,"url":21},"@patrickfaramaz ","https:\u002F\u002Ftwitter.com\u002Fpatrickfaramaz",{"type":23,"value":24,"toc":711},"minimark",[25,50,65,68,77,82,86,108,117,122,127,131,140,143,162,165,168,172,175,178,183,194,364,367,375,379,389,592,595,598,601,604,613,621,627,633,637,652,656,666,673,676,682,685,692,707],[26,27,29,33],"info",{"type":28},"warning",[30,31,32],"p",{},"Cet article fait partie d'une série de 3 articles :",[34,35,36,44],"ul",{},[37,38,39],"li",{},[40,41,43],"a",{"href":42},"\u002Farticles\u002Fnext-js-13-intro\u002F","Next.js 13, introduction (1\u002F3)",[37,45,46],{},[40,47,49],{"href":48},"\u002Farticles\u002Fnext-js-13-app\u002F","Next.js 13, on fait le point de la nouvelle structure \"app\" (3\u002F3)",[30,51,52,53,57,58,61,62,64],{},"Dans ce premier article, nous allons refaire le point sur la façon que je nommerai ",[54,55,56],"strong",{},"\"classique\""," de construire des applications depuis quelques versions avec ",[54,59,60],{},"Next.js",".\nEnsemble, nous allons revoir le fonctionnement de la structure \"pages\" dans ",[54,63,60],{}," et ensuite dévoiler quelques points bloquants sur cette version.",[30,66,67],{},"Une vidéo est liée à cet article, disponible ci-dessous.",[69,70,72,73],"h2",{"id":71},"nextjs-13-pourquoi-il-était-nécessaire-dévoluer-12","Next.js 13, pourquoi il était nécessaire d'évoluer ! ",[74,75,76],"span",{},"1\u002F2",[78,79],"video-player",{"videoLink":80,"videoTitle":81},"btOxeMg9gqY","Next.js 13, pourquoi il était nécessaire d'évoluer ! [1\u002F2]",[69,83,85],{"id":84},"bref-historique","Bref historique",[30,87,88,89,92,93,96,97,100,101,107],{},"Pour rappel, ",[54,90,91],{},"getStaticProps",", ",[54,94,95],{},"getStaticPath"," et la notion ",[54,98,99],{},"d'hybride"," ont été introduits sur la version ",[40,102,106],{"href":103,"rel":104},"https:\u002F\u002Fnextjs.org\u002Fblog\u002Fnext-9-3",[105],"nofollow","9.3"," de Next.js le 9 mars 2020.",[30,109,110,111,116],{},"S'en sont suivies, plusieurs évolutions sur le mode statique hybride dont la dernière grosse feature (sur la ",[40,112,115],{"href":113,"rel":114},"https:\u002F\u002Fnextjs.org\u002Fblog\u002Fnext-12-2#on-demand-incremental-static-regeneration-stable",[105],"12.2",") :",[34,118,119],{},[37,120,121],{},"la possibilité d'invalider une url pour forcer la régénération de la page sans redéployer toute l'application. Pour les grosses applications, c'est une révolution.",[30,123,124],{},[54,125,126],{},"A noter que c'était une demande de la part des gros acteurs.",[69,128,130],{"id":129},"statique-hybride","Statique Hybride",[30,132,133,134,139],{},"En mars 2021, j'écrivais un article sur ",[40,135,138],{"href":136,"rel":137},"https:\u002F\u002Fjamstatic.fr\u002F2021\u002F03\u002F09\u002F11000-pages-statiques\u002F",[105],"Jamstatic.fr"," concernant la problématique de faire du statique avec un site qui comporte beaucoup de pages.",[30,141,142],{},"Depuis, plusieurs meta-framework, ont implémenté des méthodes pour les sites avec un grand nombre de pages :",[34,144,145,152,159],{},[37,146,147],{},[40,148,151],{"href":149,"rel":150},"https:\u002F\u002Fwww.gatsbyjs.com\u002Fdocs\u002Freference\u002Frendering-options\u002Fdeferred-static-generation\u002F",[105],"Gatsby DSG",[37,153,154],{},[40,155,158],{"href":156,"rel":157},"https:\u002F\u002Fwww.11ty.dev\u002Fdocs\u002Fplugins\u002Fserverless\u002F",[105],"Eleventy Serverless",[37,160,161],{},"...",[30,163,164],{},"Mais à ce jour, Next.js reste une seule solution simple qui permet en production de générer à la demande une page statique et donc de déployer une app sans générer toutes les pages. Nous parlons de génération incrémentale.",[30,166,167],{},"Et c'est pour cela que l'on parle de statique \"hybride\" car il est nécessaire de faire tourner une runtime pour permettre ce fonctionnement contrairement à du pur statique qui une fois généré se pose sur un CDN et basta.",[69,169,171],{"id":170},"les-points-bloquants-de-la-structure-pages","Les points bloquants de la structure \"pages\"",[30,173,174],{},"Nous sommes nombreux à avoir développé des applications plus ou moins complexes. À s'être accoutumé au fonctionnement de Next.js.",[30,176,177],{},"Ensemble nous allons faire le tour des points bloquants sur la version que je nommerai \"classique\".",[179,180,182],"h3",{"id":181},"le-layout","Le layout",[30,184,185,186,188,189,193],{},"Dans ",[54,187,60],{}," \"classique\", la notion de layout est déjà existante. En effet, nous avons la possibilité de créer un layout en passant un component dans le fichier ",[190,191,192],"code",{},"_app.js",".",[195,196,201],"pre",{"className":197,"code":198,"language":199,"meta":200,"style":200},"language-js shiki shiki-themes synthwave-84","import Layout from '..\u002Fcomponents\u002FLayout'\nimport '..\u002Fstyles\u002Fglobals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003CLayout navigation={pageProps.navigation}>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002FLayout>\n  )\n}\n\nexport default MyApp\n","js","",[190,202,203,223,231,238,264,273,307,325,335,341,347,352],{"__ignoreMap":200},[74,204,207,211,215,219],{"class":205,"line":206},"line",1,[74,208,210],{"class":209},"sfE7D","import",[74,212,214],{"class":213},"sqjNi"," Layout",[74,216,218],{"class":217},"scrqX"," from",[74,220,222],{"class":221},"sFl1-"," '..\u002Fcomponents\u002FLayout'\n",[74,224,226,228],{"class":205,"line":225},2,[74,227,210],{"class":209},[74,229,230],{"class":221}," '..\u002Fstyles\u002Fglobals.css'\n",[74,232,234],{"class":205,"line":233},3,[74,235,237],{"emptyLinePlaceholder":236},true,"\n",[74,239,241,244,248,252,256,258,261],{"class":205,"line":240},4,[74,242,243],{"class":217},"function",[74,245,247],{"class":246},"sgRlq"," MyApp",[74,249,251],{"class":250},"soy-K","({ ",[74,253,255],{"class":254},"sH7Js","Component",[74,257,92],{"class":250},[74,259,260],{"class":254},"pageProps",[74,262,263],{"class":250}," }) {\n",[74,265,267,270],{"class":205,"line":266},5,[74,268,269],{"class":217},"  return",[74,271,272],{"class":250}," (\n",[74,274,276,279,283,286,290,293,295,297,301,304],{"class":205,"line":275},6,[74,277,278],{"class":246},"    \u003C",[74,280,282],{"class":281},"sRQ1T","Layout",[74,284,285],{"class":217}," navigation",[74,287,289],{"class":288},"sW278","=",[74,291,292],{"class":217},"{",[74,294,260],{"class":213},[74,296,193],{"class":250},[74,298,300],{"class":299},"sz5MA","navigation",[74,302,303],{"class":217},"}",[74,305,306],{"class":246},">\n",[74,308,310,313,315,318,320,322],{"class":205,"line":309},7,[74,311,312],{"class":246},"      \u003C",[74,314,255],{"class":281},[74,316,317],{"class":217}," {...",[74,319,260],{"class":213},[74,321,303],{"class":217},[74,323,324],{"class":246}," \u002F>\n",[74,326,328,331,333],{"class":205,"line":327},8,[74,329,330],{"class":246},"    \u003C\u002F",[74,332,282],{"class":281},[74,334,306],{"class":246},[74,336,338],{"class":205,"line":337},9,[74,339,340],{"class":250},"  )\n",[74,342,344],{"class":205,"line":343},10,[74,345,346],{"class":250},"}\n",[74,348,350],{"class":205,"line":349},11,[74,351,237],{"emptyLinePlaceholder":236},[74,353,355,358,361],{"class":205,"line":354},12,[74,356,357],{"class":209},"export",[74,359,360],{"class":217}," default",[74,362,363],{"class":213}," MyApp\n",[30,365,366],{},"Ce layout ne changera pas au fil des navigations dans le browser et seul le contenu sera modifié.",[34,368,369,372],{},[37,370,371],{},"Première limitation : on ne peut pas faire de requête dans ce layout. Pas moyen de récupérer les data de navigation ou autre directement dedans. Il est dépendant de la page qui le contient.",[37,373,374],{},"Deuxième limitation : si je veux avoir des variantes de mon layouts, ce n'est pas natif, il faudra jouer d'astuce pour parser l'url et déterminer quelle est la page courante.",[179,376,378],{"id":377},"getstaticprops-la-seule-source-de-data-et-la-cascade","\"getStaticProps\", la seule source de data et la cascade",[30,380,381,382,384,385,388],{},"Dans la version \"classique\", tout est basé sur les pages. C'est uniquement dans une page via ",[54,383,91],{}," ou ",[54,386,387],{},"getServerSideProps",", que l'on peut récupérer des data coté serveur.",[195,390,392],{"className":197,"code":391,"language":199,"meta":200,"style":200},"export async function getStaticProps({ params }) {\n  \u002F\u002F slug in first param\n  const [slug] = params.slug || []\n  \u002F\u002F get navigation items\n  const navigation = await getNav()\n  \u002F\u002F not slug === home\n  const page = await getPage(slug || '')\n  if (!page) {\n    return {\n      notFound: true,\n    }\n  }\n  return {\n    props: { navigation, page },\n  }\n}\n",[190,393,394,414,420,449,454,472,477,504,521,529,545,550,555,562,582,587],{"__ignoreMap":200},[74,395,396,398,401,404,407,409,412],{"class":205,"line":206},[74,397,357],{"class":209},[74,399,400],{"class":217}," async",[74,402,403],{"class":217}," function",[74,405,406],{"class":246}," getStaticProps",[74,408,251],{"class":250},[74,410,411],{"class":254},"params",[74,413,263],{"class":250},[74,415,416],{"class":205,"line":225},[74,417,419],{"class":418},"sjThu","  \u002F\u002F slug in first param\n",[74,421,422,425,428,431,434,436,439,441,443,446],{"class":205,"line":233},[74,423,424],{"class":217},"  const",[74,426,427],{"class":250}," [",[74,429,430],{"class":213},"slug",[74,432,433],{"class":250},"] ",[74,435,289],{"class":288},[74,437,438],{"class":213}," params",[74,440,193],{"class":250},[74,442,430],{"class":299},[74,444,445],{"class":217}," ||",[74,447,448],{"class":250}," []\n",[74,450,451],{"class":205,"line":240},[74,452,453],{"class":418},"  \u002F\u002F get navigation items\n",[74,455,456,458,460,463,466,469],{"class":205,"line":266},[74,457,424],{"class":217},[74,459,285],{"class":213},[74,461,462],{"class":288}," =",[74,464,465],{"class":217}," await",[74,467,468],{"class":246}," getNav",[74,470,471],{"class":250},"()\n",[74,473,474],{"class":205,"line":275},[74,475,476],{"class":418},"  \u002F\u002F not slug === home\n",[74,478,479,481,484,486,488,491,494,496,498,501],{"class":205,"line":309},[74,480,424],{"class":217},[74,482,483],{"class":213}," page",[74,485,462],{"class":288},[74,487,465],{"class":217},[74,489,490],{"class":246}," getPage",[74,492,493],{"class":250},"(",[74,495,430],{"class":213},[74,497,445],{"class":217},[74,499,500],{"class":221}," ''",[74,502,503],{"class":250},")\n",[74,505,506,509,512,515,518],{"class":205,"line":327},[74,507,508],{"class":217},"  if",[74,510,511],{"class":250}," (",[74,513,514],{"class":217},"!",[74,516,517],{"class":213},"page",[74,519,520],{"class":250},") {\n",[74,522,523,526],{"class":205,"line":337},[74,524,525],{"class":217},"    return",[74,527,528],{"class":250}," {\n",[74,530,531,534,538,542],{"class":205,"line":343},[74,532,533],{"class":213},"      notFound",[74,535,537],{"class":536},"s2hdG",":",[74,539,541],{"class":540},"sSmKr"," true",[74,543,544],{"class":250},",\n",[74,546,547],{"class":205,"line":349},[74,548,549],{"class":250},"    }\n",[74,551,552],{"class":205,"line":354},[74,553,554],{"class":250},"  }\n",[74,556,558,560],{"class":205,"line":557},13,[74,559,269],{"class":217},[74,561,528],{"class":250},[74,563,565,568,570,573,575,577,579],{"class":205,"line":564},14,[74,566,567],{"class":213},"    props",[74,569,537],{"class":536},[74,571,572],{"class":250}," { ",[74,574,300],{"class":213},[74,576,92],{"class":250},[74,578,517],{"class":213},[74,580,581],{"class":250}," },\n",[74,583,585],{"class":205,"line":584},15,[74,586,554],{"class":250},[74,588,590],{"class":205,"line":589},16,[74,591,346],{"class":250},[30,593,594],{},"D'un côté, c'est une bonne chose de n'avoir qu'un point d'entrée pour les data, c'est centralisé. De l'autre, ce point d'entrée, se retrouve à gérer toute la data de la page. Layout compris.",[30,596,597],{},"L'inconvénient, c'est que l'on obtient une cascade de data entre les components. Les components se passent les data de parent à enfant. La page devient responsable de la data affichée dans la navigation, le footer, la sidebar.",[30,599,600],{},"Autre inconvénient, les requêtes sont répétées pour chaque page générée même si elles sont identiques. Pas de système de cache en natif.",[30,602,603],{},"Cela peut très vite, mettre à mal votre API via de très nombreuses requêtes lors d'un déploiement.\nMais ce n'est pas tout, même lors du fonctionnement en production, il peut y avoir des frictions.",[30,605,606,609,610,612],{},[54,607,608],{},"Première friction"," : Le prefetch des liens. Sur une page de liste par exemple, cela peut lancer beaucoup d'appels en même temps, puisque Next.js va générer les pages liées aux liens. Si vous avez des ",[54,611,91],{}," assez conséquents cela peut ralentir votre API.",[26,614,615],{},[30,616,617,620],{},[54,618,619],{},"Link Prefetch"," : Quand Next.js découvre des liens dans un page, il prefetch les pages liées automatiquement. Il est possible de désactiver le prefetch et passer sur le mode hover. Quand le curseur passe sur le link, le prefetch se lance.",[30,622,623,626],{},[54,624,625],{},"Deuxième friction"," : sur une page générée à la demande en réglant le callback sur true ou blocking, après avoir cliqué sur un lien interne, on peut parfois observer une transition de page assez lente où il ne se passe rien. Jusqu'à avoir l'impression que le clic n'a pas fonctionné.\nC'est un comportement que l'on retrouve parfois quand on a des fonctions getStaticProps assez conséquentes.",[628,629],"img",{"align":630,"alt":631,"src":632},"center","nextjs 13 slow","https:\u002F\u002Fdouble-slash.dev\u002Fassets\u002Farticles\u002Fnextjs-lag.gif",[179,634,636],{"id":635},"réhydratation","Réhydratation",[30,638,639,640,643,644,647,648,651],{},"L'",[54,641,642],{},"hydratation",", c'est l'étape où l'application parse le html pour intégrer le côté interactif de l'application.\nProblème, c'est une étape coûteuse en ressource et plus ou moins longue en fonction de la taille de l'application et du bundle. Cela peut réellement impacter le \"",[54,645,646],{},"Time to Interactive","\" et le \"",[54,649,650],{},"Total Blocking Time","\" dans les tests de performances.",[628,653],{"align":630,"alt":654,"src":655},"Total blocking time","https:\u002F\u002Fdouble-slash.dev\u002Fassets\u002Farticles\u002Fblocking-time.jpg",[30,657,658,661,662,665],{},[54,659,660],{},"La conséquence",": Désormais de tous les frameworks n'ont qu'un seul objectif : envoyer le minimum de ",[54,663,664],{},"JavaScript"," possible dans le navigateur. Le comble pour des web apps JavaScript.",[30,667,668,669,672],{},"Un des concepts qui semble être majoritairement adopté: l'",[54,670,671],{},"island architecture",". La majorité du code repasse sur du HTML classique et seulement les éléments qui doivent être interactifs, embarquent du JavaScript.",[30,674,675],{},"Actuellement l'API de rendu React, par sa conception, ne fonctionne pas comme ça. L'application est réhydratée complètement dans le navigateur avant de pouvoir être utilisable.",[30,677,678,679,681],{},"Aujourd'hui dans les tests de performances, les applications Next.js sont pénalisées par un bundle trop lourd, du javascript trop long à parser et donc un ",[54,680,646],{}," catastrophique.",[30,683,684],{},"Next.js dans sa version \"classique\", ne peut pas changer ce système !",[30,686,687,688,691],{},"Bonne nouvelle ! ",[54,689,690],{},"React 18",", introduit de nouveau concept de rendu et nous allons en parler dans le prochain article :",[26,693,694,699],{},[30,695,696],{},[54,697,698],{},"Lire le dernier article",[34,700,701],{},[37,702,703],{},[54,704,705],{},[40,706,49],{"href":48},[708,709,710],"style",{},"html pre.shiki code .sfE7D, html code.shiki .sfE7D{--shiki-default:#72F1B8}html pre.shiki code .sqjNi, html code.shiki .sqjNi{--shiki-default:#FF7EDB}html pre.shiki code .scrqX, html code.shiki .scrqX{--shiki-default:#FEDE5D}html pre.shiki code .sFl1-, html code.shiki .sFl1-{--shiki-default:#FF8B39}html pre.shiki code .sgRlq, html code.shiki .sgRlq{--shiki-default:#36F9F6}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sH7Js, html code.shiki .sH7Js{--shiki-default:#FF7EDB;--shiki-default-font-style:italic}html pre.shiki code .sRQ1T, html code.shiki .sRQ1T{--shiki-default:#FE4450}html pre.shiki code .sW278, html code.shiki .sW278{--shiki-default:#FFFFFFEE}html pre.shiki code .sz5MA, html code.shiki .sz5MA{--shiki-default:#2EE2FA}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sjThu, html code.shiki .sjThu{--shiki-default:#848BBD;--shiki-default-font-style:italic}html pre.shiki code .s2hdG, html code.shiki .s2hdG{--shiki-default:#B6B1B1}html pre.shiki code .sSmKr, html code.shiki .sSmKr{--shiki-default:#F97E72}",{"title":200,"searchDepth":225,"depth":225,"links":712},[713,715,716,717],{"id":71,"depth":225,"text":714},"Next.js 13, pourquoi il était nécessaire d'évoluer ! 1\u002F2",{"id":84,"depth":225,"text":85},{"id":129,"depth":225,"text":130},{"id":170,"depth":225,"text":171,"children":718},[719,720,721],{"id":181,"depth":233,"text":182},{"id":377,"depth":233,"text":378},{"id":635,"depth":233,"text":636},"Dans ce premier article, nous allons refaire le point sur la façon que je nommerai \"classique\" de construire des applications depuis quelques versions avec Next.js. Ensemble, nous allons revoir le fonctionnement de la structure \"pages\" dans Next.js et ensuite dévoiler quelques points bloquants sur cette version.","md",{},"\u002Farticles\u002Fnext-js-13-pages","2022-12-04",{"title":18,"description":722},"articles\u002Fnext-js-13-pages","jQ1eopiZ9NAvceG6HdrDQv7wrdJeKU6dVYMmg9Uwdy8",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":731},"\u003Cpath fill=\"currentColor\" d=\"M4 21V9l8-6l8 6v12h-6v-7h-4v7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":733},"\u003Cpath fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h3v2H6v10h12V10h-3V8h3q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm5-6V4.825l-1.6 1.6L8 5l4-4l4 4l-1.4 1.425l-1.6-1.6V16z\"\u002F>",["Island",735],{"key":736,"result":737},"Brand_bAcjTzQpW6OVpFK319jfMki97vH1GrZiqHmeI7Xg4o",{"head":738},{},["Island",740],{"key":741,"result":742},"ArticleDetails_y4cMi6A76NdrebQGs1ehn2ZdnfPiyH8a3Mvtkrorc7s",{"head":743},{},1785405174058]