Це 2 окремі способи побудови програми, чи їх можна використовувати разом?
Їх можна використовувати разом.
Якщо ми можемо використовувати це разом, як це зробити - чи потрібно дублювати однакові елементи на стороні сервера та клієнта? Або ми можемо просто побудувати статичні частини нашого додатку на сервері та динамічні частини на стороні клієнта без будь-якого з'єднання із стороною сервера, яка вже була попередньо надана?
Краще, щоб той самий макет виводився, щоб уникнути операцій поповнення та перефарбовування, менше мерехтіння / миготіння, ваша сторінка буде гладшою. Однак це не обмеження. Ви можете дуже добре кешувати html-код SSR (щось робить Electrode , щоб скоротити час відповіді) / надіслати статичний html, який буде перезаписаний CSR (рендерінг на стороні клієнта).
Якщо ви тільки починаєте з SSR, я рекомендую почати простий, SSR може отримати дуже складний дуже швидко. Побудувати html на сервері означає втрату доступу до таких об'єктів, як вікно, документ (у вас це є на клієнті), втрата можливості включити асинхронні операції (нестандартно) та, як правило, безліч редагувань коду, щоб ваш код був сумісний з SSR ( оскільки вам доведеться використовувати webpack для упаковки свого bundle.js). Такі речі, як імпорт CSS, вимагають від імпорту, раптом почніть кусати вас (це не так у програмі React за замовчуванням без веб-пакета).
Загальна схема ССР виглядає приблизно так. Експрес-сервер, що обслуговує запити:
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. Ви можете отримати статичний html, запустивши додаток CSR SPA:
document.getElementById('root').innerHTML
Не забувайте, що єдиними причинами використання SSR повинні бути:
- SEO
- Швидше завантаження (я б знижував це)
Хак: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
