Server-Side Rendering (SSR) হলো একটি ওয়েব অ্যাপ্লিকেশন বা ওয়েব পেজের রেন্ডারিং প্রক্রিয়া যেখানে HTML কন্টেন্ট সার্ভারে তৈরি হয় এবং তারপর ক্লায়েন্টের ব্রাউজারে প্রেরণ করা হয়। এটি সাধারণত React, Next.js, বা অন্যান্য JavaScript ফ্রেমওয়ার্কের মাধ্যমে ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় ব্যবহৃত হয়। Redux এর সাথে SSR ব্যবহার করার ফলে, আপনি আপনার অ্যাপ্লিকেশনের প্রাথমিক স্টেট সার্ভার সাইডে লোড করতে পারেন, যা ক্লায়েন্ট সাইডে দ্রুত এবং কার্যকরী রেন্ডারিং নিশ্চিত করে।
Server-Side Rendering (SSR) কী?
SSR হল এমন একটি প্রক্রিয়া যেখানে আপনার React অ্যাপ্লিকেশন বা ওয়েব পেজের কন্টেন্ট প্রথমে সার্ভারে রেন্ডার হয়, এবং সেই তৈরি করা HTML কন্টেন্ট ব্রাউজারে পাঠানো হয়। যখন ইউজার প্রথমবার পেজটি লোড করেন, তখন সার্ভার HTML কন্টেন্ট পাঠায় এবং ব্রাউজারে দ্রুত রেন্ডার হয়, এর ফলে প্রথম লোডের সময় অ্যাপ্লিকেশনটির প্রথম পেইন্ট (first paint) দ্রুত হয়।
React অ্যাপ্লিকেশনগুলিতে SSR সাধারণত Next.js এর মাধ্যমে প্রয়োগ করা হয়, যা React-এর জন্য একটি জনপ্রিয় ফ্রেমওয়ার্ক। SSR এর মাধ্যমে, অ্যাপ্লিকেশনটি সার্ভার থেকে সম্পূর্ণ HTML রেন্ডারিং এর মাধ্যমে ক্লায়েন্টে পাঠানো হয় এবং ক্লায়েন্টের ব্রাউজারে JavaScript যোগ করা হয়, যার ফলে পরবর্তী ইন্টারঅ্যাকশনগুলো ক্লায়েন্ট সাইডেই হয়।
Redux-এ Server-Side Rendering কীভাবে কাজ করে?
Redux-এ SSR প্রয়োগ করার জন্য, আপনি অ্যাপ্লিকেশনটির প্রাথমিক স্টেটকে সার্ভার সাইডে লোড করেন এবং ক্লায়েন্ট সাইডে পাঠান। এতে করে সার্ভার থেকে রেন্ডার করা HTML পেজে আপনার অ্যাপ্লিকেশনের স্টেট অন্তর্ভুক্ত থাকে। এই স্টেট পরে Redux Store-এ সংরক্ষিত হয় এবং ব্রাউজারে রেন্ডারিং-এর পর, ক্লায়েন্ট সাইডেও একই স্টেট ব্যবহৃত হয়।
SSR-এ Redux ব্যবহার করার পদক্ষেপ:
- স্টোর প্রস্তুতি: প্রথমে, সার্ভার সাইডে একটি Redux স্টোর তৈরি করতে হবে। এর জন্য আপনাকে সার্ভার রেন্ডারিংয়ের জন্য Redux store কনফিগার করতে হবে।
- স্টেট পুশ: সার্ভার সাইডে আপনার অ্যাপ্লিকেশনের প্রাথমিক স্টেট এবং ডেটা লোড করতে হবে।
- স্টোর পাস: স্টোরটি HTML রেন্ডারিংয়ের সাথে ক্লায়েন্টে পাঠাতে হবে। যখন ব্রাউজার পেজ লোড করবে, তখন Redux স্টোরে সেই প্রাথমিক স্টেটটি পাঠানো হবে।
- স্টেট পুনরুদ্ধার: ক্লায়েন্ট সাইডে, এই স্টেট পুনরুদ্ধার করতে হবে এবং Redux store-এ সেট করতে হবে।
উদাহরণ:
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import App from './App';
import rootReducer from './reducers';
// Redux store প্রস্তুত করা
const store = createStore(rootReducer);
// প্রথমে স্টেটের ডেটা রেন্ডার করা
const content = renderToString(
<Provider store={store}>
<App />
</Provider>
);
// HTML পেজ তৈরি করা এবং Redux স্টোরের স্টেট ইনক্লুড করা
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSR with Redux</title>
</head>
<body>
<div id="root">${content}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(store.getState())}
</script>
</body>
</html>
`;
res.send(html);
এখানে:
renderToString: React কম্পোনেন্টকে স্ট্রিং হিসেবে রেন্ডার করে সার্ভার সাইড HTML তৈরি করা।window.__PRELOADED_STATE__: Redux স্টোরের স্টেট ক্লায়েন্ট সাইডে প্রেরণ করা।
Server-Side Rendering কেন প্রয়োজন?
১. SEO (Search Engine Optimization) উন্নত করা
SSR এর মাধ্যমে সার্ভার সাইডে HTML রেন্ডার হওয়ার কারণে, সার্চ ইঞ্জিন বটগুলো ওয়েব পেজের পুরো কন্টেন্ট পড়ে এবং তার ভিত্তিতে সাইটটিকে ইনডেক্স করতে পারে। সাধারণ ক্লায়েন্ট সাইড রেন্ডারিং (CSR) ক্ষেত্রে, সার্চ বটগুলো JavaScript রান করতে পারে না এবং পেজের কন্টেন্ট সহজে ইনডেক্স হয় না, যার ফলে SEO-এর দিক থেকে সমস্যা হতে পারে।
- ফায়দা: SSR পেজগুলো সার্চ ইঞ্জিনে সহজে ইনডেক্স হয়, ফলে অ্যাপ্লিকেশনের SEO পারফরম্যান্স উন্নত হয়।
২. প্রথম লোডের সময় দ্রুত রেন্ডারিং
SSR অ্যাপ্লিকেশনটি প্রথমবার লোড হওয়ার সময় সার্ভার সাইডে সম্পূর্ণ HTML তৈরি করা হয় এবং দ্রুত ক্লায়েন্টে পাঠানো হয়। এটি ব্রাউজারের মধ্যে first paint বা first contentful paint দ্রুত নিশ্চিত করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
- ফায়দা: অ্যাপ্লিকেশন দ্রুত লোড হয় এবং প্রথম ইন্টারঅ্যাকশন দ্রুত সম্পন্ন হয়।
৩. ব্যবহারকারীর অভিজ্ঞতা উন্নত করা
SSR এর মাধ্যমে পেজ লোড হওয়ার পর ইউজারদের কাছে দ্রুত কনটেন্ট পৌঁছানো সম্ভব হয়, কারণ সম্পূর্ণ HTML প্রাথমিকভাবে সার্ভার সাইডে রেন্ডার করা থাকে। এতে করে ব্যবহারকারীদের জন্য একটি মসৃণ এবং দ্রুত অভিজ্ঞতা নিশ্চিত হয়।
- ফায়দা: ইউজাররা দ্রুত কনটেন্ট দেখতে পায়, যা ব্যবহারকারীর সন্তুষ্টি বাড়ায়।
৪. প্রথম লোডের পরে ক্লায়েন্ট সাইড রেন্ডারিং
SSR-এ, প্রথম লোডের পর ক্লায়েন্ট সাইডে JavaScript ডাউনলোড এবং রান হয়। এর মাধ্যমে অ্যাপ্লিকেশনটি ক্লায়েন্ট সাইডে দ্রুত ইন্টারঅ্যাক্টিভ হয়ে ওঠে। ব্যবহারকারীর পরবর্তী ইন্টারঅ্যাকশনগুলো সার্ভার নয়, ক্লায়েন্ট সাইডে পরিচালিত হয়।
- ফায়দা: একবার পেজ লোড হয়ে গেলে, অ্যাপ্লিকেশন ক্লায়েন্ট সাইডে চলতে থাকে, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।
৫. ডাটা লোড এবং ক্যাশিং
সার্ভার সাইডে ডেটা প্রিপ্রসেসিং এবং লোড করা হয়, যা পরবর্তী রেন্ডারিংকে দ্রুত করে। এছাড়া, আপনি ডেটাকে ক্যাশে রেখে পরবর্তী রেন্ডারিংয়ের জন্য দ্রুত ডেটা অ্যাক্সেস করতে পারেন।
- ফায়দা: সার্ভারের মাধ্যমে দ্রুত ডেটা লোড এবং ক্যাশিং করা সম্ভব হয়।
সারাংশ
Server-Side Rendering (SSR) হলো এমন একটি প্রক্রিয়া যেখানে HTML কন্টেন্ট সার্ভার সাইডে রেন্ডার হয় এবং ব্রাউজারে পাঠানো হয়। Redux-এর সাথে SSR ব্যবহার করার ফলে, আপনি অ্যাপ্লিকেশনের প্রাথমিক স্টেট সার্ভারে লোড করে ব্রাউজারে পাঠাতে পারেন, যা অ্যাপ্লিকেশনটির প্রথম লোডের সময় দ্রুত এবং কার্যকরী রেন্ডারিং নিশ্চিত করে। SSR ব্যবহারের প্রধান সুবিধাগুলো হলো উন্নত SEO, দ্রুত লোড টাইম, ব্যবহারকারীর অভিজ্ঞতা উন্নয়ন এবং ক্লায়েন্ট সাইডের ইন্টারঅ্যাকশন সমর্থন।
Read more
