Redux স্টেট সাধারণত ক্লায়েন্ট সাইডে পরিচালিত হয়, তবে বড় বা জটিল অ্যাপ্লিকেশনের ক্ষেত্রে কখনও কখনও এটি সার্ভার সাইড থেকেও প্রাথমিকভাবে লোড করা প্রয়োজন হতে পারে। এটি বিশেষত সার্ভার সাইড রেন্ডারিং (SSR) বা Universal Applications তৈরি করার সময় গুরুত্বপূর্ণ হয়ে ওঠে। সার্ভার সাইড থেকে Redux স্টেট লোড করা হলে, আপনি অ্যাপ্লিকেশনটি প্রথমবার লোড করার সময় প্রয়োজনীয় ডেটা এবং স্টেট পাঠাতে পারবেন, যা ক্লায়েন্ট সাইডে রেন্ডারিং করার আগে আগেই স্টেট সেটআপ করে দেয়।
এই প্রক্রিয়াটি, রেন্ডারিং সম্পূর্ণ হওয়ার আগে প্রয়োজনীয় ডেটা এবং স্টেট ইউজারকে সরবরাহ করতে সাহায্য করে, ফলে প্রথমবার রেন্ডারিং আরো দ্রুত এবং কার্যকর হয়।
সার্ভার সাইডে Redux State লোড করার পদ্ধতি
Redux স্টেট সার্ভার সাইডে লোড করার জন্য সাধারণত দুটি ধাপ অনুসরণ করা হয়:
- স্টেট সার্ভার সাইডে রেন্ডার করা (Initial state generation).
- Redux স্টেট ক্লায়েন্ট সাইডে প্রেরণ করা (Hydrating the client-side state).
১. স্টেট সার্ভার সাইডে রেন্ডার করা
প্রথমে, সার্ভার সাইডে অ্যাপ্লিকেশনটি রেন্ডার করা হয়, এবং এখানে Redux স্টোর তৈরি করা হয় যাতে প্রাথমিক ডেটা বা স্টেট সরবরাহ করা যায়।
উদাহরণ:
import express from 'express';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import App from './App';
import rootReducer from './reducers';
const app = express();
app.get('*', (req, res) => {
// Redux store তৈরি
const store = createStore(rootReducer, {
user: { id: 1, name: 'John Doe' }, // প্রাথমিক স্টেট
posts: [] // প্রাথমিক স্টেট
});
// স্টোরের ডেটা ব্যবহার করে অ্যাপ্লিকেশন রেন্ডার করা
const content = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={{}}>
<App />
</StaticRouter>
</Provider>
);
// Redux স্টোরের স্টেট ক্লায়েন্ট সাইডে পাঠানো
const preloadedState = store.getState();
// সার্ভার রেসপন্স
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSR Redux App</title>
</head>
<body>
<div id="root">${content}</div>
<script>
// Redux স্টেটকে ইনলাইন করে পাঠানো
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)};
</script>
<script src="bundle.js"></script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
এখানে:
- Redux স্টোর সার্ভার সাইডে তৈরি করা হয়েছে, যেখানে
userএবংpostsএর প্রাথমিক স্টেট দেওয়া হয়েছে। - ReactDOMServer.renderToString() ফাংশনটি সার্ভার সাইডে অ্যাপ্লিকেশন রেন্ডার করে এবং HTML আউটপুট প্রদান করে।
- window.PRELOADED_STATE এর মাধ্যমে সার্ভার সাইডের Redux স্টেটটি ক্লায়েন্ট সাইডে প্রেরণ করা হচ্ছে।
২. Redux স্টেট ক্লায়েন্ট সাইডে প্রেরণ করা (Hydrating the client-side state)
ক্লায়েন্ট সাইডে Redux স্টেট প্রাথমিকভাবে লোড করতে হয়, যেটি সার্ভার সাইড থেকে প্রেরণ করা হয়েছে। এই স্টেট ক্লায়েন্ট সাইডের অ্যাপ্লিকেশনকে হাইড্রেট (hydrate) করে, অর্থাৎ অ্যাপ্লিকেশনকে সার্ভার সাইডে রেন্ডার করা স্টেটের সাথে সিঙ্ক্রোনাইজ করে।
উদাহরণ:
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import rootReducer from './reducers';
// সার্ভার সাইড থেকে ইনলাইন করা স্টেট
const preloadedState = window.__PRELOADED_STATE__;
// Redux স্টোর তৈরি (ইনলাইন স্টেট দিয়ে)
const store = createStore(rootReducer, preloadedState);
// React অ্যাপ্লিকেশন রেন্ডার করা
ReactDOM.hydrate(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
এখানে:
window.__PRELOADED_STATE__ব্যবহার করে সার্ভার সাইডে প্রেরিত Redux স্টেট ক্লায়েন্ট সাইডে প্রাপ্ত হচ্ছে।ReactDOM.hydrateএর মাধ্যমে অ্যাপ্লিকেশন হাইড্রেট করা হচ্ছে, যাতে অ্যাপ্লিকেশন রেন্ডার হওয়ার পর ইউজার স্টেটের সাথে সিঙ্ক্রোনাইজড থাকে।
৩. Middleware ব্যবহার করা (Optional)
Redux স্টেট সার্ভার সাইডে লোড করার সময় কিছু বিশেষ প্রক্রিয়া বা ডেটা ফেচিং অপারেশন পরিচালনা করতে middleware ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি Redux Thunk বা Redux Saga ব্যবহার করে অ্যাসিনক্রোনাস ডেটা ফেচ করতে পারেন।
উদাহরণ (Redux Thunk):
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
store.dispatch(fetchData()); // অ্যাসিনক্রোনাস ডেটা ফেচিং
এখানে, fetchData() অ্যাকশন ক্রিয়েটরটি ডেটা ফেচ করার জন্য Redux Thunk মিডলওয়্যার ব্যবহার করছে।
সার্ভার সাইড Redux স্টেট লোড করার উপকারিতা
- ডেটা লোডের গতি বাড়ানো: অ্যাপ্লিকেশন প্রথমবার লোড হওয়ার সময়, প্রাথমিক ডেটা ক্লায়েন্টে পাঠানো হলে ইউজারের জন্য প্রথম রেন্ডারিং দ্রুত হয়।
- SEO সুবিধা: সার্ভার সাইড রেন্ডারিং (SSR) ব্যবহার করলে সার্চ ইঞ্জিনের জন্য অ্যাপ্লিকেশনটি আরও সুলভ হয়, কারণ পুরো HTML স্ট্রাকচার সার্ভার সাইডে রেন্ডার করা হয়।
- প্রথম লোডের সময় স্টেট প্রস্তুত থাকা: ক্লায়েন্ট সাইডের স্টেট প্রাথমিকভাবে সার্ভার থেকে পাওয়া যায়, ফলে ইউজারের জন্য দ্রুত এবং সঠিক ডেটা প্রদর্শিত হয়।
সারাংশ
Redux স্টেট সার্ভার সাইডে প্রাথমিকভাবে লোড করার প্রক্রিয়া সার্ভার সাইড রেন্ডারিং (SSR) অ্যাপ্লিকেশনগুলির জন্য গুরুত্বপূর্ণ। এতে প্রথম লোডের সময় প্রাথমিক ডেটা ক্লায়েন্টে পাঠানো হয়, ফলে ইউজার দ্রুত অ্যাপ্লিকেশন ইন্টারঅ্যাক্ট করতে পারেন। এই প্রক্রিয়া সার্ভার সাইড স্টেট রেন্ডারিং ও হাইড্রেশন নিশ্চিত করতে সাহায্য করে এবং অ্যাপ্লিকেশনটির পারফরম্যান্স উন্নত করে।
Read more
