Uygulamayı oluşturmanın 2 ayrı yolu mu yoksa birlikte kullanılabilir mi?
Birlikte kullanılabilirler.
Birlikte kullanabilirsek, nasıl yapılır - sunucu tarafında ve istemci tarafında aynı öğeleri kopyalamamız gerekir mi? Ya da uygulamamızın statik kısımlarını sunucuda ve dinamik kısımlarını istemci tarafında, önceden oluşturulmuş sunucu tarafına herhangi bir bağlantı olmadan oluşturabilir miyiz?
Yeniden akıtma ve yeniden boyama işlemlerinden kaçınmak için aynı mizanpajın oluşturulması daha iyidir, daha az titreme / yanıp sönme, sayfanız daha düzgün olacaktır. Ancak bu bir sınırlama değildir. SSR html'sini ( Electrode'un yanıt süresini kısaltmak için yaptığı bir şey) çok iyi bir şekilde önbelleğe alabilir / CSR tarafından üzerine yazılan (istemci tarafı oluşturma) statik bir html gönderebilirsiniz.
SSR ile yeni başlıyorsanız, basit bir şekilde başlamanızı tavsiye ederim, SSR çok hızlı bir şekilde çok karmaşık hale gelebilir. Sunucuda html oluşturmak, pencere, belge (istemcide bunlar var) gibi nesnelere erişimi kaybetmek, eşzamansız işlemleri birleştirme yeteneğini kaybetmek (kutudan çıkar) ve genellikle kodunuzu SSR uyumlu hale getirmek için çok sayıda kod düzenlemesi yapmak anlamına gelir ( çünkü bundle.js dosyanızı paketlemek için web paketini kullanmanız gerekecek). CSS içe aktarma gibi şeyler, vs içe aktarmayı gerektirir, aniden sizi ısırmaya başlar (web paketi olmayan varsayılan React uygulamasında durum böyle değildir).
SSR'nin genel düzeni şuna benzer. İsteklere hizmet veren bir Express sunucusu:
const app = Express();
const port = 8092;
// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
console.log('fullUrl: ', fullUrl);
console.log('req.url: ', req.url);
// Create a new Redux store instance
const store = createStore(reducerFn);
const urlToRender = req.url;
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={urlToRender} context={{}}>
{routes}
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
// Grab the initial state from our Redux store
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(helmet, html, preloadedState));
}
SSR ile başlayanlara önerim, statik html sunmaktır. Statik html'yi CSR SPA uygulamasını çalıştırarak alabilirsiniz:
document.getElementById('root').innerHTML
Unutmayın, SSR'yi kullanmanın tek nedeni şunlar olmalıdır:
- SEO
- Daha hızlı yükler (bunu düşürürdüm)
Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
