অ্যাপ্লিকেশন তৈরির জন্য এটি কি 2 টি পৃথক উপায়, বা সেগুলি একসাথে ব্যবহার করা যেতে পারে?
তারা একসাথে ব্যবহার করা যেতে পারে।
যদি আমরা এটি একসাথে ব্যবহার করতে পারি, এটি কীভাবে করা যায় - আমাদের কি সার্ভারের সাইড এবং ক্লায়েন্টের পক্ষের একই উপাদানগুলির নকল করতে হবে? বা, আমরা কি সার্ভারে আমাদের অ্যাপ্লিকেশনটির স্থিতিশীল অংশগুলি এবং ক্লায়েন্ট সাইডের গতিশীল অংশগুলি ইতিমধ্যে প্রাক-রেন্ডার করা সার্ভারের সাথে কোনও সংযোগ ছাড়াই তৈরি করতে পারি?
রিফ্লো এবং পুনরায় রঙ অপারেশন এড়ানোর জন্য একই লেআউটটি রেন্ডার করা ভাল, কম ঝাঁকুনি / ব্লিঙ্কস, আপনার পৃষ্ঠাটি মসৃণ হবে। তবে এটি কোনও সীমাবদ্ধতা নয়। আপনি খুব ভাল ক্যাশে পারে SSR HTML (কিছু বিদ্যুদ্বাহক প্রতিক্রিয়া সময় কেটে ফেলতে করে) / একটি স্ট্যাটিক এইচটিএমএল যা সিএসআর (ক্লায়েন্ট সাইড রেন্ডার) দ্বারা ওভাররাইট পরার পাঠান।
আপনি যদি কেবল এসএসআর দিয়ে শুরু করছেন তবে আমি সহজ শুরু করার সুপারিশ করব, এসএসআর খুব দ্রুত জটিল হয়ে উঠতে পারে। সার্ভারে এইচটিএমএল তৈরির অর্থ উইন্ডো, ডকুমেন্টের (যেমন আপনার ক্লায়েন্টের মধ্যে রয়েছে) অ্যাক্সেস হারিয়ে যাওয়া, অ্যাসিঙ্ক অপারেশনগুলি (বাক্সের বাইরে) অন্তর্ভুক্ত করার ক্ষমতা হারাতে এবং আপনার কোড এসএসআরকে সামঞ্জস্য করার জন্য সাধারণত প্রচুর কোড সম্পাদনা ( যেহেতু আপনার বান্ডেল.জেগুলি প্যাক করতে আপনাকে ওয়েবপ্যাকটি ব্যবহার করতে হবে)। সিএসএস আমদানির মতো বিষয়গুলি হ'ল বনাম আমদানি হঠাৎ আপনাকে কামড় দেওয়া শুরু করে (ওয়েবপ্যাক ছাড়াই ডিফল্ট প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে এটি নয়)।
এসএসআরের সাধারণ প্যাটার্নটি দেখতে এটির মতো। একটি এক্সপ্রেস সার্ভার অনুরোধ পরিবেশন করছে:
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));
}
এসএসআর দিয়ে শুরু হওয়া লোকদের আমার পরামর্শ হ'ল স্থির এইচটিএমএল সরবরাহ করা। আপনি সিএসআর এসপিএ অ্যাপ্লিকেশন চালিয়ে স্থির এইচটিএমএল পেতে পারেন:
document.getElementById('root').innerHTML
ভুলে যাবেন না, এসএসআর ব্যবহারের একমাত্র কারণগুলি হ'ল:
- এসইও
- দ্রুত বোঝা (আমি এটি ছাড় দেব)
হ্যাক: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
