B sitesinin veritabanına bağlanma işini doğrudan B sitesinden erişerek yapabilirsiniz.
1. B sitesinde web servis gibi çalışacak bir sayfa oluşturun. Bu sayfa kendisine POST yöntemiyle gelen verileri alsın, kendi veritabanına yazsın.
2. A sitesinden bu B sitesindeki sayfaya POST isteği gönderin.

B sitesinde integration.php sayfası

$productId = $_POST["product_id"];
$newPrice = $_POST["price"];

updateDatabase("UPDATE products SET price='$newPrice' WHERE id=$productId");

echo json_encode(["status"=>true, "message"=>"Price updated successfully"]);
exit();

A sitesinde bir ürünün fiyatını kendi veritabanına kaydederken, B sitesine de durumu bildiren sayfa

// ... A sitesi kendi veritabanında güncelleme işini yaptıktan sonra B sitesine de verileri gönderiyor...

$fields = ['product_id' => '1234', 'price' => '19.90'];

$postvars = http_build_query($fields);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://b.site/integration.php");
curl_setopt($ch, CURLOPT_POST, count($fields));
curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
$result = curl_exec($ch);
curl_close($ch);

// Burada da dönen $result değerine göre işlemin başarılı/başarısız oluşuna göre aksiyon alınabilir...

Dikkat: Bu örneklerde hiçbir güvenlik önlemi alınmadığı için saldırıya çok açık.
B sitesinde hangi siteden istek atıldığının tespiti, SQL injection önlemleri, A sitesinin B sitesine istek göndermeden önce B sitesinde oturum açması veya bir token alması...
Ama temel olarak sunucular arası veritabanı bağlantısı kuramıyorsanız siz de böyle bir yola başvurabilirsiniz.

<div id="infinite-scroll">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

#infinite-scroll { width: 400px; height:400px; padding:5px; overflow-y: scroll;}
.item { margin:5px; height:150px; background-color: #ccc; }

const $scrollView = document.getElementById("infinite-scroll");
$scrollView.addEventListener("scroll", function (e) {
    const scrollTop = e.target.scrollTop;
    const contentHeight = e.target.scrollHeight - e.target.offsetHeight;
    if (contentHeight <= scrollTop) {
        alert("son!")
    }
}) 

web.dev sitesinden bulduğum aşağıdaki başlıklara göz atabilirsiniz.

Bazı Animasyonlar Neden Yavaş Çalışır?

Modern tarayıcılar iki CSS özelliğini ucuza canlandırabilir: transform ve opacity.
Başka bir animasyon yaparsanız, saniyede 60 kare (FPS) ipeksi pürüzsüzlükte bir hız elde edemezsiniz. Bu yazı, bunun neden böyle olduğunu açıklıyor.

Animasyon Performansı ve Kare Hızı

Web'de herhangi bir animasyon kullanılırken hedefin 60 FPS'lik bir kare hızı olduğu yaygın olarak kabul edilmektedir. Bu kare hızı, animasyonlarınızın düzgün görünmesini sağlayacaktır. Web'de bir frame, ekranı güncellemek ve yeniden render etmek için gereken tüm işleri yapmak için gereken süredir. Her frame 16.7ms (1000ms / 60 ≈ 16.7) içinde tamamlanmazsa, kullanıcılar gecikmeyi algılayacaktır.

Render İşlem Sırası

Bir web sayfasında bir şey görüntülemek için tarayıcının aşağıdaki sıralı adımlardan geçmesi gerekir:

• Style: Elemente uygulanan stiller hesaplanır.
• Layout: Her elemanın geometrik şekli ve konumu bulunur.
• Paint: Her elementin pikselleri katmanlara doldurulur.
• Composite: Katmanlar ekrana çizilir.

Bu 4 atım tarayıcıların rendering pipeline'ı olarak bilinir.
Zaten yüklenmiş bir sayfada bir şeyi anime ettiğinizde, bu adımların tekrar ele alınması gerekir. Bu süreç, animasyonun gerçekleşmesi için değiştirilmesi gereken adımdan başlar.
Daha önce yazdığım gibi, bu adımlar sıralıdır. Örneğin, layout'u değiştiren bir animasyon uygularsanız, paint ve birleştirme adımlarının da yeniden çalışması gerekir. Bu nedenle, düzeni değiştiren bir şeyi canlandırmak, yalnızca kompozisyonu değiştiren bir şeyi canlandırmaktan daha pahalıdır.Daha önce yazdığım gibi, bu adımlar sıralıdır. Örneğin, layout'u değiştiren bir animasyon uygularsanız, paint ve composite adımlarının da yeniden çalışması gerekir. Bu nedenle, layout'u değiştiren bir animasyon, yalnızca composite adımını değiştiren bir animasyondan daha maliyetlidir.

Layout Animasyon Özellikleri

Layout değişiklikleri, değişiklikten etkilenen tüm öğelerin geometrisinin (konum ve boyut) hesaplanmasını içerir. Bir elementi değiştirirseniz, diğer elemanların geometrisinin de yeniden hesaplanması gerekebilir. Örneğin, <html> öğesinin genişliğini değiştirirseniz, alt öğelerinden herhangi biri etkilenebilir. Öğelerin taşma ve birbirini etkileme şekli nedeniyle, ağacın daha aşağısındaki değişiklikler bazen en üste kadar yerleşim hesaplamalarına neden olabilir.
Görünür öğelerin ağacı ne kadar büyükse, layout hesaplamalarının yapılması o kadar uzun sürer.

Paint Animasyon Özellikleri

Paint, elementlerin ekranda hangi sırayla boyanacağını belirleme işlemidir. Genellikle pipeline'daki tüm görevlerin en uzun sürenidir.
Uygulamanızdaki öğelerin katmanlar halinde nasıl gruplandığına bağlı olarak, değişenlerin yanı sıra diğer öğelerin de boyanması gerekebilir.

Composite Animasyon Özellikleri

Composite (birleştirme), sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiğiyle ilgili bilgileri piksellere dönüştürme ve sayfayı oluşturmak için katmanları bir araya getirme (birleştirme) işlemidir.
opacity animasyonunun maliyeti düşükler listesine dahil edilmesinin nedeni budur. Bu özellik kendi katmanında olduğu sürece, bu özellikteki değişiklikler composite (birleştirme) adımı sırasında GPU tarafından işlenebilir. Chromium tabanlı tarayıcılar ve WebKit, opacity ve transform animasyonu olan herhangi bir öğe için yeni bir katman oluşturur.

Katman nedir?

Tarayıcının, canlandırılacak veya geçişi yapılacak şeyleri yeni bir katmana yerleştirerek, diğer her şeyi değil, yalnızca bu öğeleri yeniden boyaması gerekir. Photoshop'un, birlikte hareket ettirilebilen bir grup öğe içeren katman kavramına aşina olabilirsiniz. Tarayıcı oluşturma katmanları bu fikre benzer.
Tarayıcı, yeni bir katmanda hangi öğelerin olması gerektiğine karar vermekte iyiyse de, birini kaçırırsa, katman oluşturmaya zorlamanın yolları vardır. Bunu, yüksek performanslı animasyonlar nasıl oluşturulur bölümünde bulabilirsiniz.
Ancak, her katman RAM'de (geçici bellekte) yer tutacağından, yeni katman oluştururken iyi düşünmek gerekir.
Sınırlı belleğe sahip cihazlarda yeni katmanlar oluşturmak, çözmeye çalıştığınızdan daha fazla performans sorununa neden olabilir. Ek olarak, her katmanın dokularının GPU'ya yüklenmesi gerekir. Bu nedenle, CPU ve GPU arasındaki bant genişliğininin de kısıtlamasına takılarak performans kaybı yaşayabilirsiniz.

Yüksek Performanslı CSS Animasyonları Nasıl Yapılır?

Bu kılavuz size yüksek performanslı CSS animasyonlarının nasıl oluşturulacağınızı anlatır.
Bu kılavuzun önerdiği tüm CSS özellikleri çok iyi tarayıcı uyumluluğuna sahiptir:

• transform
• opacity
• will-change

... Bu sayfanın içeriği çok uzun olduğu için şu an çevirecek zamanım yok ama basit bir dil kullanıldığı için kolayca anlayabilirsiniz.

Sorumun cevabını Next.js dokümantasyonunda buldum.

Custom Server

Varsayılan olarak next.js, next start ile kendi sunucusunu başlatır.
Eğer sizin kendi backend'iniz varsa bunu Next.js ile kullanmaya devam edebilirsiniz.
Özel bir Next.js sunucusu, özel sunucu kalıplarını kullanabileceğiniz bir server başlatmanıza olanak verir.
Çoğunlukla buna ihtiyacınız omaz ama bu tam bir özelleştirme yapmanıza olanak verir.

Lütfen yalnızca Next.js'in routing yapısı sizin ihtiyaçlarınızı karşılayamıyorsa bir custom server kullanmanız gerektiğini unutmayın.
Bir custom server önemli performans optimizasyonlarını kaldıracaktır. Mesela serverless fonksiyonlar ve Automatic Static Optimization.

Aşağıdaki custom server örneğine bir göz atın:

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// middleware kullanırken `hostname` ve `port` aşapıdaki şekilde sağlanmalıdır.
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // `url.parse` için ikinci parametre olarak true vermeyi unutmayın.
      // Bu, URL'nin query bölümünü ayrıştırmasını söyler.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') await app.render(req, res, '/a', query)
      else if (pathname === '/b') await app.render(req, res, '/b', query)
      else await handle(req, res, parsedUrl)
    } 
    catch (err) {
      console.error('İşlem sırasında hata oluştu', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Sunucu Hazır: http://${hostname}:${port}`)
  })
})

server.js, babel veya webpack'ten geçmez.
Bu dosyanın gerektirdiği syntax ve import'ların, çalıştırdığınız geçerli node sürümüyle uyumlu olduğundan emin olun.

Custom server'ı çalıştırmak için package.json içindeki script komutlarını şu şekilde güncellemeniz gerekir:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

Custom server, sunucuyu Next.js uygulamasına bağlamak için aşağıdaki içe aktarmayı kullanır:

const next = require('next')
const app = next({})

İlk satırdaki next, aşağıdaki parametreleri alabilen bir objeyi parametre olarak alan bir fonksiyon döndürür:

• dev: [Boolean] - Next.js'in geliştirici modunda başlayıp başlamayacağı. Varsayılan: false
• dir: [String] - Next.js projesinin konumu. Varsayılan: "."
• quiet: [Boolean] - Sunucu bilgilerini içeren hata mesajlarını gizlemek istiyor musun? Varsayılan: false
• conf: [object] - next.config.js dosyası için kullanacağınız object'in aynısı. Varsayılan: {}
  İkinci satırdaki next fonksiyonunun sonucu atanmış olan app, Next.js'in istekleri gerektiği gibi kullanmasını sağlamak için kullanılabilir.

Dosya Sistemine Göre Yapılan Routing'i Kaldırmak

Varsayılan olaran Next.js, pages klasörü altına yerleştirilen dosya-klasör yapısına göre bir routing kullanır.
Eğer Custom Server kullanarak aynı sayfayı iki farklı link'in render etmesi sağlanıyorsa bu durum SEO ve UX açısından sorunlara yol açabilir.
Bu davranışı devre dışı bırakmak ve sayfalardaki dosyalara dayalı yönlendirmeyi önlemek için next.config.js dosyasını açın ve useFileSystemPublicRoutes yapılandırmasını devre dışı bırakın:

module.exports = {
  useFileSystemPublicRoutes: false,
}

useFileSystemPublicRoutes öğesinin SSR'den dosya adı yollarını devre dışı bıraktığını unutmayın.
İstemci tarafı yönlendirme hala bu yollara erişebilir.
Bu seçeneği kullanırken, programatik olarak istemediğiniz rotalara navigasyona karşı önlem almalısınız.

İstemci tarafı yönlendiricisini, dosya adı yollarına istemci tarafı yönlendirmelerine izin vermeyecek şekilde de yapılandırmak isteyebilirsiniz. Bunun için router.beforePopState'e bakın.