{"id":19904,"date":"2021-07-19T15:00:20","date_gmt":"2021-07-19T18:00:20","guid":{"rendered":"https:\/\/www.impacta.com.br\/blog\/?p=19904"},"modified":"2022-08-07T15:55:47","modified_gmt":"2022-08-07T18:55:47","slug":"gatsby-por-que-usar-framework-front-end","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/","title":{"rendered":"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End"},"content":{"rendered":"\n<p>Foi-se o tempo em que o desenvolvimento de um site ou app precisava ser uma tarefa extremamente complicada e exaustiva. Com o avan\u00e7o da tecnologia, atualmente h\u00e1 uma s\u00e9rie de ferramentas que facilitam e muito essa tarefa. Entre elas, uma das que t\u00eam se destacado \u00e9 o GatsbyJS.<\/p>\n\n\n\n<p>Est\u00e1 sem tempo de ler o conte\u00fado agora? Escute o \u00e1udio abaixo:<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"100%\" height=\"83\" scrolling=\"no\" src=\"https:\/\/go.vooozer.com\/embed\/05f70a6a\" frameborder=\"0\" title=\"Narra\u00e7\u00e3o humana do artigo\" style=\"height: 83px !important;\" allowfullscreen><\/iframe>\n\n\n\n<p>Este framework \u00e9 utilizado em especial pelos que necessitam de um blog ou site que responda bem aos padr\u00f5es de <a href=\"https:\/\/www.impacta.com.br\/blog\/como-as-estrategias-de-seo-podem-reduzir-os-custos-do-seu-negocio\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO<\/a>. Isso porque o Gatsby apresenta uma facilidade maior na constru\u00e7\u00e3o do site, bem como uma maior velocidade no carregamento do mesmo por navegadores. Mas n\u00e3o \u00e9 s\u00f3 isso.<\/p>\n\n\n\n<p>Voc\u00ea&nbsp; provavelmente deve estar querendo saber mais sobre o Gatsby e as vantagens de utiliz\u00e1-lo na constru\u00e7\u00e3o do seu site. N\u00e3o se preocupe, vamos te explicar tudo neste post: o que ele \u00e9, para que serve e como funciona. Ent\u00e3o, fica com a gente!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que \u00e9 Gatsby?<\/strong><\/h2>\n\n\n\n<p>O Gatsby ou GatsbyJS, como tamb\u00e9m \u00e9 conhecido, \u00e9 um framework escrito em <a href=\"https:\/\/www.impacta.com.br\/blog\/javascript-e-suas-funcionalidades\/\" target=\"_blank\" rel=\"noreferrer noopener\">Javascript<\/a> e com c\u00f3digo aberto. Essa ferramenta \u00e9 gratuita e permite um desenvolvimento mais r\u00e1pido e eficiente para sites e aplicativos. Justamente por isso, ele \u00e9 bastante aproveitado por portais que necessitam de um carregamento veloz para se posicionar no SEO.<\/p>\n\n\n\n<p>O motivo para essa facilidade em elaborar ou carregar sites e apps Web \u00e9 porque o GatsbyJS \u00e9 um <strong>SSG <\/strong>(Static Site Generator ou em portugu\u00eas gerador de sites est\u00e1ticos).&nbsp;<\/p>\n\n\n\n<p>O que significa que, ao utilizar esta ferramenta, cria-se sites est\u00e1ticos, ou seja, p\u00e1ginas que n\u00e3o precisam carregar informa\u00e7\u00f5es novas toda vez que s\u00e3o acessadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Para que serve o Gatsby?<\/strong><\/h3>\n\n\n\n<p>Como j\u00e1 falamos, o Gatsby \u00e9 uma ferramenta que permite a cria\u00e7\u00e3o de sites est\u00e1ticos de maneira gratuita. Ele serve especialmente bem para aqueles que necessitam de:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Sites de f\u00e1cil carregamento;<\/li><li>P\u00e1ginas de Web otimizadas para o SEO;<\/li><li>Sites responsivos;<\/li><li>Sites de f\u00e1cil desenvolvimento;<\/li><li>P\u00e1ginas que n\u00e3o precisam ter seus dados atualizados constantemente.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"315\" src=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/Gatsby-e1626717458856.png\" alt=\"Gatsby\" class=\"wp-image-19906\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O GatsbyJS no Front End<\/strong><\/h2>\n\n\n\n<p>Quando falamos em usos do Gatsby no desenvolvimento de sites e apps Web, o emprego mais comum da ferramenta \u00e9 no Front End. Para aqueles que n\u00e3o est\u00e3o familiarizados com esse termo, ele representa a \u201ccara\u201d da p\u00e1gina acessada. Nessa etapa da constru\u00e7\u00e3o \u00e9 que se converte os dados e c\u00f3digos em uma interface gr\u00e1fica.<\/p>\n\n\n\n<p>Um exemplo dessa modalidade de uso \u00e9 um blog que utiliza o WordPress com CMS para o back end e o Gatsby no <a href=\"https:\/\/www.impacta.com.br\/blog\/front-end-developer-a-bola-da-vez\/\" target=\"_blank\" rel=\"noreferrer noopener\">Front End<\/a>. Com a primeira ferramenta \u00e9 poss\u00edvel cadastrar e gerir os conte\u00fados da p\u00e1gina Web, enquanto que com a segunda ferramenta \u00e9 poss\u00edvel apresentar o conte\u00fado para o usu\u00e1rio.<\/p>\n\n\n\n<p>Isso pode acontecer porque o GatsbyJS se utiliza da tecnologia <a href=\"https:\/\/www.impacta.com.br\/blog\/introducao-ao-graphql-a-linguagem-de-consulta-do-facebook\/\" target=\"_blank\" rel=\"noreferrer noopener\">GraphQL<\/a>. Essa ferramenta facilita a integra\u00e7\u00e3o entre o back-end e o front-end.<\/p>\n\n\n\n<p>Ao tirar a necessidade do desenvolvedor criar um <a href=\"https:\/\/www.impacta.com.br\/blog\/o-que-integracao-via-api-como-funciona-pratica\/\" target=\"_blank\" rel=\"noreferrer noopener\">API <\/a>para cada parte do banco de dados, ela acelera todo o processo de constru\u00e7\u00e3o da p\u00e1gina Web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como funciona o Gatsby<\/strong><\/h2>\n\n\n\n<p>Agora que j\u00e1 conhece o Gatsby, \u00e9 momento de saber como a ferramenta funciona. De maneira simplificada, pode-se resumir o funcionamento do GatsbyJS em tr\u00eas etapas b\u00e1sicas, ainda que dentro delas possam existir outros processos ainda menores. Conhe\u00e7a cada uma:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Data Source<\/strong><\/h3>\n\n\n\n<p>Esta \u00e9 a primeira etapa no desenvolvimento de uma p\u00e1gina Web por meio do Gatsby. Ela consiste na fonte de dados que ser\u00e1 utilizada. Atrav\u00e9s de sua leitura, a ferramenta ser\u00e1 capaz de construir as funcionalidades do site na pr\u00f3xima etapa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Building<\/strong><\/h3>\n\n\n\n<p>Ap\u00f3s a execu\u00e7\u00e3o do ponto anterior, vem a segunda etapa b\u00e1sica do desenvolvimento no Gatsby. Ela consiste na incorpora\u00e7\u00e3o dos c\u00f3digos Javascript, CSS e <a href=\"https:\/\/www.impacta.com.br\/blog\/5-motivos-para-aprender-html5\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML <\/a>que ser\u00e3o necess\u00e1rios na constru\u00e7\u00e3o das p\u00e1ginas Web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Deploy<\/strong><\/h3>\n\n\n\n<p>Por fim, \u00e9 o momento da \u00faltima etapa b\u00e1sica do desenvolvimento no Gatsby conhecida como deploy. Ela consiste na entrega dos arquivos est\u00e1ticos gerados na etapa anterior e na visualiza\u00e7\u00e3o da p\u00e1gina na Web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Vantagens do GatsbyJS<\/strong><\/h2>\n\n\n\n<p>O Gatsby \u00e9 uma ferramenta que vem se popularizando nos \u00faltimos anos e sendo empregada por diversas empresas na constru\u00e7\u00e3o de seus sites. Essa popularidade n\u00e3o \u00e9 por acaso, j\u00e1 que ele \u00e9 capaz de oferecer vantagens na elabora\u00e7\u00e3o de p\u00e1ginas para Web.<\/p>\n\n\n\n<p>A ferramenta \u00e9 capaz de trazer maior praticidade e facilidade no processo de desenvolvimento de p\u00e1ginas Web. Por isso vamos te falar algumas das vantagens no uso do GatsbyJS:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Versatilidade<\/strong><\/h3>\n\n\n\n<p>Esta \u00e9 uma vantagem muito interessante e que facilita bastante o processo de constru\u00e7\u00e3o de um site. O Gatsby \u00e9 capaz de ler dados das mais diversas bases. Dessa forma, voc\u00ea pode escolher utilizar a que mais est\u00e1 habituado sem problemas, seja CMS, Markdown ou qualquer outra.<\/p>\n\n\n\n<p>Essa capacidade de ler c\u00f3digos de diversas bases de dados tamb\u00e9m se reflete na versatilidade de uso da ferramenta. Embora seu uso mais recorrente seja no front end de blogs, algumas empresas j\u00e1 a utilizam em <a href=\"https:\/\/www.impacta.com.br\/blog\/5-dicas-aumentar-vendas-ecommerce-2021\/\" target=\"_blank\" rel=\"noreferrer noopener\">e-commerces<\/a> e em outros sites empresariais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Velocidade<\/strong><\/h3>\n\n\n\n<p>Uma das vantagens mais procuradas ao se utilizar o GatsbyJS \u00e9 a velocidade que ele oferece ao carregamento do site. Como trata-se de um SSG, as p\u00e1ginas Web criadas por ele s\u00e3o est\u00e1ticas e n\u00e3o necessitam contatar o servidor a cada novo acesso de um usu\u00e1rio.<\/p>\n\n\n\n<p>Esse \u00e9 um ponto importante, pois um dos fatores de rankeamento do <a href=\"https:\/\/www.impacta.com.br\/blog\/o-que-pessoas-mais-buscaram-no-google-em-2020\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google <\/a>\u00e9 a velocidade de carregamento de um site. Isso significa que quanto mais r\u00e1pido as informa\u00e7\u00f5es de uma p\u00e1gina s\u00e3o carregadas, mais chances ela tem de aparecer entre os primeiros resultados org\u00e2nicos das buscas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Seguran\u00e7a<\/strong><\/h3>\n\n\n\n<p>A seguran\u00e7a \u00e9 um fator muito importante para p\u00e1ginas Web, tendo em vista os <a href=\"https:\/\/www.impacta.com.br\/blog\/dicas-aumentar-protecao-de-dados-home-office\/\" target=\"_blank\" rel=\"noreferrer noopener\">ataques cibern\u00e9ticos<\/a> e os hackers.&nbsp;<\/p>\n\n\n\n<p>A boa not\u00edcia \u00e9 que a estrutura est\u00e1tica utilizada pelo Gatsby para criar os sites dificulta a a\u00e7\u00e3o dos invasores em acessar os arquivos. Sendo assim, a ferramenta \u00e9 uma \u00f3tima op\u00e7\u00e3o para quem trabalha com dados pessoais sens\u00edveis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Compatibilidade<\/strong><\/h3>\n\n\n\n<p>Ao se elaborar um website, uma das preocupa\u00e7\u00f5es \u00e9 com o servidor que ser\u00e1 utilizado para hosped\u00e1-lo. \u00c9 comum haver incompatibilidades entre o servidor escolhido e a tecnologia utilizada na constru\u00e7\u00e3o das p\u00e1ginas Web, o que limita a possibilidade de escolha entre os servi\u00e7os.<\/p>\n\n\n\n<p>Com o desenvolvimento em GatsbyJS, esse problema deixa de existir. Ao elaborar um site neste framework, a p\u00e1gina \u00e9 compat\u00edvel com os mais diversos servidores. Nesse sentido, aumentando a possibilidade de escolha e diminuindo custos oriundos da hospedagem.<\/p>\n\n\n\n<p>Gostou do conte\u00fado? Quer saber mais sobre desenvolvimento? Conhe\u00e7a nosso material gratuito e <a href=\"https:\/\/conteudo.impacta.edu.br\/desenvolvimento-de-software-e-mobile\" target=\"_blank\" rel=\"noreferrer noopener\">Descubra mais sobre o mundo do desenvolvimento de software e mobile<\/a><\/p>\n\n\n\n<p>Deseja receber mais informa\u00e7\u00f5es sobre tecnologia e carreira? Assine nossa newsletter!<\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-19904\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Foi-se o tempo em que o desenvolvimento de um site ou app precisava ser uma tarefa extremamente complicada e exaustiva. Com o avan\u00e7o da tecnologia, atualmente h\u00e1 uma s\u00e9rie de ferramentas que facilitam e muito essa tarefa. Entre elas, uma das que t\u00eam se destacado \u00e9 o GatsbyJS. Est\u00e1 sem tempo de ler o conte\u00fado [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":19907,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,3],"tags":[90,66,366,857,523],"class_list":["post-19904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia","tag-desenvolvedor-front-end","tag-desenvolvimento-2","tag-desenvolvimento-web","tag-framework","tag-front-end"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End<\/title>\r\n<meta name=\"description\" content=\"O Gatsby ou GatsbyJS \u00e9 um framework quem vem facilitando a vida de desenvolvedores Front End. Conhe\u00e7a e saiba como e quando usar!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End\" \/>\r\n<meta property=\"og:description\" content=\"O Gatsby ou GatsbyJS \u00e9 um framework quem vem facilitando a vida de desenvolvedores Front End. Conhe\u00e7a e saiba como e quando usar!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2021-07-19T18:00:20+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2022-08-07T18:55:47+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\r\n\t<meta property=\"og:image:height\" content=\"800\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\r\n<meta name=\"author\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/\",\"name\":\"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png\",\"datePublished\":\"2021-07-19T18:00:20+00:00\",\"dateModified\":\"2022-08-07T18:55:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/3882324164f9237ab7e8d7ac28ecfe79\"},\"description\":\"O Gatsby ou GatsbyJS \u00e9 um framework quem vem facilitando a vida de desenvolvedores Front End. Conhe\u00e7a e saiba como e quando usar!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png\",\"width\":1280,\"height\":800,\"caption\":\"gatsby JS_framework\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/3882324164f9237ab7e8d7ac28ecfe79\",\"name\":\"Reda\u00e7\u00e3o Impacta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2532096eed25696c0e117e2cbb2f2e7c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2532096eed25696c0e117e2cbb2f2e7c?s=96&d=mm&r=g\",\"caption\":\"Reda\u00e7\u00e3o Impacta\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/redacao_impacta\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End","description":"O Gatsby ou GatsbyJS \u00e9 um framework quem vem facilitando a vida de desenvolvedores Front End. Conhe\u00e7a e saiba como e quando usar!","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.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/","og_locale":"pt_BR","og_type":"article","og_title":"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End","og_description":"O Gatsby ou GatsbyJS \u00e9 um framework quem vem facilitando a vida de desenvolvedores Front End. Conhe\u00e7a e saiba como e quando usar!","og_url":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2021-07-19T18:00:20+00:00","article_modified_time":"2022-08-07T18:55:47+00:00","og_image":[{"width":1280,"height":800,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png","type":"image\/png"}],"author":"Reda\u00e7\u00e3o Impacta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Reda\u00e7\u00e3o Impacta","Est. reading time":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/","url":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/","name":"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png","datePublished":"2021-07-19T18:00:20+00:00","dateModified":"2022-08-07T18:55:47+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/3882324164f9237ab7e8d7ac28ecfe79"},"description":"O Gatsby ou GatsbyJS \u00e9 um framework quem vem facilitando a vida de desenvolvedores Front End. Conhe\u00e7a e saiba como e quando usar!","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2021\/07\/gatsby-JS_framework.png","width":1280,"height":800,"caption":"gatsby JS_framework"},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/gatsby-por-que-usar-framework-front-end\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Gatsby: Saiba o que \u00e9 e por que usar o framework no seu Front End"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/3882324164f9237ab7e8d7ac28ecfe79","name":"Reda\u00e7\u00e3o Impacta","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2532096eed25696c0e117e2cbb2f2e7c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2532096eed25696c0e117e2cbb2f2e7c?s=96&d=mm&r=g","caption":"Reda\u00e7\u00e3o Impacta"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/redacao_impacta\/"}]}},"acf":{"post_description":"","capa_mobile":false},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/19904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=19904"}],"version-history":[{"count":0,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/19904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/19907"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=19904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=19904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=19904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}