São duas maneiras diferentes de criar o aplicativo ou podem ser usadas juntas?
Eles podem ser usados juntos.
Se podemos usá-lo juntos, como fazê-lo - precisamos duplicar os mesmos elementos no lado do servidor e no lado do cliente? Ou podemos apenas construir as partes estáticas de nosso aplicativo no servidor e as partes dinâmicas no lado do cliente, sem nenhuma conexão com o lado do servidor que já foi pré-renderizada?
É melhor ter o mesmo layout sendo renderizado para evitar operações de refluxo e redesenho, menos cintilação / pisca, sua página ficará mais lisa. No entanto, não é uma limitação. Você poderia muito bem armazenar em cache o html SSR (algo que o Electrode faz para reduzir o tempo de resposta) / enviar um html estático que é sobrescrito pelo CSR (renderização do lado do cliente).
Se você está apenas começando com SSR, recomendo começar simples, SSR pode se tornar muito complexo muito rapidamente. Construir html no servidor significa perder o acesso a objetos como janela, documento (você os tem no cliente), perder a capacidade de incorporar operações assíncronas (pronto para uso) e, geralmente, muitas edições de código para tornar seu código compatível com SSR ( já que você terá que usar o webpack para embalar seu bundle.js). Coisas como importações CSS, require vs import repentinamente começam a incomodar você (este não é o caso no aplicativo React padrão sem webpack).
O padrão geral do SSR é assim. Um servidor expresso atendendo a solicitações:
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));
}
Minha sugestão para quem está começando com SSR seria servir html estático. Você pode obter o html estático executando o aplicativo CSR SPA:
document.getElementById('root').innerHTML
Não se esqueça, os únicos motivos para usar o SSR devem ser:
- SEO
- Carregamentos mais rápidos (eu descontaria isso)
Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
