{"id":9287,"date":"2022-08-11T15:23:48","date_gmt":"2022-08-11T13:23:48","guid":{"rendered":"https:\/\/vived.io\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/"},"modified":"2022-09-19T13:16:24","modified_gmt":"2022-09-19T11:16:24","slug":"astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/","title":{"rendered":"Astro 1.0, czyli SSR nie z tej galaktyki &#8211; Frontend Weekly vol. 100"},"content":{"rendered":"\n<h2 id=\"1-astro-1-0\" data-num=1>1. Astro 1.0<\/h2>\n\n<p>Astro to framework do Server Side Renderingu, kt\u00f3ry w wersji beta dost\u0119pny by\u0142 ju\u017c od ponad roku. W minionym tygodniu wreszcie ukaza\u0142 si\u0119 Astro 1.0, w kt\u00f3rym tw\u00f3rcy zadeklarowali si\u0119 ostatecznie ustabilizowa\u0107 publiczne API.  O tym jak interesuj\u0105cym narz\u0119dziem  jest Astro najlepiej \u015bwiadczy fakt, \u017ce firmy takie jak Google, The Guardian, czy IKEA zdecydowa\u0142y si\u0119 korzysta\u0107 z niego jeszcze zanim zosta\u0142o ono okre\u015blone jako \u201cgotowe dla produkcyjnych aplikacji\u201d.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e4eafc3.jpg\" alt=\"\"\/><\/figure><\/div>\n<p>Astro, podobnie jak opisywany przez nas kilka tygodni temu Fresh, oparty jest o architektur\u0119 wysp. Zak\u0142ada ona, \u017ce na tworzonej przez nas stronie\/aplikacji w\u015br\u00f3d morza statycznej tre\u015bci (np. menu nawigacji, artyku\u0142) znajduj\u0105 si\u0119 ma\u0142e wyspy interaktywnych komponent\u00f3w (np. formularz zapisu do newslettera). Takie podej\u015bcie pozwala wyrenderowa\u0107 ca\u0142\u0105 aplikacj\u0119 po stronie serwera, a do klienta wysy\u0142any jest tylko niewielkich rozmiar\u00f3w kod komponent\u00f3w-wysp. &#13;\n<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e52f7ee.png\" alt=\"\"\/><figcaption>\u0179r\u00f3d\u0142o: <a href=\"https:\/\/jasonformat.com\/islands-architecture\/\">Islands Architecture: Jason Miller<\/a><\/figcaption><\/figure><\/div>\n<p>Architektura wyspowa w Astro pod jednym wzgl\u0119dem przerasta t\u0105 zaimplementowan\u0105 w Fresh. Astro umo\u017cliwia dok\u0142adne zdefiniowanie kiedy dana wyspa ma podlega\u0107 hydracji. Taka funkcjonalno\u015b\u0107 daje programist\u0105 du\u017c\u0105 elastyczno\u015b\u0107 w definiowaniu priorytet\u00f3w. Dost\u0119pne dyrektywy specyfikuj\u0105ce priorytet to:<\/p>\n\n<ul class=\"wp-block-list\"><li>`client:load` &#8211; komponent powinien by\u0107 interaktywny najszybciej jak to mo\u017cliwe<\/li><li>`client:idle` &#8211; komponent b\u0119dzie interaktywny dopiero gdy przegl\u0105darka zako\u0144czy \u0142adowanie strony<\/li><li>`client:visible` &#8211; komponent b\u0119dzie interaktywny dopiero kilka chwil po tym jak pojawi si\u0119 na ekranie<\/li><li>`client:media` &#8211; umo\u017cliwia hydracj\u0119 komponentu tylko kiedy spe\u0142nione s\u0105 odpowiednie Media Query.<\/li><li>`client:only` &#8211; komponent nie b\u0119dzie renderowany po stronie serwera, a po stronie klienta wyrenderowany zostanie z najwy\u017cszym priorytetem<\/li><\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e563170.jpg\" alt=\"\"\/><\/figure><\/div>\n<p><span style=\"font-weight: 400;\">Nietrudno domy\u015bli\u0107 si\u0119, \u017ce nie wszystkie aplikacje nadaj\u0105 si\u0119 do wdro\u017cenia architektury wyspowej. Przyk\u0142adowo, mocno interaktywne aplikacje takie jak Figma, Miro czy Facebook charakteryzuj\u0105 si\u0119 raczej morzem interaktywnych komponent\u00f3w i wyspami statycznych fragment\u00f3w. Dla takich aplikacji lepiej sprawdzi si\u0119 klasyczne podej\u015bcie do Server Side Renderingu zak\u0142adaj\u0105ce, \u017ce ca\u0142a aplikacja podlega procesowi hydracji po stronie klienta. Architektura wyspowa sprawdzi si\u0119 natomiast idealnie na wszelakich Landing Page&#8217;ach, blogach czy dokumentacjach.<\/span><\/p>\n\n<p><span style=\"font-weight: 400;\">Nawigacja w Astro, podobnie jak w Next.js, opiera si\u0119 o struktur\u0119 katalog\u00f3w. Do tworzenia stron wykorzystywane s\u0105 pliki Markdown lub komponenty Astro. Te drugie s\u0105 ciekaw\u0105 wariacj\u0105 na temat czystego HTML-a i JSX-a. Plik z takim komponentem mo\u017cemy podzieli\u0107 na dwie cz\u0119\u015bci: skrypt i szablon. Obie cz\u0119\u015bci oddzielone s\u0105 od siebie czym\u015b co tw\u00f3rcy nazywaj\u0105 p\u0142otkiem.<\/span><\/p>\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">---\nconst items = [&quot;Dog&quot;, &quot;Cat&quot;, &quot;Platypus&quot;];\n---\n&lt;ul&gt;\n  {items.map((item) =&gt; (\n    &lt;li&gt;{item}&lt;\/li&gt;\n  ))}\n&lt;\/ul&gt;\n<\/code><\/pre>\n\n<p><span style=\"font-weight: 400;\">Cz\u0119\u015b\u0107 skryptowa komponent\u00f3w wykonywana jest zawsze po stronie serwera. Z jej poziomu mo\u017cemy zaimportowa\u0107 inne komponenty lub pobra\u0107 wymagane dane. Tutaj dochodzimy do kolejnego wyr\u00f3\u017cnika Astro. Importowane komponenty mog\u0105 by\u0107 zaimplementowane w dowolnym frameworku (obecnie wspierany jest\u00a0 React, Preact, Svelte, Vue, SolidJS i Lit). Jedyne ograniczenie wyst\u0119puje w przypadku komponent\u00f3w wysp, gdzie po wej\u015bciu do \u015bwiata jednego frameworka nie mo\u017cemy go ju\u017c opu\u015bci\u0107.<\/span><\/p>\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\u2014\nimport HomeLayout from &#039;..\/layouts\/HomeLayout.astro&#039;\nimport MyReactComponent from &#039;..\/components\/MyReactComponent.jsx&#039;;\nimport MySvelteComponent from &#039;..\/components\/MySvelteComponent.svelte&#039;;\n\nconst data = await fetch(&#039;API_URL&#039;).then(r =&gt; r.json());\n---\n&lt;HomeLayout&gt;\n  &lt;MyReactComponent client:load name={data.name}&gt;\n    &lt;!-- This will work because Astro will render MySvelteComponent to pure HTML and pass it to React component --&gt;\n    &lt;!-- If you want MySvelteComponent to be interactive you need to rewrite it to React --&gt;\n    &lt;MySvelteComponent avatar={data.avatar}\/&gt;\n  &lt;\/MyReactComponent&gt;\n&lt;\/HomeLayout&gt;\n<\/code><\/pre>\r\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e58d124.jpg\" alt=\"\"\/><\/figure><\/div>\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n<p><a href=\"https:\/\/astro.build\/blog\/astro-1\/\">https:\/\/astro.build\/blog\/astro-1\/<\/a><\/p>\n\n<h2 id=\"2-nowa-komenda-npm-query\" data-num=2>2. Nowa komenda `npm query`<\/h2>\n\n<p>Mieli\u015bcie kiedy\u015b (nie)przyjemno\u015b\u0107 debugowa\u0107 zale\u017cno\u015bci z `node_modules`? Je\u015bli tak, to mamy dla Was dobr\u0105 wiadomo\u015b\u0107. Do npm v8.16 trafi\u0142a nowa komenda `npm query`, kt\u00f3ra umo\u017cliwia przeszukiwanie dependencji przy pomocy selektor\u00f3w do z\u0142udzenia przypominaj\u0105cych te znane z CSS.<\/p>\n\n<p>Wy\u015bwietl wszystkie zale\u017cno\u015bci:<\/p>\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query &quot;*&quot;<\/code><\/pre>\r\n\n<p>Wy\u015bwietl wszystkie wersje biblioteki moment i date-fns w projekcie:<\/p>\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query &quot;#moment, #date-fns&quot;<\/code><\/pre>\r\n\n<p>Wy\u015bwietl wszystkie wersje biblioteki moment, kt\u00f3re nie s\u0105 zadeklarowane jako peer-dependency:<\/p>\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query &quot;#moment:not(.peer)&quot;<\/code><\/pre>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e5b851a.jpg\" alt=\"\"\/><\/figure><\/div>\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142o:<\/h3>\n\n<p><a href=\" https:\/\/github.blog\/changelog\/2022-08-03-introducing-the-new-npm-dependency-selector-syntax\/\">https:\/\/github.blog\/changelog\/2022-08-03-introducing-the-new-npm-dependency-selector-syntax\/<\/a><\/p>\n\n<h2 id=\"3-angular-dostanie-swoje-hooki\" data-num=3>3. Angular dostanie swoje hooki?<\/h2>\n\n<p>Pawe\u0142 Koz\u0142owski jest jednym z bardziej rozpoznawalnych cz\u0142onk\u00f3w zespo\u0142u rozwijaj\u0105cego Angulara. Kilka dni temu w jednym z twitterowych w\u0105tk\u00f3w zapowiedzia\u0142, \u017ce zesp\u00f3\u0142 pracuje nad RFC dla `computed values`, a dos\u0142ownie dzisiaj opublikowa\u0142 on swoj\u0105 propozycj\u0119 API.<\/p>\n\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\r\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Playing with a push (dirty state) \/ pull (values) reactive primitives.<br><br>First reactions? <a href=\"https:\/\/t.co\/Nu71cWLUqj\">pic.twitter.com\/Nu71cWLUqj<\/a><\/p>&mdash; Pawel Kozlowski (@pkozlowski_os) <a href=\"https:\/\/twitter.com\/pkozlowski_os\/status\/1557403017024077824?ref_src=twsrc%5Etfw\">August 10, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\r\n<\/div><\/figure>\r\n\n<p>Z jednej strony rozumiem potrzeb\u0119 pojawienia si\u0119 `copmuted values` w Angularze. Kilka tygodni temu w weekly dzielili\u015bmy si\u0119 analiz\u0105 por\u00f3wnawcz\u0105 bli\u017aniaczego kodu napisanego w r\u00f3\u017cnych frameworkach. Przygotowa\u0142em wtedy co\u015b na wz\u00f3r `copmuted values` w oparciu o rxjs i widz\u0119 teraz zaproponowane API mog\u0142oby upro\u015bci\u0107 to rozwi\u0105zanie. Z drugiej strony troch\u0119 przera\u017ca mnie ten mira\u017c klasowego cyklu \u017cycia z architektur\u0105 hook\u00f3w. Z ostatecznymi wyrokami poczekam jednak na pe\u0142ne RFC, kt\u00f3re na pewno poruszy sporo nurtuj\u0105cych mnie przypadk\u00f3w brzegowych.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e5e3d39.jpg\" alt=\"\"\/><\/figure><\/div>\n<h2 id=\"bonus-krotka-historia-czytnikow-ekranu\" data-num=4>Bonus: Kr\u00f3tka historia czytnik\u00f3w ekranu<\/h2>\n\n<p><span style=\"font-weight: 400;\">Na potrzeby procesu edytorskiego Vived, przegl\u0105dam codziennie sporo artyku\u0142\u00f3w o tematyce oko\u0142o frontendowej. Rzadko zdarza si\u0119, \u017ceby kt\u00f3ry\u015b przyci\u0105gn\u0105\u0142 mnie tak bardzo jak przygotowana przez The Verge kr\u00f3tka historia czytnik\u00f3w ekranowych. Pe\u0142ny osobistych historii i ciekawostek artyku\u0142 czyta si\u0119 niczym powie\u015b\u0107 przygodow\u0105. Je\u015bli szukacie kr\u00f3tkiej lektury na d\u0142ugi weekend to zdecydowanie polecam!<\/span><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e61b21f.jpg\" alt=\"\"\/><\/figure><\/div>\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n<p><a href=\"https:\/\/www.theverge.com\/23203911\/screen-readers-history-blind-henter-curran-teh-nvda\">https:\/\/www.theverge.com\/23203911\/screen-readers-history-blind-henter-curran-teh-nvda<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W 2022 roku renderowanie po stronie serwera prze\u017cywa sw\u00f3j renesans. Astro to kolejny framework w tej kategorii, tym razem oparty o architektur\u0119 wyspow\u0105 i umo\u017cliwiaj\u0105cy tworzenie komponent\u00f3w w dowolnym popularnym narz\u0119dziu. Je\u015bli jeste\u015bcie ciekawi czy mo\u017ce stanowi\u0107 realn\u0105 alternatyw\u0119 dla Next.js to zapraszamy do wpisu.<\/p>\n","protected":false},"author":12,"featured_media":9238,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"estimated_reading_time":"4","feature_image_blog":{"ID":9238,"id":9238,"title":"frontend-100-photo","filename":"frontend-100-photo.jpg","filesize":281299,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","link":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/frontend-100-photo-2-2\/","alt":"","author":"15","description":"","caption":"","name":"frontend-100-photo-2-2","status":"inherit","uploaded_to":9287,"date":"2022-08-11 13:18:18","modified":"2022-08-11 13:34:54","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo-300x169.jpg","medium-width":300,"medium-height":169,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo-768x432.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo-1024x576.jpg","large-width":1024,"large-height":576,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","2048x2048-width":1920,"2048x2048-height":1080,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":169,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":225,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":338}},"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100_pl.png","feature_image_visible":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Astro 1.0, czyli SSR nie z tej galaktyki - Frontend Weekly vol. 100 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Astro 1.0, czyli SSR nie z tej galaktyki - Frontend Weekly vol. 100 - Vived\" \/>\n<meta property=\"og:description\" content=\"W 2022 roku renderowanie po stronie serwera prze\u017cywa sw\u00f3j renesans. Astro to kolejny framework w tej kategorii, tym razem oparty o architektur\u0119 wyspow\u0105 i umo\u017cliwiaj\u0105cy tworzenie komponent\u00f3w w dowolnym popularnym narz\u0119dziu. Je\u015bli jeste\u015bcie ciekawi czy mo\u017ce stanowi\u0107 realn\u0105 alternatyw\u0119 dla Next.js to zapraszamy do wpisu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-11T13:23:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Astro 1.0, czyli SSR nie z tej galaktyki &#8211; Frontend Weekly vol. 100\",\"datePublished\":\"2022-08-11T13:23:48+00:00\",\"dateModified\":\"2022-09-19T11:16:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\"},\"wordCount\":831,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\",\"url\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\",\"name\":\"Astro 1.0, czyli SSR nie z tej galaktyki - Frontend Weekly vol. 100 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg\",\"datePublished\":\"2022-08-11T13:23:48+00:00\",\"dateModified\":\"2022-09-19T11:16:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Astro 1.0, czyli SSR nie z tej galaktyki &#8211; Frontend Weekly vol. 100\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Astro 1.0, czyli SSR nie z tej galaktyki - Frontend Weekly vol. 100 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/","og_locale":"pl_PL","og_type":"article","og_title":"Astro 1.0, czyli SSR nie z tej galaktyki - Frontend Weekly vol. 100 - Vived","og_description":"W 2022 roku renderowanie po stronie serwera prze\u017cywa sw\u00f3j renesans. Astro to kolejny framework w tej kategorii, tym razem oparty o architektur\u0119 wyspow\u0105 i umo\u017cliwiaj\u0105cy tworzenie komponent\u00f3w w dowolnym popularnym narz\u0119dziu. Je\u015bli jeste\u015bcie ciekawi czy mo\u017ce stanowi\u0107 realn\u0105 alternatyw\u0119 dla Next.js to zapraszamy do wpisu.","og_url":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/","og_site_name":"Vived","article_published_time":"2022-08-11T13:23:48+00:00","article_modified_time":"2022-09-19T11:16:24+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","type":"image\/jpeg"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Astro 1.0, czyli SSR nie z tej galaktyki &#8211; Frontend Weekly vol. 100","datePublished":"2022-08-11T13:23:48+00:00","dateModified":"2022-09-19T11:16:24+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/"},"wordCount":831,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/","url":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/","name":"Astro 1.0, czyli SSR nie z tej galaktyki - Frontend Weekly vol. 100 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","datePublished":"2022-08-11T13:23:48+00:00","dateModified":"2022-09-19T11:16:24+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/frontend-100-photo.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/astro-1-0-czyli-ssr-nie-z-tej-galaktyki-frontend-weekly-vol-100\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Astro 1.0, czyli SSR nie z tej galaktyki &#8211; Frontend Weekly vol. 100"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Astro 1.0<\/h2>\n","innerContent":["\n<h2>1. Astro 1.0<\/h2>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Astro to framework do Server Side Renderingu, kt\u00f3ry w wersji beta dost\u0119pny by\u0142 ju\u017c od ponad roku. W minionym tygodniu wreszcie ukaza\u0142 si\u0119 Astro 1.0, w kt\u00f3rym tw\u00f3rcy zadeklarowali si\u0119 ostatecznie ustabilizowa\u0107 publiczne API.  O tym jak interesuj\u0105cym narz\u0119dziem  jest Astro najlepiej \u015bwiadczy fakt, \u017ce firmy takie jak Google, The Guardian, czy IKEA zdecydowa\u0142y si\u0119 korzysta\u0107 z niego jeszcze zanim zosta\u0142o ono okre\u015blone jako \u201cgotowe dla produkcyjnych aplikacji\u201d.<\/p>\n","innerContent":["\n<p>Astro to framework do Server Side Renderingu, kt\u00f3ry w wersji beta dost\u0119pny by\u0142 ju\u017c od ponad roku. W minionym tygodniu wreszcie ukaza\u0142 si\u0119 Astro 1.0, w kt\u00f3rym tw\u00f3rcy zadeklarowali si\u0119 ostatecznie ustabilizowa\u0107 publiczne API.  O tym jak interesuj\u0105cym narz\u0119dziem  jest Astro najlepiej \u015bwiadczy fakt, \u017ce firmy takie jak Google, The Guardian, czy IKEA zdecydowa\u0142y si\u0119 korzysta\u0107 z niego jeszcze zanim zosta\u0142o ono okre\u015blone jako \u201cgotowe dla produkcyjnych aplikacji\u201d.<\/p>\n"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e4eafc3.jpg\" alt=\"\"\/><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e4eafc3.jpg\" alt=\"\"\/><\/figure>"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Astro, podobnie jak opisywany przez nas kilka tygodni temu Fresh, oparty jest o architektur\u0119 wysp. Zak\u0142ada ona, \u017ce na tworzonej przez nas stronie\/aplikacji w\u015br\u00f3d morza statycznej tre\u015bci (np. menu nawigacji, artyku\u0142) znajduj\u0105 si\u0119 ma\u0142e wyspy interaktywnych komponent\u00f3w (np. formularz zapisu do newslettera). Takie podej\u015bcie pozwala wyrenderowa\u0107 ca\u0142\u0105 aplikacj\u0119 po stronie serwera, a do klienta wysy\u0142any jest tylko niewielkich rozmiar\u00f3w kod komponent\u00f3w-wysp. &#13;\n<\/p>\n","innerContent":["\n<p>Astro, podobnie jak opisywany przez nas kilka tygodni temu Fresh, oparty jest o architektur\u0119 wysp. Zak\u0142ada ona, \u017ce na tworzonej przez nas stronie\/aplikacji w\u015br\u00f3d morza statycznej tre\u015bci (np. menu nawigacji, artyku\u0142) znajduj\u0105 si\u0119 ma\u0142e wyspy interaktywnych komponent\u00f3w (np. formularz zapisu do newslettera). Takie podej\u015bcie pozwala wyrenderowa\u0107 ca\u0142\u0105 aplikacj\u0119 po stronie serwera, a do klienta wysy\u0142any jest tylko niewielkich rozmiar\u00f3w kod komponent\u00f3w-wysp. &#13;\n<\/p>\n"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e52f7ee.png\" alt=\"\"\/><figcaption>\u0179r\u00f3d\u0142o: <a href=\"https:\/\/jasonformat.com\/islands-architecture\/\">Islands Architecture: Jason Miller<\/a><\/figcaption><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e52f7ee.png\" alt=\"\"\/><figcaption>\u0179r\u00f3d\u0142o: <a href=\"https:\/\/jasonformat.com\/islands-architecture\/\">Islands Architecture: Jason Miller<\/a><\/figcaption><\/figure>"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Architektura wyspowa w Astro pod jednym wzgl\u0119dem przerasta t\u0105 zaimplementowan\u0105 w Fresh. Astro umo\u017cliwia dok\u0142adne zdefiniowanie kiedy dana wyspa ma podlega\u0107 hydracji. Taka funkcjonalno\u015b\u0107 daje programist\u0105 du\u017c\u0105 elastyczno\u015b\u0107 w definiowaniu priorytet\u00f3w. Dost\u0119pne dyrektywy specyfikuj\u0105ce priorytet to:<\/p>\n","innerContent":["\n<p>Architektura wyspowa w Astro pod jednym wzgl\u0119dem przerasta t\u0105 zaimplementowan\u0105 w Fresh. Astro umo\u017cliwia dok\u0142adne zdefiniowanie kiedy dana wyspa ma podlega\u0107 hydracji. Taka funkcjonalno\u015b\u0107 daje programist\u0105 du\u017c\u0105 elastyczno\u015b\u0107 w definiowaniu priorytet\u00f3w. Dost\u0119pne dyrektywy specyfikuj\u0105ce priorytet to:<\/p>\n"]},{"blockName":"core\/list","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<ul><li>`client:load` - komponent powinien by\u0107 interaktywny najszybciej jak to mo\u017cliwe<\/li><li>`client:idle` - komponent b\u0119dzie interaktywny dopiero gdy przegl\u0105darka zako\u0144czy \u0142adowanie strony<\/li><li>`client:visible` - komponent b\u0119dzie interaktywny dopiero kilka chwil po tym jak pojawi si\u0119 na ekranie<\/li><li>`client:media` - umo\u017cliwia hydracj\u0119 komponentu tylko kiedy spe\u0142nione s\u0105 odpowiednie Media Query.<\/li><li>`client:only` - komponent nie b\u0119dzie renderowany po stronie serwera, a po stronie klienta wyrenderowany zostanie z najwy\u017cszym priorytetem<\/li><\/ul>","innerContent":["\n<ul><li>`client:load` - komponent powinien by\u0107 interaktywny najszybciej jak to mo\u017cliwe<\/li><li>`client:idle` - komponent b\u0119dzie interaktywny dopiero gdy przegl\u0105darka zako\u0144czy \u0142adowanie strony<\/li><li>`client:visible` - komponent b\u0119dzie interaktywny dopiero kilka chwil po tym jak pojawi si\u0119 na ekranie<\/li><li>`client:media` - umo\u017cliwia hydracj\u0119 komponentu tylko kiedy spe\u0142nione s\u0105 odpowiednie Media Query.<\/li><li>`client:only` - komponent nie b\u0119dzie renderowany po stronie serwera, a po stronie klienta wyrenderowany zostanie z najwy\u017cszym priorytetem<\/li><\/ul>"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e563170.jpg\" alt=\"\"\/><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e563170.jpg\" alt=\"\"\/><\/figure>"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p><span style=\"font-weight: 400;\">Nietrudno domy\u015bli\u0107 si\u0119, \u017ce nie wszystkie aplikacje nadaj\u0105 si\u0119 do wdro\u017cenia architektury wyspowej. Przyk\u0142adowo, mocno interaktywne aplikacje takie jak Figma, Miro czy Facebook charakteryzuj\u0105 si\u0119 raczej morzem interaktywnych komponent\u00f3w i wyspami statycznych fragment\u00f3w. Dla takich aplikacji lepiej sprawdzi si\u0119 klasyczne podej\u015bcie do Server Side Renderingu zak\u0142adaj\u0105ce, \u017ce ca\u0142a aplikacja podlega procesowi hydracji po stronie klienta. Architektura wyspowa sprawdzi si\u0119 natomiast idealnie na wszelakich Landing Page'ach, blogach czy dokumentacjach.<\/span><\/p>\n","innerContent":["\n<p><span style=\"font-weight: 400;\">Nietrudno domy\u015bli\u0107 si\u0119, \u017ce nie wszystkie aplikacje nadaj\u0105 si\u0119 do wdro\u017cenia architektury wyspowej. Przyk\u0142adowo, mocno interaktywne aplikacje takie jak Figma, Miro czy Facebook charakteryzuj\u0105 si\u0119 raczej morzem interaktywnych komponent\u00f3w i wyspami statycznych fragment\u00f3w. Dla takich aplikacji lepiej sprawdzi si\u0119 klasyczne podej\u015bcie do Server Side Renderingu zak\u0142adaj\u0105ce, \u017ce ca\u0142a aplikacja podlega procesowi hydracji po stronie klienta. Architektura wyspowa sprawdzi si\u0119 natomiast idealnie na wszelakich Landing Page'ach, blogach czy dokumentacjach.<\/span><\/p>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p><span style=\"font-weight: 400;\">Nawigacja w Astro, podobnie jak w Next.js, opiera si\u0119 o struktur\u0119 katalog\u00f3w. Do tworzenia stron wykorzystywane s\u0105 pliki Markdown lub komponenty Astro. Te drugie s\u0105 ciekaw\u0105 wariacj\u0105 na temat czystego HTML-a i JSX-a. Plik z takim komponentem mo\u017cemy podzieli\u0107 na dwie cz\u0119\u015bci: skrypt i szablon. Obie cz\u0119\u015bci oddzielone s\u0105 od siebie czym\u015b co tw\u00f3rcy nazywaj\u0105 p\u0142otkiem.<\/span><\/p>\n","innerContent":["\n<p><span style=\"font-weight: 400;\">Nawigacja w Astro, podobnie jak w Next.js, opiera si\u0119 o struktur\u0119 katalog\u00f3w. Do tworzenia stron wykorzystywane s\u0105 pliki Markdown lub komponenty Astro. Te drugie s\u0105 ciekaw\u0105 wariacj\u0105 na temat czystego HTML-a i JSX-a. Plik z takim komponentem mo\u017cemy podzieli\u0107 na dwie cz\u0119\u015bci: skrypt i szablon. Obie cz\u0119\u015bci oddzielone s\u0105 od siebie czym\u015b co tw\u00f3rcy nazywaj\u0105 p\u0142otkiem.<\/span><\/p>\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">---\r\nconst items = [\"Dog\", \"Cat\", \"Platypus\"];\r\n---\r\n&lt;ul&gt;\r\n  {items.map((item) =&gt; (\r\n    &lt;li&gt;{item}&lt;\/li&gt;\r\n  ))}\r\n&lt;\/ul&gt;\r\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">---\r\nconst items = [\"Dog\", \"Cat\", \"Platypus\"];\r\n---\r\n&lt;ul&gt;\r\n  {items.map((item) =&gt; (\r\n    &lt;li&gt;{item}&lt;\/li&gt;\r\n  ))}\r\n&lt;\/ul&gt;\r\n<\/code><\/pre>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p><span style=\"font-weight: 400;\">Cz\u0119\u015b\u0107 skryptowa komponent\u00f3w wykonywana jest zawsze po stronie serwera. Z jej poziomu mo\u017cemy zaimportowa\u0107 inne komponenty lub pobra\u0107 wymagane dane. Tutaj dochodzimy do kolejnego wyr\u00f3\u017cnika Astro. Importowane komponenty mog\u0105 by\u0107 zaimplementowane w dowolnym frameworku (obecnie wspierany jest\u00a0 React, Preact, Svelte, Vue, SolidJS i Lit). Jedyne ograniczenie wyst\u0119puje w przypadku komponent\u00f3w wysp, gdzie po wej\u015bciu do \u015bwiata jednego frameworka nie mo\u017cemy go ju\u017c opu\u015bci\u0107.<\/span><\/p>\n","innerContent":["\n<p><span style=\"font-weight: 400;\">Cz\u0119\u015b\u0107 skryptowa komponent\u00f3w wykonywana jest zawsze po stronie serwera. Z jej poziomu mo\u017cemy zaimportowa\u0107 inne komponenty lub pobra\u0107 wymagane dane. Tutaj dochodzimy do kolejnego wyr\u00f3\u017cnika Astro. Importowane komponenty mog\u0105 by\u0107 zaimplementowane w dowolnym frameworku (obecnie wspierany jest\u00a0 React, Preact, Svelte, Vue, SolidJS i Lit). Jedyne ograniczenie wyst\u0119puje w przypadku komponent\u00f3w wysp, gdzie po wej\u015bciu do \u015bwiata jednego frameworka nie mo\u017cemy go ju\u017c opu\u015bci\u0107.<\/span><\/p>\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\u2014\r\nimport HomeLayout from '..\/layouts\/HomeLayout.astro'\r\nimport MyReactComponent from '..\/components\/MyReactComponent.jsx';\r\nimport MySvelteComponent from '..\/components\/MySvelteComponent.svelte';\r\n\r\nconst data = await fetch('API_URL').then(r => r.json());\r\n---\r\n&lt;HomeLayout>\r\n  &lt;MyReactComponent client:load name={data.name}>\r\n    &lt;!-- This will work because Astro will render MySvelteComponent to pure HTML and pass it to React component -->\r\n    &lt;!-- If you want MySvelteComponent to be interactive you need to rewrite it to React -->\r\n    &lt;MySvelteComponent avatar={data.avatar}\/>\r\n  &lt;\/MyReactComponent>\r\n&lt;\/HomeLayout>\r\n<\/code><\/pre>\r\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\u2014\r\nimport HomeLayout from '..\/layouts\/HomeLayout.astro'\r\nimport MyReactComponent from '..\/components\/MyReactComponent.jsx';\r\nimport MySvelteComponent from '..\/components\/MySvelteComponent.svelte';\r\n\r\nconst data = await fetch('API_URL').then(r => r.json());\r\n---\r\n&lt;HomeLayout>\r\n  &lt;MyReactComponent client:load name={data.name}>\r\n    &lt;!-- This will work because Astro will render MySvelteComponent to pure HTML and pass it to React component -->\r\n    &lt;!-- If you want MySvelteComponent to be interactive you need to rewrite it to React -->\r\n    &lt;MySvelteComponent avatar={data.avatar}\/>\r\n  &lt;\/MyReactComponent>\r\n&lt;\/HomeLayout>\r\n<\/code><\/pre>\r\n"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e58d124.jpg\" alt=\"\"\/><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e58d124.jpg\" alt=\"\"\/><\/figure>"]},{"blockName":"core\/heading","attrs":{"level":3,"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/astro.build\/blog\/astro-1\/\">https:\/\/astro.build\/blog\/astro-1\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/astro.build\/blog\/astro-1\/\">https:\/\/astro.build\/blog\/astro-1\/<\/a><\/p>\n"]},{"blockName":"core\/heading","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<h2>2. Nowa komenda `npm query`<\/h2>\n","innerContent":["\n<h2>2. Nowa komenda `npm query`<\/h2>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Mieli\u015bcie kiedy\u015b (nie)przyjemno\u015b\u0107 debugowa\u0107 zale\u017cno\u015bci z `node_modules`? Je\u015bli tak, to mamy dla Was dobr\u0105 wiadomo\u015b\u0107. Do npm v8.16 trafi\u0142a nowa komenda `npm query`, kt\u00f3ra umo\u017cliwia przeszukiwanie dependencji przy pomocy selektor\u00f3w do z\u0142udzenia przypominaj\u0105cych te znane z CSS.<\/p>\n","innerContent":["\n<p>Mieli\u015bcie kiedy\u015b (nie)przyjemno\u015b\u0107 debugowa\u0107 zale\u017cno\u015bci z `node_modules`? Je\u015bli tak, to mamy dla Was dobr\u0105 wiadomo\u015b\u0107. Do npm v8.16 trafi\u0142a nowa komenda `npm query`, kt\u00f3ra umo\u017cliwia przeszukiwanie dependencji przy pomocy selektor\u00f3w do z\u0142udzenia przypominaj\u0105cych te znane z CSS.<\/p>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Wy\u015bwietl wszystkie zale\u017cno\u015bci:<\/p>\n","innerContent":["\n<p>Wy\u015bwietl wszystkie zale\u017cno\u015bci:<\/p>\n"]},{"blockName":"prismatic\/blocks","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query \"*\"<\/code><\/pre>\r\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query \"*\"<\/code><\/pre>\r\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Wy\u015bwietl wszystkie wersje biblioteki moment i date-fns w projekcie:<\/p>\n","innerContent":["\n<p>Wy\u015bwietl wszystkie wersje biblioteki moment i date-fns w projekcie:<\/p>\n"]},{"blockName":"prismatic\/blocks","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query \"#moment, #date-fns\"<\/code><\/pre>\r\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query \"#moment, #date-fns\"<\/code><\/pre>\r\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Wy\u015bwietl wszystkie wersje biblioteki moment, kt\u00f3re nie s\u0105 zadeklarowane jako peer-dependency:<\/p>\n","innerContent":["\n<p>Wy\u015bwietl wszystkie wersje biblioteki moment, kt\u00f3re nie s\u0105 zadeklarowane jako peer-dependency:<\/p>\n"]},{"blockName":"prismatic\/blocks","attrs":[],"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query \"#moment:not(.peer)\"<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm query \"#moment:not(.peer)\"<\/code><\/pre>\n"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e5b851a.jpg\" alt=\"\"\/><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e5b851a.jpg\" alt=\"\"\/><\/figure>"]},{"blockName":"core\/heading","attrs":{"level":3,"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142o:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142o:<\/h3>\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\" https:\/\/github.blog\/changelog\/2022-08-03-introducing-the-new-npm-dependency-selector-syntax\/\">https:\/\/github.blog\/changelog\/2022-08-03-introducing-the-new-npm-dependency-selector-syntax\/<\/a><\/p>\n","innerContent":["\n<p><a href=\" https:\/\/github.blog\/changelog\/2022-08-03-introducing-the-new-npm-dependency-selector-syntax\/\">https:\/\/github.blog\/changelog\/2022-08-03-introducing-the-new-npm-dependency-selector-syntax\/<\/a><\/p>\n"]},{"blockName":"core\/heading","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<h2>3. Angular dostanie swoje hooki?<\/h2>\n","innerContent":["\n<h2>3. Angular dostanie swoje hooki?<\/h2>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Pawe\u0142 Koz\u0142owski jest jednym z bardziej rozpoznawalnych cz\u0142onk\u00f3w zespo\u0142u rozwijaj\u0105cego Angulara. Kilka dni temu w jednym z twitterowych w\u0105tk\u00f3w zapowiedzia\u0142, \u017ce zesp\u00f3\u0142 pracuje nad RFC dla `computed values`, a dos\u0142ownie dzisiaj opublikowa\u0142 on swoj\u0105 propozycj\u0119 API.<\/p>\n","innerContent":["\n<p>Pawe\u0142 Koz\u0142owski jest jednym z bardziej rozpoznawalnych cz\u0142onk\u00f3w zespo\u0142u rozwijaj\u0105cego Angulara. Kilka dni temu w jednym z twitterowych w\u0105tk\u00f3w zapowiedzia\u0142, \u017ce zesp\u00f3\u0142 pracuje nad RFC dla `computed values`, a dos\u0142ownie dzisiaj opublikowa\u0142 on swoj\u0105 propozycj\u0119 API.<\/p>\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/twitter.com\/pkozlowski_os\/status\/1557403017024077824?s=21&t=eiJrowNSOCiHnFae9Fdz2A","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\r\nhttps:\/\/twitter.com\/pkozlowski_os\/status\/1557403017024077824?s=21&amp;t=eiJrowNSOCiHnFae9Fdz2A\r\n<\/div><\/figure>\r\n","innerContent":["\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\r\nhttps:\/\/twitter.com\/pkozlowski_os\/status\/1557403017024077824?s=21&amp;t=eiJrowNSOCiHnFae9Fdz2A\r\n<\/div><\/figure>\r\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p>Z jednej strony rozumiem potrzeb\u0119 pojawienia si\u0119 `copmuted values` w Angularze. Kilka tygodni temu w weekly dzielili\u015bmy si\u0119 analiz\u0105 por\u00f3wnawcz\u0105 bli\u017aniaczego kodu napisanego w r\u00f3\u017cnych frameworkach. Przygotowa\u0142em wtedy co\u015b na wz\u00f3r `copmuted values` w oparciu o rxjs i widz\u0119 teraz zaproponowane API mog\u0142oby upro\u015bci\u0107 to rozwi\u0105zanie. Z drugiej strony troch\u0119 przera\u017ca mnie ten mira\u017c klasowego cyklu \u017cycia z architektur\u0105 hook\u00f3w. Z ostatecznymi wyrokami poczekam jednak na pe\u0142ne RFC, kt\u00f3re na pewno poruszy sporo nurtuj\u0105cych mnie przypadk\u00f3w brzegowych.<\/p>\n","innerContent":["\n<p>Z jednej strony rozumiem potrzeb\u0119 pojawienia si\u0119 `copmuted values` w Angularze. Kilka tygodni temu w weekly dzielili\u015bmy si\u0119 analiz\u0105 por\u00f3wnawcz\u0105 bli\u017aniaczego kodu napisanego w r\u00f3\u017cnych frameworkach. Przygotowa\u0142em wtedy co\u015b na wz\u00f3r `copmuted values` w oparciu o rxjs i widz\u0119 teraz zaproponowane API mog\u0142oby upro\u015bci\u0107 to rozwi\u0105zanie. Z drugiej strony troch\u0119 przera\u017ca mnie ten mira\u017c klasowego cyklu \u017cycia z architektur\u0105 hook\u00f3w. Z ostatecznymi wyrokami poczekam jednak na pe\u0142ne RFC, kt\u00f3re na pewno poruszy sporo nurtuj\u0105cych mnie przypadk\u00f3w brzegowych.<\/p>\n"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e5e3d39.jpg\" alt=\"\"\/><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e5e3d39.jpg\" alt=\"\"\/><\/figure>"]},{"blockName":"core\/heading","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<h2>Bonus: Kr\u00f3tka historia czytnik\u00f3w ekranu<\/h2>\n","innerContent":["\n<h2>Bonus: Kr\u00f3tka historia czytnik\u00f3w ekranu<\/h2>\n"]},{"blockName":"core\/paragraph","attrs":{"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<p><span style=\"font-weight: 400;\">Na potrzeby procesu edytorskiego Vived, przegl\u0105dam codziennie sporo artyku\u0142\u00f3w o tematyce oko\u0142o frontendowej. Rzadko zdarza si\u0119, \u017ceby kt\u00f3ry\u015b przyci\u0105gn\u0105\u0142 mnie tak bardzo jak przygotowana przez The Verge kr\u00f3tka historia czytnik\u00f3w ekranowych. Pe\u0142ny osobistych historii i ciekawostek artyku\u0142 czyta si\u0119 niczym powie\u015b\u0107 przygodow\u0105. Je\u015bli szukacie kr\u00f3tkiej lektury na d\u0142ugi weekend to zdecydowanie polecam!<\/span><\/p>\n","innerContent":["\n<p><span style=\"font-weight: 400;\">Na potrzeby procesu edytorskiego Vived, przegl\u0105dam codziennie sporo artyku\u0142\u00f3w o tematyce oko\u0142o frontendowej. Rzadko zdarza si\u0119, \u017ceby kt\u00f3ry\u015b przyci\u0105gn\u0105\u0142 mnie tak bardzo jak przygotowana przez The Verge kr\u00f3tka historia czytnik\u00f3w ekranowych. Pe\u0142ny osobistych historii i ciekawostek artyku\u0142 czyta si\u0119 niczym powie\u015b\u0107 przygodow\u0105. Je\u015bli szukacie kr\u00f3tkiej lektury na d\u0142ugi weekend to zdecydowanie polecam!<\/span><\/p>\n"]},{"blockName":"core\/image","attrs":{"align":"center","translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e61b21f.jpg\" alt=\"\"\/><\/figure>","innerContent":["\n<figure class=\"wp-block-image aligncenter\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/08\/img_62f502e61b21f.jpg\" alt=\"\"\/><\/figure>"]},{"blockName":"core\/heading","attrs":{"level":3,"translatedWithWPMLTM":"1"},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/www.theverge.com\/23203911\/screen-readers-history-blind-henter-curran-teh-nvda\">https:\/\/www.theverge.com\/23203911\/screen-readers-history-blind-henter-curran-teh-nvda<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.theverge.com\/23203911\/screen-readers-history-blind-henter-curran-teh-nvda\">https:\/\/www.theverge.com\/23203911\/screen-readers-history-blind-henter-curran-teh-nvda<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=9287"}],"version-history":[{"count":8,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9287\/revisions"}],"predecessor-version":[{"id":9356,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9287\/revisions\/9356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/9238"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}