How to prerender single page app that uses React?
Question
In my application, users have their own profile page in which there is their profile picture (I'm using react router to deal with routes on client side).
What I want to do is: when a user sends link to his profile on messenger/slack/twitter then the thumbnail of the link should be his profile photo.
I know that I need to do this by sending correct meta tag, ie <meta property="og:image" content="url-image.jpg">
But I am not sure how to implement this, what should I know about it? I found a thing called prerender, but I am not sure if it's for React
2 answers
solution1
0 ACCPTED 2018-03-18 20:27:26
After a little research, I think the only why to do this is by server side rendering. It looks like Facebook doesn't care about loading JavaScript and won't detect a change in the <head> section. I checked this by building a simple React application that sets the OG data in the componentWillMount() section. The Facebook debugger could not find the headers.
So the answer on your question depends really on the kind of back-end you are using. You need to set the meta data before you send the response to the client.
solution2
0 2018-03-23 01:17:49
In your case, you may want to use react-helmet . It's a document head manager and supports server-rendering.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.