{"id":22358,"date":"2021-01-08T14:09:53","date_gmt":"2021-01-08T13:09:53","guid":{"rendered":"https:\/\/savinol.sg-host.com\/webdesign\/react-e-i-server-components\/"},"modified":"2021-01-08T14:09:53","modified_gmt":"2021-01-08T13:09:53","slug":"react-e-i-server-components","status":"publish","type":"post","link":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/","title":{"rendered":"React e i Server Components"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>Quando si parla di framework per lo sviluppo di applicazioni web moderne, una delle opzioni pi\u00f9 diffuse e apprezzate \u00e8 <a href=\"https:\/\/www.html.it\/guide\/react-la-guida\/\">React<\/a>. Di recente, il team di sviluppo ha mostrato in anteprima i <strong>Server Components<\/strong>, <a href=\"https:\/\/www.html.it\/pag\/55496\/react-stato-e-proprieta-dei-componenti\/\">componenti<\/a> che permettono agli sviluppatori di scrivere codice che sar\u00e0 poi eseguito sul server, accelerando di conseguenza l\u2019accesso ai dati e riducendo la quantit\u00e0 di codice che dovr\u00e0 essere scaricato dal browser.<\/p>\n<p>L\u2019utilizzo di questo approccio, in determinati contesti, dovrebbe migliorare quindi le performance lato client. Ma a questo punto sorge una domanda: qual \u00e8 la migliore prassi? Dovremmo fare in modo che le applicazioni eseguano <strong>la maggior parte del codice sul client, oppure sul server?<\/strong><\/p>\n<h2>Client o server?<\/h2>\n<p>\u00c8 una domanda a cui non \u00e8 facile fornire una risposta precisa, ed \u00e8 abbastanza plausibile prevedere che la scelta dipender\u00e0 anche dal modo in cui la tecnologia si evolver\u00e0 nel tempo. D\u2019altronde \u00e8 proprio questo che abbiamo visto accadere nel tempo: le prime applicazioni web venivano eseguite principalmente sul server, ma le nuove connessioni pi\u00f9 veloci, le maggiori possibilit\u00e0 offerte da <a href=\"https:\/\/www.html.it\/guide\/guida-javascript-di-base\/\">JavaScript<\/a> ed <a href=\"https:\/\/www.html.it\/guide\/guida-html5\/\">HTML5<\/a>, e il nuovo hardware disponibile hanno spostato l\u2019asticella della bilancia pi\u00f9 verso il client.<\/p>\n<p>L\u2019arrivo di <a href=\"https:\/\/www.html.it\/articoli\/angular-react-vue-framework-javascript-a-confronto\/\">framework<\/a> come React stesso, ma anche <a href=\"https:\/\/www.html.it\/guide\/guida-angularjs\/\">Angular<\/a> o <a href=\"https:\/\/www.html.it\/guide\/vue-js-la-guida\/\">Vue<\/a>, hanno poi reso pi\u00f9 semplice la definizione di applicazioni web, a scapito per\u00f2 di un <a href=\"https:\/\/www.html.it\/guide\/guida-html\/\">HTML<\/a> pi\u00f9 prolisso e meno bello.<\/p>\n<p>L\u2019ultimo trend \u00e8 invece quello dei <strong>siti web statici<\/strong>, che utilizzano JavaScript per interrogare una serie di <a href=\"https:\/\/www.html.it\/19\/12\/2018\/microservice-e-gestione-pratica-della-complessita\/\">microservizi<\/a>, caricando di volta in volta i contenuti dinamici. Ci\u00f2 ha portato al fiorire di numerosi generatori di siti di questo tipo, quali <strong>Gatsby<\/strong>, <strong>Hugo<\/strong> e <strong>Next.js<\/strong>.<\/p>\n<h2>Il problema di siti e microservizi<\/h2>\n<p>Quest\u2019ultimo scenario sembrerebbe proprio quello in cui l\u2019uso dei Server Components potrebbe aiutare maggiormente. Immaginiamo, ad esempio, che un\u2019applicazione richieda diverse query a database differenti, al fine di popolare opportunamente diversi componenti. Ci\u00f2 pu\u00f2 essere effettuato con un\u2019unica chiamata, risultando per\u00f2 in una soluzione che, per quanto efficiente, non risulterebbe particolarmente pulita. Al contrario, se si scegliesse di far s\u00ec che ogni componente recuperi i dati necessari al suo funzionamento, si rischierebbe un forte impatto sulle prestazioni.<\/p>\n<p>L\u2019uso dei Server Components permette di risolvere il problema. Tutti i componenti di questo tipo, infatti, includono un file che viene eseguito via <a href=\"https:\/\/www.html.it\/guide\/guida-nodejs\/\">Node.js<\/a> direttamente sul server, dove la latenza dovuta alla comunicazione con il DB \u00e8 bassa e non impatta sulle prestazioni. Inoltre, le librerie React utilizzate per questi componenti non richiederebbero nemmeno di essere scaricate sul browser, con un grosso vantaggio prestazionale.<\/p>\n<p>Va detto che l\u2019uso dei Server Components non \u00e8 da confondere con il rendering lato server, poich\u00e9 quest\u2019ultimo non produce una \u201ctraduzione\u201d in HTML, bens\u00ec sfruttando un particolare formato, che sar\u00e0 poi usato dal framework nell\u2019aggiornamento dell\u2019interfaccia utente in background.<\/p>\n<p>Tra i numerosi vantaggi di questa soluzione, va menzionata la possibilit\u00e0 di accedere <strong>direttamente alle risorse di backend<\/strong>. A tale scopo, sono state introdotte nuove librerie, tra cui ad esempio <strong>react-pg<\/strong>, per l\u2019accesso ad un database <a href=\"https:\/\/www.html.it\/29\/05\/2017\/postgresql-10-le-principali-novita\/\">PostgreSQL<\/a>, <strong>react-fs<\/strong> per lavorare con il file system, e <strong>react-fetch<\/strong> per effettuare chiamate verso API direttamente lato server.<\/p>\n<h2>Conclusioni<\/h2>\n<p>Oggi molti sviluppatori combinano React e altri framework JavaScript con applicazioni scritte per gestire la parte server (tipicamente sfruttando linguaggi diversi, come <a href=\"https:\/\/www.html.it\/guide\/guida-php-di-base\/\">PHP<\/a> o <a href=\"https:\/\/www.html.it\/guide\/guida-java\/\">Java<\/a>). I Server Components di React rendono invece quest\u2019ultima tecnologia un\u2019opzione potenzialmente <strong>full-stack<\/strong>. Sebbene questa tecnologia sia ancora in fase di sviluppo, il team sta lavorando insieme agli sviluppatori di Next.js, ed \u00e8 quindi lecito aspettarsi novit\u00e0 significative a stretto giro.<\/p>\n<p><em>Fonte<\/em>: <a href=\"https:\/\/www.theregister.com\/2021\/01\/07\/react_server_components\/\" class=\"text-link text-link--special\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span class=\"underline\">The Register<\/span><i class=\"ico-external\"\/><\/a><\/p>\n<\/div>\n<p><br \/>\n<br \/><a href=\"http:\/\/feedproxy.google.com\/~r\/htmlitedit\/~3\/-miSEqCrxSI\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando si parla di framework per lo sviluppo di applicazioni web moderne, una delle opzioni pi\u00f9 diffuse e apprezzate \u00e8 React. Di recente, il team di sviluppo ha mostrato in anteprima i Server Components, componenti che permettono agli sviluppatori di scrivere codice che sar\u00e0 poi eseguito sul server, accelerando di conseguenza l\u2019accesso ai dati e&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":""},"categories":[37],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React e i Server Components - AGENZIA WEB Italia<\/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:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React e i Server Components - AGENZIA WEB Italia\" \/>\n<meta property=\"og:description\" content=\"Quando si parla di framework per lo sviluppo di applicazioni web moderne, una delle opzioni pi\u00f9 diffuse e apprezzate \u00e8 React. Di recente, il team di sviluppo ha mostrato in anteprima i Server Components, componenti che permettono agli sviluppatori di scrivere codice che sar\u00e0 poi eseguito sul server, accelerando di conseguenza l\u2019accesso ai dati e...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\" \/>\n<meta property=\"og:site_name\" content=\"AGENZIA WEB Italia\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-08T13:09:53+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"headline\":\"React e i Server Components\",\"datePublished\":\"2021-01-08T13:09:53+00:00\",\"dateModified\":\"2021-01-08T13:09:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\"},\"wordCount\":598,\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"articleSection\":[\"News\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\",\"name\":\"React e i Server Components - AGENZIA WEB Italia\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\"},\"datePublished\":\"2021-01-08T13:09:53+00:00\",\"dateModified\":\"2021-01-08T13:09:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React e i Server Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"name\":\"AGENZIA WEB Italia\",\"description\":\"Web design Web agency Italia\",\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\",\"name\":\"Multimedia Web\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"contentUrl\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"width\":200,\"height\":57,\"caption\":\"Multimedia Web\"},\"image\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React e i Server Components - AGENZIA WEB Italia","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:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/","og_locale":"it_IT","og_type":"article","og_title":"React e i Server Components - AGENZIA WEB Italia","og_description":"Quando si parla di framework per lo sviluppo di applicazioni web moderne, una delle opzioni pi\u00f9 diffuse e apprezzate \u00e8 React. Di recente, il team di sviluppo ha mostrato in anteprima i Server Components, componenti che permettono agli sviluppatori di scrivere codice che sar\u00e0 poi eseguito sul server, accelerando di conseguenza l\u2019accesso ai dati e...","og_url":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/","og_site_name":"AGENZIA WEB Italia","article_published_time":"2021-01-08T13:09:53+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"admin","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/#article","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/"},"author":{"name":"admin","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"headline":"React e i Server Components","datePublished":"2021-01-08T13:09:53+00:00","dateModified":"2021-01-08T13:09:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/"},"wordCount":598,"publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"articleSection":["News"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/","name":"React e i Server Components - AGENZIA WEB Italia","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website"},"datePublished":"2021-01-08T13:09:53+00:00","dateModified":"2021-01-08T13:09:53+00:00","breadcrumb":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/react-e-i-server-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.nycwebdesign.eu\/webdesign\/"},{"@type":"ListItem","position":2,"name":"React e i Server Components"}]},{"@type":"WebSite","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","name":"AGENZIA WEB Italia","description":"Web design Web agency Italia","publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization","name":"Multimedia Web","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","contentUrl":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","width":200,"height":57,"caption":"Multimedia Web"},"image":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42","name":"admin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22358"}],"collection":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/comments?post=22358"}],"version-history":[{"count":0,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22358\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/media?parent=22358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/categories?post=22358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/tags?post=22358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}