search

djizco / mern-boilerplate

A Full MERN Stack Boilerplate for Web Apps including a local authentication system. Uses React, Express.js, MongoDB, Redux, Passport.js, Webpack, Testing, and more.
MIT License
272 stars 93 forks source link

Server Side Rendering - Google Can't Crawl #2

Open anthonyscolaro opened 5 years ago

anthonyscolaro commented 5 years ago

We're getting ready to launch our project which was built on this template though Google can't crawl the site. What's the best way to implement SSR?

SaltySousChef commented 5 years ago

On the server side you're going to want to use renderToString which is part of of react-dom/server to render an html version of site to show while your react app loads. You'll have to remove any references to dom elements called before componentDidMount that aren't valid in nodejs such as window or alert. You may need isomorphic fetch for node if you're getting info server side with the same code.

To make sure you have some css for that initial load you'll have to use style-loader/css-loader with webpack to read the css and SheetsRegistry from react-jss/lib/jss to dynamically create a stylesheet that you can include in the header tags of you HTML template.

While your app is loading users will not be able to interact with your site which could be a few seconds (faster first paint with SSR but longer for a full load).

djizco commented 5 years ago

I'm open to suggestions as to whether this is something I should leave for people to implement themselves. I'm not too familiar with SSR myself but I could try to add SSR with some examples if this is something that would be useful.