seo Question posted in
Some basic information to get you started with this can be found here.

Reactjs wordpress prerender existing client side application for SEO

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.

Tags:

2

Answers


  1. 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

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search