{"id":5650,"date":"2022-06-10T21:39:37","date_gmt":"2022-06-10T21:39:37","guid":{"rendered":"https:\/\/wptf.themepul.com\/restly-nft\/?p=5650"},"modified":"2024-07-04T03:45:05","modified_gmt":"2024-07-04T03:45:05","slug":"neden-nuxt-js","status":"publish","type":"post","link":"https:\/\/berkut.tech\/index.php\/2022\/06\/10\/neden-nuxt-js\/","title":{"rendered":"Neden Nuxt.js ?"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

<\/p>\n

Neden Nuxt.js demeden \u00f6nce neden Vue.js konusuna de\u011finmek istiyorum. Vue.js modern Javascript Framework\u00fc\u2019d\u00fcr. JavaScript i\u00e7erisinde yazm\u0131\u015f oldu\u011fumuz kodlar\u0131n ve i\u015flemlerin \u00e7ok daha h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flayan progressive bir framework\u2019t\u00fcr.<\/p>\n

<\/p>\n

<\/p>\n

Olduk\u00e7a pop\u00fcler bir framework olarak g\u00f6ze \u00e7arpan Vue.js GitHub i\u00e7erisinde en h\u0131zl\u0131 y\u00fckselen frameworkler\u2019den biridir. \u0130sterseniz normal JQuery kullan\u0131r gibi direk framework\u2019\u00fc script taglari ile sayfan\u0131za import edip kullanabilirsiniz.<\/p>\n

<\/p>\n

<\/p>\n

Angular ve React.js framework\u2019lerinin en iyi \u00f6zelliklerini i\u00e7erisinde bar\u0131nd\u0131r\u0131r. Angular syntax\u2019\u0131n\u0131, React.js\u2019den h\u0131z\u0131n\u0131 ve virtual dom \u00f6zelliklerini alm\u0131\u015ft\u0131r.<\/p>\n

<\/p>\n

<\/p>\n

State management ve Router i\u015flemleri olduk\u00e7a kolay ve ba\u015far\u0131l\u0131d\u0131r. State management konusunda Vue router bizlere \u00e7ok yard\u0131mc\u0131 olmaktad\u0131r.<\/p>\n

<\/p>\n

<\/p>\n

Vue.js \u00e7ok k\u00fc\u00e7\u00fck ve hafif olmas\u0131yla fark\u0131n\u0131 ortaya koymaktad\u0131r.<\/p>\n

<\/p>\n

<\/p>\n

Nuxt.js Vue \u00fczerinden derlenmektedir, bir nevi bir framework\u2019e ait bir framework diyebiliriz. Nuxt.js bize biraz daha esneklik ve h\u0131z kazand\u0131r\u0131yor ve daha profesyonel i\u015flere imza atmam\u0131za olanak sa\u011fl\u0131yor.<\/p>\n

<\/p>\n

<\/p>\n

Nuxt.js \u2018in Vue.js\u2019 e ekledi\u011fi \u00f6nemli \u00f6zelliklerden baz\u0131lar\u0131;<\/p>\n

<\/p>\n

<\/p>\n

    <\/p>\n

  • Vue.js uygulamalar\u0131n\u0131z\u0131 Server Side Rendering ile Google \u00fczerinde SEO uyumlu yapmas\u0131d\u0131r. Bu i\u015fleme Universal Vue Application denilmektedir.<\/li>\n

    <\/p>\n

    <\/p>\n

  • Vue.js geli\u015ftirme s\u00fcre\u00e7lerini olduk\u00e7a kolayla\u015ft\u0131rmas\u0131. Sadece dosya ve klas\u00f6r yard\u0131m\u0131yla bile bir\u00e7ok i\u015flemi Nuxt.js ile kolayl\u0131kla yapabilirsiniz.<\/li>\n

    <\/p>\n

    <\/p>\n

  • Nuxt.js kullanarak Vue Application geli\u015ftirme s\u00fcrecimizi kolayla\u015ft\u0131r\u0131r.<\/li>\n

    <\/p><\/ul>\n

    <\/p>\n

    <\/p>\n

    Nuxt.js, frontend geli\u015ftiricilerine bir\u00e7ok avantaj sunar, ancak bu framework\u2019\u00fc nihai olarak kullanman\u0131z\u0131 etkileyecek \u00f6nemli bir \u00f6zellik var: SEO iyile\u015ftirmesi.<\/p>\n

    <\/p>\n

    <\/p>\n

    SEO geli\u015ftirmek i\u00e7in Nuxt.js Server Side Rendering (Sunucu Taraf\u0131 Olu\u015fturma) kullan\u0131r. SSR, AJAX verilerini getiriyor ve Vue.js bile\u015fenlerini sunucudaki HTML dizelerine i\u015fliyor. Bu \u00f6zellik, Google Seo ayr\u0131\u015ft\u0131r\u0131c\u0131s\u0131 ile DOM \u00f6\u011feleri aras\u0131nda harika ayr\u0131\u015ft\u0131rma sa\u011flar. Seo ayr\u0131\u015ft\u0131r\u0131c\u0131 web sitesine geldi\u011finde Dom \u00f6\u011felerini hemen muazzam bir h\u0131zla ayr\u0131\u015ft\u0131r\u0131yor.<\/p>\n

    <\/p>\n

    <\/p>\n

    Nuxt.js ile ne tarz uygulamalar geli\u015ftirebiliriz?<\/strong><\/h1>\n

    <\/p>\n

    <\/p>\n

    Universal App geli\u015ftirebiliriz.<\/strong><\/h2>\n

    <\/p>\n

    <\/p>\n

      <\/p>\n

    • \u0130lk View sunucu \u00fczerinde dinamik \u015fekilde render edilir.<\/li>\n

      <\/p>\n

      <\/p>\n

    • \u0130lk y\u00fcklemeden sonra , uygulama SPA\u2019ya d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr.<\/li>\n

      <\/p>\n

      <\/p>\n

    • SEO i\u00e7in m\u00fckemmel uyumlu hale gelmektedir.<\/li>\n

      <\/p><\/ul>\n

      <\/p>\n

      <\/p>\n

      Single Page App geli\u015ftirebiliriz.<\/h2>\n

      <\/p>\n

      <\/p>\n

        <\/p>\n

      • Uygulama ilk y\u00fcklemeden sonra ba\u015flar ve Client Side taraf\u0131ndan render edilir.<\/li>\n

        <\/p>\n

        <\/p>\n

      • Uygulama Single Page Application olarak kal\u0131r.<\/li>\n

        <\/p>\n

        <\/p>\n

      • Normal Vue App gibidir fakat geli\u015ftirme s\u00fcre\u00e7leri basittir.<\/li>\n

        <\/p><\/ul>\n

        <\/p>\n

        <\/p>\n

        Statik App geli\u015ftirebiliriz.<\/strong><\/h2>\n

        <\/p>\n

        <\/p>\n

        Siz statik olarak dosyalar\u0131n\u0131z\u0131 sunmak istiyorsan\u0131z ve bunlar\u0131 Server Side \u00fczerinde render ederek g\u00f6ndermek istiyorsan\u0131z bu tam size g\u00f6re diyebilirim.<\/p>\n

        <\/p>\n

        <\/p>\n

          <\/p>\n

        • Pre-render View\u2019ler y\u00fcklenir<\/li>\n

          <\/p>\n

          <\/p>\n

        • \u0130lk y\u00fcklemeden sonra, uygulama SPA\u2019ya d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr.<\/li>\n

          <\/p>\n

          <\/p>\n

        • Sunucu taraf\u0131nda render iste\u011fi ger\u00e7ekle\u015fti\u011fi i\u00e7in SEO m\u00fckemmel uyumlu bir uygulama \u00e7\u00f6z\u00fcm\u00fcd\u00fcr.<\/li>\n

          <\/p><\/ul>\n

          <\/p>\n

          <\/p>\n

          Biz de bu g\u00fczelliklerden etkilenip Do\u011fu\u015f Teknoloji -\u0130nteraktif Web Projeleri frontend ekibi olarak Nuxt.js\u2019i projelerimizde kullan\u0131yoruz. D\u00f6n\u00fc\u015f\u00fcme \u00f6nem verip bu teknolojilerin olmad\u0131\u011f\u0131 projeleri bu tarz frameworkler ile geli\u015ftirip zenginle\u015ftirme gayesindeyiz.<\/p>\n

          <\/p>\n

          <\/p>\n

          \n
          \n

          Birkan \u00d6zcan Senior Frontend Developer<\/p>\n

          Berkut Teknoloji<\/cite><\/p><\/blockquote>\n<\/figure>\n

          <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

          Neden Nuxt.js demeden \u00f6nce neden Vue.js konusuna de\u011finmek istiyorum. Vue.js modern Javascript Framework\u00fc\u2019d\u00fcr. JavaScript i\u00e7erisinde yazm\u0131\u015f oldu\u011fumuz kodlar\u0131n ve i\u015flemlerin \u00e7ok daha h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flayan progressive bir framework\u2019t\u00fcr. Olduk\u00e7a pop\u00fcler bir framework olarak g\u00f6ze \u00e7arpan Vue.js GitHub i\u00e7erisinde en h\u0131zl\u0131 y\u00fckselen frameworkler\u2019den biridir. \u0130sterseniz normal JQuery kullan\u0131r gibi direk framework\u2019\u00fc script taglari ile sayfan\u0131za import […]<\/p>\n","protected":false},"author":3,"featured_media":5657,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[95,97],"class_list":["post-5650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-nuxtjs","tag-yazilim"],"_links":{"self":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts\/5650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/comments?post=5650"}],"version-history":[{"count":21,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts\/5650\/revisions"}],"predecessor-version":[{"id":7145,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/posts\/5650\/revisions\/7145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/media?parent=5650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/categories?post=5650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/berkut.tech\/index.php\/wp-json\/wp\/v2\/tags?post=5650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}