Это два разных способа создания приложения или их можно использовать вместе?
Их можно использовать вместе.
Если мы можем использовать это вместе, как это сделать - нужно ли нам дублировать одни и те же элементы на стороне сервера и на стороне клиента? Или мы можем просто создать статические части нашего приложения на сервере и динамические части на стороне клиента без какого-либо подключения к стороне сервера, которая уже была предварительно обработана?
Лучше иметь тот же макет, чтобы избежать операций перекомпоновки и перерисовки, меньше мерцания / миганий, ваша страница будет более плавной. Однако это не ограничение. Вы могли бы очень хорошо кэшировать HTML-код SSR (что-то, что делает Electrode для сокращения времени отклика) / отправлять статический HTML-код, который перезаписывается CSR (рендеринг на стороне клиента).
Если вы только начинаете работать с SSR, я бы рекомендовал начать с простого, SSR может очень быстро стать очень сложным. Создание html на сервере означает потерю доступа к таким объектам, как окно, документ (они есть у вас на клиенте), потерю возможности включать асинхронные операции (из коробки) и, как правило, множество правок кода для обеспечения совместимости кода с SSR ( так как вам нужно будет использовать webpack для упаковки вашего bundle.js). Такие вещи, как импорт CSS, require vs import, внезапно начинают вас кусать (это не так в приложении React по умолчанию без веб-пакета).
Общая картина 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. Вы можете получить статический HTML, запустив приложение CSR SPA:
document.getElementById('root').innerHTML
Не забывайте, что единственными причинами использования SSR должны быть:
- SEO
- Более быстрые загрузки (я бы сбрасывал со счетов это)
Взломать: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
