0

I am using React in my project and I have problem with client-side prerendering. More specifically, it would be necessary to configure SEO Which is the least painless way to prerender existing reactjs app wiht react-routes

Some examples I have researched:

  1. Gatsby.js - https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/
  2. Next.js - https://nextjs.org/docs#custom-document
  3. Netlify - https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87
  4. React-snap - https://web.dev/prerender-with-react-snap/
  5. Prerender.io - https://prerender.io/
  6. Keen’s Server Side Rendered - https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
  7. Razzle - https://reactresources.com/topics/razzle
  8. React Helmet - https://github.com/nfl/react-helmet

Can anyone suggest what option I should choose that is the least painless. I have headless wordpress as backend and reactjs client-side as frontend.

Or are there other faster options besides the prerendering?

Thanks.

2 Answers 2

0

IMO you really don't need to use a framework to achieve SSR if you want to keep control without turning your codebase into a blackbox and choose your own stack.

I created some boilerplate using Node Express. It supports:

  • SSR using StaticRouter on the server and BrowserRouter in the client
  • ES6 webpack transpilation + hot reloading both client and server and auto-updating browser
  • Redux, data preloading and client store hydration

    https://github.com/kimgysen/isomorphic-react-setup

Last time I ran it, I noticed that I hadn't saved the favIcon in the public folder and perhaps there are some minor bugs that I will fix soon (I've fixed them in my projects but didn't update this repo because nobody looks at it anyway (lol!)), but what happens here isn't all that difficult to understand.

I created some basic SSR websites with it in a matter of hours.
I enjoy redux-observable to initiate server ajax calls before rendering the content (using forkJoin), but this is not included in the boilerplate (I haven't actually supported it since I uploaded the first time).

But in terms of setup, I don't really see a point in using a framework for this necessarily, it really isn't that painful / difficult to do yourself.
The benefit that I particularly like is that you don't depend yourself on the scope and dependencies of the framework. You don't get into trouble with things like 'the framework will support this feature or fix that bug in one of the upcoming releases'.

Although ultimately, it comes down to personal choice. So it's not like I want to downgrade these frameworks.

Note: The way Redux achieves pre-rendering is simply by adding Redux store (state) objects to the window object in the html that is sent back to the client.
Then at the client, the it initializes the stores with these objects.
So very simply, this is something that is easy to achieve, even if you decide not to implement any other SSR features.

4
  • Am I right that if I use redux it should solve the problem. Where is best way to start.
    – Shark
    Dec 13, 2019 at 18:13
  • @Shark I have very positive experience with Redux. Please read this: redux.js.org/recipes/server-rendering Dec 13, 2019 at 22:54
  • But how is deploying process different after client side to server side. Is there any major difference?
    – Shark
    Dec 14, 2019 at 0:29
  • @Shark No there isn't. You can build and start both through an npm script using a webpack build. Dec 14, 2019 at 6:39
0

to create server side applicantion with painless integration you can use my cli to generate a default configuration like create react app cli from facebook, https://github.com/ghondar/crassa

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.