Geleneksel olarak, arama motoru taray\u0131c\u0131lar\u0131 (crawler’lar), bir web sayfas\u0131n\u0131 ziyaret ettiklerinde HTML i\u00e7eri\u011fini okur ve dizine ekler. SPA’lar ise genellikle ba\u015flang\u0131\u00e7ta bo\u015f veya minimal bir HTML dosyas\u0131 (\u00f6rne\u011fin, yaln\u0131zca bir <\/p>\n
<\/div>\n<\/code> etiketi) sunar. \u0130\u00e7erik, JavaScript y\u00fcklendikten ve \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131ktan sonra DOM’a eklenir. Modern arama motorlar\u0131 (\u00f6zellikle Google), JavaScript’i i\u015fleme konusunda \u00f6nemli ilerlemeler kaydetmi\u015f olsa da, bu s\u00fcre\u00e7 zaman al\u0131c\u0131 olabilir ve her zaman m\u00fckemmel sonu\u00e7lar vermeyebilir. Di\u011fer arama motorlar\u0131 veya daha eski taray\u0131c\u0131lar i\u00e7in bu durum ciddi bir dezavantajd\u0131r. Sonu\u00e7 olarak, uygulaman\u0131z\u0131n i\u00e7eri\u011fi arama motorlar\u0131 taraf\u0131ndan do\u011fru bir \u015fekilde dizine eklenmeyebilir, bu da organik trafik kayb\u0131na yol a\u00e7ar.<\/p>\n
Performans ve \u0130lk \u0130\u00e7erik Boyama (FCP)<\/h4>\nKullan\u0131c\u0131 bir SPA’y\u0131 ziyaret etti\u011finde, taray\u0131c\u0131 \u00f6nce HTML, CSS ve JavaScript dosyalar\u0131n\u0131 indirir. JavaScript dosyalar\u0131 b\u00fcy\u00fck olabilir ve taray\u0131c\u0131n\u0131n bunlar\u0131 indirmesi, ayr\u0131\u015ft\u0131rmas\u0131 ve \u00e7al\u0131\u015ft\u0131rmas\u0131 zaman alabilir. Bu s\u00fcre zarf\u0131nda kullan\u0131c\u0131, bo\u015f bir beyaz ekran veya y\u00fckleme g\u00f6stergesi g\u00f6rebilir. Bu durum, “\u0130lk \u0130\u00e7erik Boyama” (FCP) s\u00fcresini uzat\u0131r ve k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi yarat\u0131r. H\u0131zl\u0131 y\u00fcklenen sayfalar, kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r ve hemen \u00e7\u0131kma oranlar\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n
Sosyal Medya Payla\u015f\u0131mlar\u0131<\/h4>\nSosyal medya platformlar\u0131 (Facebook, Twitter, LinkedIn vb.), bir ba\u011flant\u0131 payla\u015f\u0131ld\u0131\u011f\u0131nda sayfan\u0131n \u00f6nizlemesini olu\u015fturmak i\u00e7in genellikle kendi taray\u0131c\u0131lar\u0131n\u0131 (scraper’lar\u0131n\u0131) kullan\u0131r. Bu scraper’lar, genellikle JavaScript’i tam olarak \u00e7al\u0131\u015ft\u0131rmaz veya beklenen \u015fekilde i\u015flemez. Bu da, payla\u015f\u0131lan ba\u011flant\u0131lar\u0131n bo\u015f ba\u015fl\u0131klar, eksik a\u00e7\u0131klamalar veya yanl\u0131\u015f resimlerle g\u00f6r\u00fcnmesine neden olabilir, bu da sosyal medya pazarlamas\u0131 ve payla\u015f\u0131labilirli\u011fi a\u00e7\u0131s\u0131ndan olumsuz bir etki yarat\u0131r.<\/p>\n
\u00d6nceden Olu\u015fturman\u0131n \u00c7\u00f6z\u00fcm\u00fc<\/h4>\n\u00d6nceden olu\u015fturma (prerendering), bu sorunlara zarif bir \u00e7\u00f6z\u00fcm sunar. Uygulaman\u0131z\u0131n belirli rotalar\u0131n\u0131 derleme (build) zaman\u0131nda statik HTML dosyalar\u0131na d\u00f6n\u00fc\u015ft\u00fcrerek \u00e7al\u0131\u015f\u0131r. Yani, her bir \u00f6nceden olu\u015fturulmu\u015f rota i\u00e7in, JavaScript \u00e7al\u0131\u015fmadan \u00f6nce bile i\u00e7eri\u011fi dolu olan ayr\u0131 bir HTML dosyas\u0131 olu\u015fturulur.<\/p>\n
*   SEO i\u00e7in:<\/strong> Arama motoru taray\u0131c\u0131lar\u0131, do\u011frudan i\u00e7eri\u011fi dolu HTML dosyalar\u0131n\u0131 g\u00f6r\u00fcr ve dizine ekler.
\n*   Performans i\u00e7in:<\/strong> Kullan\u0131c\u0131lar, JavaScript’in y\u00fcklenmesini beklemeden an\u0131nda i\u00e7eri\u011fi g\u00f6r\u00fcr. Bu, FCP s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. JavaScript daha sonra y\u00fcklenir ve uygulaman\u0131n etkile\u015fimli hale gelmesini sa\u011flar (hidrasyon).
\n*   Sosyal Medya i\u00e7in:<\/strong> Sosyal medya scraper’lar\u0131, zengin meta etiketleri ve do\u011fru i\u00e7eri\u011fe sahip HTML dosyalar\u0131n\u0131 okuyabilir, b\u00f6ylece payla\u015f\u0131mlar\u0131n\u0131z do\u011fru \u015fekilde g\u00f6r\u00fcn\u00fcr.<\/p>\n
\u00d6nceden Olu\u015fturma (Prerendering) Nedir?<\/h3>\n\u00d6nceden olu\u015fturma, bir web uygulamas\u0131n\u0131n belirli rotalar\u0131n\u0131n statik HTML dosyalar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi i\u015flemidir. Bu i\u015flem, uygulaman\u0131n derleme a\u015famas\u0131nda ger\u00e7ekle\u015fir. Bir taray\u0131c\u0131 ortam\u0131 (genellikle Headless Chrome gibi bir ba\u015fs\u0131z taray\u0131c\u0131) kullan\u0131larak belirtilen rotalar ziyaret edilir, sayfa tamamen y\u00fcklendikten sonra olu\u015fturulan HTML \u00e7\u0131kt\u0131s\u0131 al\u0131n\u0131r ve statik bir dosya olarak kaydedilir.<\/p>\n
SSR (Sunucu Tarafl\u0131 Olu\u015fturma) ile Fark\u0131<\/h4>\n\u00d6nceden olu\u015fturma, genellikle Sunucu Tarafl\u0131 Olu\u015fturma (SSR) ile kar\u0131\u015ft\u0131r\u0131l\u0131r, ancak aralar\u0131nda \u00f6nemli farklar vard\u0131r:<\/p>\n
*   SSR (Server-Side Rendering):<\/strong> Her bir kullan\u0131c\u0131 iste\u011fi i\u00e7in sunucuda sayfa olu\u015fturulur. Bu, dinamik ve kullan\u0131c\u0131ya \u00f6zel i\u00e7erik i\u00e7in idealdir. Ancak, sunucu taraf\u0131nda ek y\u00fck ve daha karma\u015f\u0131k bir kurulum gerektirir.
\n*   Prerendering:<\/strong> Uygulama derleme zaman\u0131nda (build time) yaln\u0131zca belirli rotalar i\u00e7in statik HTML dosyalar\u0131 olu\u015fturulur. Bu dosyalar daha sonra bir CDN veya basit bir statik dosya sunucusu \u00fczerinden sunulur. Sunucu taraf\u0131nda ek bir i\u015flem y\u00fck\u00fc yoktur.<\/p>\n
Ne Zaman Hangisini Kullanmal\u0131?<\/strong><\/p>\n
*   Prerendering:<\/strong> \u0130\u00e7eri\u011fi \u00e7o\u011funlukla statik olan, nadiren de\u011fi\u015fen veya ki\u015fiselle\u015ftirme gerektirmeyen sayfalar (hakk\u0131m\u0131zda, ileti\u015fim, blog g\u00f6nderileri, \u00fcr\u00fcn sayfalar\u0131 gibi) i\u00e7in m\u00fckemmeldir. Kurulumu daha basittir ve daha ucuz bar\u0131nd\u0131rma se\u00e7enekleri sunar.
\n*   SSR:<\/strong> \u0130\u00e7eri\u011fi s\u0131k\u00e7a de\u011fi\u015fen, kullan\u0131c\u0131ya \u00f6zel dinamik veriler i\u00e7eren veya \u00e7ok say\u0131da rotaya sahip uygulamalar (sosyal medya ak\u0131\u015flar\u0131, e-ticaret sepetleri, kullan\u0131c\u0131 panelleri gibi) i\u00e7in daha uygundur.<\/p>\n
Prerender-SPA-Plugin’e Giri\u015f<\/h3>\nprerender-spa-plugin<\/code>, Vue.js (veya herhangi bir SPA framework’\u00fc) uygulamalar\u0131n\u0131 derleme zaman\u0131nda \u00f6nceden olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f bir Webpack eklentisidir. Bu eklenti, Headless Chrome’u (Puppeteer arac\u0131l\u0131\u011f\u0131yla) kullanarak uygulaman\u0131z\u0131n belirtilen rotalar\u0131n\u0131 ziyaret eder, JavaScript \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131ktan sonra ortaya \u00e7\u0131kan HTML’yi yakalar ve bunu statik HTML dosyalar\u0131 olarak kaydeder.<\/p>\n
prerender-spa-plugin<\/code> v3 s\u00fcr\u00fcm\u00fc, Puppeteer tabanl\u0131 bir render motoru kullan\u0131r. Bu, modern JavaScript \u00f6zelliklerini ve taray\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 daha iyi desteklemesini sa\u011flar. Ayr\u0131ca, daha esnek konfig\u00fcrasyon se\u00e7enekleri ve hata ay\u0131klama yetenekleri sunar.<\/p>\n
Vue.js Projesinde Kurulum ve Temel Yap\u0131land\u0131rma<\/h3>\nStandart bir Vue CLI projesinde prerender-spa-plugin<\/code>‘i entegre etmek olduk\u00e7a basittir.<\/p>\n
1. Kurulum<\/h4>\n\u00d6ncelikle, eklentiyi projenize geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak y\u00fcklemeniz gerekir:<\/p>\n
npm install prerender-spa-plugin@^3.0.0 --save-dev\nveya<\/h2>\nyarn add prerender-spa-plugin@^3.0.0 --dev<\/code><\/pre>\n@^3.0.0<\/code> eklemek, \u00f6zellikle v3 s\u00fcr\u00fcm\u00fcn\u00fc y\u00fcklemenizi sa\u011flar, \u00e7\u00fcnk\u00fc v2 ile v3 aras\u0131nda baz\u0131 API farkl\u0131l\u0131klar\u0131 bulunmaktad\u0131r.<\/p>\n
2. Vue.config.js Dosyas\u0131n\u0131 Yap\u0131land\u0131rma<\/h4>\nVue CLI, Webpack yap\u0131land\u0131rmas\u0131n\u0131 vue.config.js<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla \u00f6zelle\u015ftirmenize olanak tan\u0131r. Bu dosyada, prerender-spa-plugin<\/code>‘i Webpack eklentileri listesine ekleyece\u011fiz. E\u011fer vue.config.js<\/code> dosyan\u0131z yoksa, projenizin k\u00f6k dizininde olu\u015fturun.<\/p>\n
\/\/ vue.config.js\nconst path = require('path');\nconst PrerenderSPAPlugin = require('prerender-spa-plugin');\n\nmodule.exports = {\n  \/\/ Vue CLI'nin kendi Webpack yap\u0131land\u0131rmas\u0131n\u0131 geni\u015fletmek i\u00e7in configureWebpack kullan\u0131r\u0131z.\n  configureWebpack: () => {\n    if (process.env.NODE_ENV !== 'production') return {}; \/\/ Sadece production build'\u0131nda \u00e7al\u0131\u015ft\u0131r\n\n    return {\n      plugins: [\n        new PrerenderSPAPlugin({\n          \/\/ prerendered dosyalar\u0131n\u0131n kaydedilece\u011fi dizin\n          staticDir: path.resolve(__dirname, 'dist'),\n          \/\/ \u00d6nceden olu\u015fturulacak rotalar\n          routes: ['\/', '\/hakkimizda', '\/iletisim'],\n          \n          \/\/ Renderer yap\u0131land\u0131rmas\u0131 (Puppeteer varsay\u0131lan olarak kullan\u0131l\u0131r)\n          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({\n            \/\/ Sayfa y\u00fcklendikten sonra belirli bir DOM olay\u0131n\u0131 beklemek i\u00e7in\n            \/\/ renderAfterDocumentEvent: 'render-ready', \n            \n            \/\/ Sayfa y\u00fcklendikten sonra belirli bir \u00f6\u011fenin var olmas\u0131n\u0131 beklemek i\u00e7in\n            \/\/ renderAfterElementExists: '#app', \n            \n            \/\/ Sayfa y\u00fcklendikten sonra belirli bir s\u00fcre beklemek i\u00e7in (milisaniye cinsinden)\n            renderAfterTime: 5000, \/\/ \u00d6rnek: 5 saniye bekle\n            \n            \/\/ Puppeteer'a \u00f6zel arg\u00fcmanlar\n            args: ['--no-sandbox', '--disable-setuid-sandbox'],\n            \n            \/\/ Headless modda \u00e7al\u0131\u015ft\u0131r (varsay\u0131lan: true)\n            \/\/ headless: false, \/\/ Hata ay\u0131klama i\u00e7in false yap\u0131labilir\n          })\n        })\n      ]\n    };\n  }\n};<\/code><\/pre>\nA\u00e7\u0131klama:<\/strong><\/p>\n
*   path.resolve(__dirname, 'dist')<\/code>: staticDir<\/code> se\u00e7ene\u011fi, \u00f6nceden olu\u015fturulmu\u015f HTML dosyalar\u0131n\u0131n kaydedilece\u011fi dizini belirtir. Vue CLI’nin varsay\u0131lan \u00e7\u0131kt\u0131 dizini dist<\/code> oldu\u011fundan, bu yolu kullan\u0131r\u0131z.
\n*   routes: ['\/', '\/hakkimizda', '\/iletisim']<\/code>: Bu, \u00f6nceden olu\u015fturulmas\u0131n\u0131 istedi\u011finiz URL yollar\u0131n\u0131n bir dizisidir. Her bir rota i\u00e7in ayr\u0131 bir HTML dosyas\u0131 olu\u015fturulacakt\u0131r (\u00f6rne\u011fin, \/dist\/index.html<\/code>, \/dist\/hakkimizda\/index.html<\/code>, \/dist\/iletisim\/index.html<\/code>).
\n*   renderer: new PrerenderSPAPlugin.PuppeteerRenderer({...})<\/code>: Bu, eklentinin sayfalar\u0131 nas\u0131l olu\u015fturaca\u011f\u0131n\u0131 yap\u0131land\u0131rd\u0131\u011f\u0131m\u0131z yerdir. PuppeteerRenderer<\/code> varsay\u0131lan ve \u00f6nerilen render motorudur.<\/p>\n
    *   renderAfterTime: 5000<\/code>: Bu, sayfan\u0131n tamamen y\u00fcklendi\u011finden emin olmak i\u00e7in kritik bir se\u00e7enektir. Uygulaman\u0131z\u0131n t\u00fcm JavaScript’ini \u00e7al\u0131\u015ft\u0131rmas\u0131 ve veri \u00e7ekme i\u015flemlerini tamamlamas\u0131 i\u00e7in yeterli bir s\u00fcre tan\u0131r. E\u011fer verileriniz asenkron olarak y\u00fckleniyorsa, bu s\u00fcreyi art\u0131rman\u0131z gerekebilir. Alternatif olarak, renderAfterDocumentEvent<\/code> veya renderAfterElementExists<\/code> se\u00e7eneklerini kullanabilirsiniz.
\n    *   args: ['--no-sandbox', '--disable-setuid-sandbox']<\/code>: \u00d6zellikle CI\/CD ortamlar\u0131nda veya Linux sunucular\u0131nda Puppeteer’\u0131n do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in bu arg\u00fcmanlar genellikle gereklidir. G\u00fcvenlik nedeniyle --no-sandbox<\/code> kullan\u0131lmas\u0131 tavsiye edilir.<\/p>\n
Bu yap\u0131land\u0131rma ile, npm run build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Webpack uygulaman\u0131z\u0131 derleyecek ve ard\u0131ndan prerender-spa-plugin<\/code> devreye girerek belirtilen rotalar i\u00e7in statik HTML dosyalar\u0131n\u0131 dist<\/code> dizinine kaydedecektir.<\/p>\n
Geli\u015fmi\u015f Yap\u0131land\u0131rma Se\u00e7enekleri<\/h3>\nprerender-spa-plugin<\/code> v3, daha karma\u015f\u0131k senaryolar i\u00e7in bir dizi geli\u015fmi\u015f yap\u0131land\u0131rma se\u00e7ene\u011fi sunar.<\/p>\n
Renderer Se\u00e7enekleri (PrerenderSPAPlugin.PuppeteerRenderer<\/code>)<\/h4>\n*   renderAfterDocumentEvent: 'my-custom-event'<\/code>: Uygulaman\u0131zda belirli bir DOM olay\u0131n\u0131 tetikledikten sonra prerendering’in bitmesini bekler. \u00d6rne\u011fin, Vue uygulaman\u0131z t\u00fcm verileri y\u00fckledikten sonra document.dispatchEvent(new Event('render-ready'))<\/code> \u015feklinde bir olay tetikleyebilirsiniz. Bu, renderAfterTime<\/code>‘dan daha g\u00fcvenilir bir y\u00f6ntemdir.
\n*   renderAfterElementExists: '#app-root'<\/code> veya renderAfterElementExists: '.my-content-loaded-class'<\/code>: Belirli bir DOM \u00f6\u011fesinin sayfada g\u00f6r\u00fcnmesini bekler. Bu, i\u00e7eri\u011fin y\u00fcklendi\u011fini g\u00f6steren bir elementiniz oldu\u011funda kullan\u0131\u015fl\u0131d\u0131r.
\n*   maxAttempts: 3<\/code>: Bir rota i\u00e7in olu\u015fturma i\u015flemi ba\u015far\u0131s\u0131z olursa ka\u00e7 kez yeniden denenece\u011fini belirtir.
\n*   timeout: 60000<\/code>: Bir rotan\u0131n olu\u015fturulmas\u0131 i\u00e7in maksimum bekleme s\u00fcresi (milisaniye). Varsay\u0131lan 60 saniyedir.
\n*   headless: true\/false<\/code>: Puppeteer’\u0131n ba\u015fs\u0131z modda (arka planda) m\u0131 yoksa g\u00f6rsel bir pencerede mi \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirler. false<\/code> olarak ayarlamak, hata ay\u0131klama s\u0131ras\u0131nda ne oldu\u011funu g\u00f6rmenizi sa\u011flar.
\n*   inject: { foo: 'bar' }<\/code>: Prerender edilen sayfaya global de\u011fi\u015fkenler enjekte eder. Bu de\u011fi\u015fkenlere window.foo<\/code> gibi eri\u015filebilir. Bu, prerender s\u0131ras\u0131nda uygulaman\u0131z\u0131n davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in kullan\u0131labilir.
\n*   skipThirdPartyRequests: true<\/code>: Performans\u0131 art\u0131rmak i\u00e7in \u00fc\u00e7\u00fcnc\u00fc taraf isteklerini (\u00f6rne\u011fin, CDN’lerden gelen fontlar, analitik betikleri) engeller. Bu, prerendering s\u00fcresini k\u0131saltabilir.
\n*   viewport: { width: 1280, height: 800 }<\/code>: Puppeteer taraf\u0131ndan kullan\u0131lan viewport boyutlar\u0131n\u0131 ayarlar.<\/p>\n
Genel Plugin Se\u00e7enekleri<\/h4>\n*   postProcess: (context) => { ... }<\/code>: Prerendered HTML \u00fczerinde son i\u015flem yapmak i\u00e7in kullan\u0131l\u0131r. context<\/code> nesnesi html<\/code>, route<\/code>, originalRoute<\/code>, outputPath<\/code> gibi bilgileri i\u00e7erir. \u00d6rne\u011fin, belirli script etiketlerini kald\u0131rmak veya ek meta etiketleri eklemek i\u00e7in kullan\u0131labilir.<\/p>\n
postProcess: (context) => {\n      \/\/ Google Analytics scriptini kald\u0131r\n      context.html = context.html.replace(\/]src=\"https:\\\/\\\/www.googletagmanager.com\\\/gtag\\\/js[^>]<\/em>><\\\/script>\/g, '');\n      \/\/ Uygulama ba\u015flatma scriptini ertele\n      context.html = context.html.replace('id=\"app\"><\/div>', 'id=\"app\"><\/div>