क्या यह एप्लिकेशन बनाने के 2 अलग-अलग तरीके हैं, या उन्हें एक साथ उपयोग किया जा सकता है?
इन्हें एक साथ इस्तेमाल किया जा सकता है।
यदि हम इसे एक साथ उपयोग कर सकते हैं, तो इसे कैसे करें - क्या हमें सर्वर साइड और क्लाइंट साइड पर समान तत्वों की नकल करने की आवश्यकता है? या, क्या हम सर्वर पर हमारे एप्लिकेशन के स्थैतिक भागों और क्लाइंट पक्ष पर गतिशील भागों का निर्माण कर सकते हैं, बिना सर्वर साइड के किसी कनेक्शन के जो पहले से ही पहले से रेंडर था?
रिफ्लेक्स और रिपेंट ऑपरेशंस, कम झिलमिलाहट / ब्लिंक से बचने के लिए एक ही लेआउट दिया जाना बेहतर है, आपका पेज स्मूथ होगा। हालाँकि, यह कोई सीमा नहीं है। आप SSR html को बहुत अच्छी तरह से कैश कर सकते हैं (कुछ इलेक्ट्रोड प्रतिक्रिया समय में कटौती करने के लिए करता है) / एक स्थिर html भेजें जो CSR (क्लाइंट साइड रेंडर) द्वारा अधिलेखित हो जाती है।
यदि आप अभी SSR से शुरुआत कर रहे हैं, तो मैं अनुशंसा करूँगा कि आप सरल शुरुआत करें, SSR बहुत जल्दी जटिल हो सकता है। सर्वर पर html बनाने का अर्थ है खिड़की, दस्तावेज़ जैसी वस्तुओं तक पहुंच खोना (आपके पास ये क्लाइंट पर है), async ऑपरेशंस (बॉक्स से बाहर) को शामिल करने की क्षमता खोना, और आमतौर पर आपके कोड को SSR संगत करने के लिए बहुत सारे कोड संपादन ( चूंकि आपको अपने बंडल को पैक करने के लिए वेबपैक का उपयोग करना होगा)। सीएसएस आयात, आवश्यकता बनाम आयात जैसी चीजें अचानक आपको काटने लगती हैं (यह वेबपैक के बिना डिफ़ॉल्ट रिएक्ट ऐप में मामला नहीं है)।
एसएसआर का सामान्य पैटर्न इस तरह दिखता है। एक एक्सप्रेस सर्वर अनुरोधों की सेवा:
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 से शुरू होने वाले लोगों के लिए मेरा सुझाव स्थिर html की सेवा करना होगा। आप CSR SPA ऐप चलाकर स्थिर HTML प्राप्त कर सकते हैं:
document.getElementById('root').innerHTML
मत भूलना, SSR का उपयोग करने का एकमात्र कारण होना चाहिए:
- एसईओ
- तेजी से लोड (मैं यह छूट होगी)
हैक: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
